Chrome DevTools search all javascript files in website

Question

I'm working on a new client's website that loads Javascript from a CDN so the Javascript is not embedded or inline with the webpage source. I would like to pause everytime getCurrentPosition() is executed in order to determine which external JS file it is contained in.

I realize I could use other tools to do a string search through the contents of the JS files but I would rather keep to Chrome's debugging tools.

Should I be trying to create a watch expression or is there another way to pin down when and where a certain JS function is fired?

Solution 1

You can search in all files using Chrome DevTools. Find your function and debug it:

1. Open DevTools (F12)
2. Go to sources tab
3. Open Search All Files by pressing ctrl + shift + f (Win) or cmd + option + f (Mac)
4. Search getCurrentPosition
5. Put a breakpoint (By clicking the line number at the left of the line)

Solution 2

1. Open Google Dev tools(F12)
2. Press Ctrl + p

In the opened box search for all files(JS, CSS, ...).

In the box you have 5 options:

At the first select a file for using options 2-5

1. Type 'filename' and select it.
2. Type ':linenumber' to go to specific line number(':10' go to line 10).
3. Type '@symbol' to go to specific symbol('@TestSymbol' go to TestSymbol symbol).

In this option, if you write @JSFunctionName or @CSSClassName then the cursor will navigate to the JSFunctionName or the CSSClassName.

4. Type '!snippet' to go to specific snippet('!snippetTest' go to snippetTest snippet).
5. Type '>googleCommand' to go to specific command('>Clear console' clear the console).

Solution 3

One way would be to replace the Geolocation.getCurrentPosition method with a wrapper function so that you can set a breakpoint inside it, and then examine the stack to see who is calling it.

Solution 4

If you know where in the code the method is called you can set breakpoints. This will pause the javascript execution during runtime and allow you get a stack trace.

Solution 5

You can find all the information that you need at the webpage: https://developer.chrome.com/devtools/docs/javascript-debugging

By simply putting it (copied from the webpage)

Open a site such as the Google Closure hovercard demo page or the TodoMVC

1. Open a site such as the Google Closure hovercard demo page or the TodoMVC Angular app

2. Open the DevTools window.

3. If it is not already selected, select Sources.

Debugging with breakpoints

A breakpoint is an intentional stopping or pausing place in a script. Use breakpoints in DevTools to debug JavaScript code, DOM updates, and network calls.

Add and remove breakpoints In the Sources panel, open a JavaScript file for debugging. In the example below, we are debugging the todoCtrl.js file from the AngularJS version of TodoMVC.

Click the line gutter to set a breakpoint for that line of code. A blue tag will indicate if a breakpoint has been set:

With the above simple example you can actually "stop" the function getCurrentPosition() and debug it.

View more solutions

Comments

[sparecycle]

This helped me find what I was looking for. Thank you!

[Evan Wise]

Nice, did not know that DevTools had a "Search all sources" option.

[redolent]

Cmd+Option+F on Mac

[vzR]

totally worth scrolling beyond the recommended answer; this is a lot of help

[Prid]

Bless your soul! This made the source code digging infinitely easier <3