46

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?

4

5 Answers 5

93

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)

enter image description here

4
  • 2
    This helped me find what I was looking for. Thank you!
    – sparecycle
    Jun 7, 2016 at 17:47
  • Nice, did not know that DevTools had a "Search all sources" option.
    – Evan Wise
    Jun 7, 2016 at 21:36
  • Cmd+Option+F on Mac
    – redolent
    Jan 23, 2017 at 22:46
  • Bless your soul! This made the source code digging infinitely easier <3
    – Prid
    May 4, 2020 at 0:48
23
  1. Open Google Dev tools(F12)
  2. Press Ctrl + p

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

search all files in javascript

In the box you have 5 options:

enter image description here 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.

  1. Type '!snippet' to go to specific snippet('!snippetTest' go to snippetTest snippet).
  2. Type '>googleCommand' to go to specific command('>Clear console' clear the console).
1
  • 3
    totally worth scrolling beyond the recommended answer; this is a lot of help
    – vzR
    Feb 26, 2018 at 8:49
3

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

enter image description here

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:

enter image description here

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

1

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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.