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?

Jaqen H'ghar
  • 16,186
  • 8
  • 49
  • 52
sparecycle
  • 2,038
  • 5
  • 31
  • 58
  • Do you know where `getCurrentPosition` is defined? Where it's called? – Carl Vitullo Jun 07 '16 at 17:17
  • There is search in the Google tools. http://stackoverflow.com/questions/4145266/how-to-search-all-loaded-scripts-in-chrome-developer-tools/7970237#7970237 – epascarello Jun 07 '16 at 17:18
  • Possible duplicate of [How to search all loaded scripts in Chrome Developer Tools?](http://stackoverflow.com/questions/4145266/how-to-search-all-loaded-scripts-in-chrome-developer-tools) – Dan Dascalescu May 04 '17 at 00:21
  • Use 'Go to file' in Google Dev Tools (a flexible and useful tool with ability search on your function name, class name in CSS, ...). [More info:](https://stackoverflow.com/a/47690078/7487135) – Iman Bahrampour Dec 07 '17 at 08:40

5 Answers5

92

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

Jaqen H'ghar
  • 16,186
  • 8
  • 49
  • 52
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).
Iman Bahrampour
  • 6,180
  • 2
  • 41
  • 64
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.

John Skoumbourdis
  • 3,041
  • 28
  • 34
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.

Evan Wise
  • 84
  • 6
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.

Daniel Lizik
  • 3,058
  • 2
  • 20
  • 42