Chrome DevTools search all javascript files in website

ID : 131373

viewed : 7

Tags : javascriptgoogle-chromedebugginggoogle-chrome-devtoolsjavascript

Top 5 Answer for Chrome DevTools search all javascript files in website

vote vote

96

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

vote vote

84

  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).
vote vote

78

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.

vote vote

70

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.

vote vote

56

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.

Top 3 video Explaining Chrome DevTools search all javascript files in website

Related QUESTION?