CODEWITHSUNDEEP
javascriptdebugginggoogle-chrome-devtoolsfirefox-developer-tools
Ryan
Ryan

Reputation: 10131

How to break on currently running JavaScript

I've a HTML page which contains some hacked script which contains something like, e.g.

setTimeout(function () {
    window.location = window.location;
}, 3000);

But assume this page used a lot of minified JS and span over multiple files, with Chrome/Firefox developer tool, how to spot the above section of code from multiple files? i.e. stop the execution and break on the currently running line?

Upvotes: 2

Views: 643

Answers (2)

pbrosset
pbrosset

Reputation: 749

If the code is large and unknown to you, one option is to use the Profiler.

There's a "Profiles" tab in Chrome devtools and a "Performance" tab in Firefox devtools. Each of these tools behave pretty much the same in that you start a recording, then wait (or perform any action on the page that you know leads to script running), then stop the recording.

The panel in the middle is going to display a call tree of all the scripts that ran during that period of time with columns that should, hopefully, tell you more about what took time. Using that call tree, you can then drill down to discover what got executed exactly and then from there, jump to the actual line in the script.

Here's the chrome devtools profiler documentation page and here's the firefox devtools counterpart.

One other option you have, using the firefox devtools is the tracer. A tracer is a tool that record everything that occurred at the javascript level: what functions got called, what arguments where passed, what value got returned, what functions did those, in turn, called, ...

To check it out:

  • open about:config in firefox, then switch pref "devtools.debugger.tracer" to true.
  • Then open the devtools and switch to the debugger panel.
  • Then click on the double arrow icon, next to the pause/step over/step in/ step out buttons.
  • This will start the tracing and switch the side bar to the "traces" panel.
  • Click again to end the recording.

You should see the trace of what got executed. If you click on any entry in the trace, you'll see the associated script and in the sidebar, the arguments and return values.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075755

"spot(ting) the above section of code" and "stop(ping) the execution and break on the currently running line" are completely different things.

spot(ting) the above section of code

To find code anywhere in the various source files, your can use Chrome's Dev Tools' global search feature:

  1. Open Dev Tools (F12, Ctrl+Shift+I, or via the menu)

  2. Switch to the Sources pane

  3. Press Ctrl+Shift+F (probably Cmd+Shift+F on a Mac)

  4. Type what you want to find

stop(ping) the execution and break on the currently running line

  1. Open Dev Tools (F12, Ctrl+Shift+I, or via the menu)

  2. Switch to the Sources pane

  3. Click the pause button (it looks like two vertical bars)

Dev Tools should break on the next bit of JavaScript that tries to run (according to this page on developer.chrome.com).

Upvotes: 2

Related Questions