How to break on currently running JavaScript - 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?

"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:
Open Dev Tools (F12, Ctrl+Shift+I, or via the menu)
Switch to the Sources pane
Press Ctrl+Shift+F (probably Cmd+Shift+F on a Mac)
Type what you want to find
stop(ping) the execution and break on the currently running line
Open Dev Tools (F12, Ctrl+Shift+I, or via the menu)
Switch to the Sources pane
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).

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.

Related

Trace Javascript event handling in browser

Is there a browser that will allow me to trace the execution of Javascript events? For example, for some random site online, if I click on something in one area of the page, it causes the text in some other area of the page to get updated with some new text. I would like to be able to trace what happens from the click all the way to the value being updated. When I say trace I mean that I would like the browser to tell me the name of the Javascript function that handles the click (and which file it is located in) and which Javascript function updates the value on the page.
The solution must work for any random website on the internet.
In chrome you can trace js codes in website with DEBUG mode.
Open Chrome.
Open a website.
Open Dev Tool with press F12.
On the menu click Sources. Now you can see all js files at there. And there is a debug panel. You can start, renew, break, trace a code line with these tools.
On js code panel you can put breakpoints on the line numbers.
Press F5 and refresh the page. Code will pause and you can trace js values.

Discovery JavaScript execution path and files in Browser Developer Tools

I'm sure this must be a burden to other people too...
Say I am debugging a website, and there is an element on the site that when clicked calls a particular function; for example:
<img src="foo.png" onclick="javascript:Bar();" />
But I have no idea where Bar is declared in terms of the file structure. It could be coming from an external source or could be in the website solution.
Are there any tools that can be added into the browser (i.e. a FireFox extension) that can assist with this?
I'd sort of like something that when I click something that fires some javascript, breaks the execution and shows me where the execution was going to occur
You can use Firebug (FF add-on)
Open Firebug (press F12), Open Script tab and use search field.
In chrome (> v 15) developer tools you can search all sources.
Press F12, make sure the console is shown, then on the tab bar next to console is search, go into that tab, type in function Bar and hit return. Or after pressing F12 press Shift Ctrl F (Command option F on Mac)
There are a few caveats on this , e.g. i dont think this will find scripts inside iframes

How to print all callers ancestors

I am tracing a bug in Javascript,
And want to know where is the original root cause,
But the function calls are too deep.
I use this way to find the first caller.
arguments.callee.caller....
How to print all the callers in a time ?
Thanks
Either:
A) Insert a debugger; statement on its own line in your JavaScript (at a point where you'd like execution to pause). Open Chrome Dev Tools and reload your page.
Or:
B) Open Chrome Dev Tools, select the Sources panel, open the relevant (JS) file, click on a line number to add a breakpoint, and reload your page.
And then:
Inspect values by hovering over them in the upper Sources panel (and clicking the resultant popup to drill down into them) or by clicking them the Scope Variables and Watch Expressions panels on the lower-right.
While debugging, you can also insert further breakpoints (the blue pentagons), step into/through/over function calls, and run code-checks in the console.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger
https://developer.chrome.com/devtools/docs/javascript-debugging
https://www.codeschool.com/courses/discover-devtools

How do I find out what functions are called when a button is pressed in Chrome Console?

I am trying to teach myself the Google Closure javascript library. I am examining the TreeControl UI widget.
How can I use Chrome Console to analyze what functions are run when I click on the "Cut" button in the demo below? For instance, can I somehow set a break point for that? I've tried viewing the source and looking around, but I feel that Chrome Console may offer a more systematic method.
https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html
You may be looking for the "Event Listener Breakpoints" section on the right side of the Debugger area. Open that up and select the click event under "mouse". See the screen image. Then click on the button in the app and you will immediately be taken to the code being executed.
With the Chrome Developer Tools window open, click on the "Sources" tab. If you don't see anything you may need to click on the "Show Navigator" button in the upper-left corner of that tab. With the navigator open, navigate to the file where the cut() function is defined (in your case it's demo.html). When you bring the file into view, find the line where the cut() function is defined and then set a breakpoint on the first line within that function. You can set a breakpoint by clicking the line number on the left side.
Once you've set your breakpoint(s), do something on the page that would trigger the cut() function and the browser should break script execution as soon as it enters the cut() function (assuming your breakpoint is on the first line within the cut() function). From this point you can use the controls on the top right of the tab to step in/out/around code and see what's going on.
Here's a screenshot of me doing it: http://d.pr/i/f6BO
Also, here's a great video that talks about using the Chrome Dev tools, including setting breakpoints: http://www.youtube.com/watch?v=nOEw9iiopwI
The thing that you are looking for is called 'Profiling'.
It can be achieved by:
Go to Profiles
Choose first option ('Collect JavaScript CPU Profile')
Start it before pressing button 'Cut'
This may be helpful for some people:
You can right click an element on the elements tab and use 'break on' to break on e.g. sub element modification. https://developer.chrome.com/devtools/docs/javascript-debugging

How do I identify if I have a javascript conflict on my website?

I'm currently moving a website from self hosted onto a CMS system. The current site uses a modal popup script called SqueezeBox.js
I've copied the code across exactly how it looks on the current website, however the modal popup box isn't triggering when I click on a thumbnail image.
Looking at the code in the header I've spotted that the CMS I'm using is also calling a number of other javascript files and I'm wondering if one of them is causing a conflict.
What's the best way to find out if this is the case? I've tried Firefox's plugin Web Developer but can't see anything in the Error Console. However I'm not 100% sure I'm using it correctly. Can anyone else point me in the direction of a simple to use javascript conflict detector?
Cheers
Adam
If you have Google Chrome, open up the Developer Tools and you can go into the 'scripts' tab, open up your javascript files and look for the click handler.. click along the side of the code to set a breakpoint, then when the code reaches that spot (if you click it, for example), it will pause, and then in the Developer Tools you can see what functions are being called where as you step through the code. You can also hover over any variable in the code window to see its value. Very handy! You can then see if it's getting into your plugin at all (you can do this as well by setting a breakpoint inside the plugin at a place like the first line that will always be accessed when its run).
I believe you can do the same thing with Firebug
It's a bit of a different thinking process to get into (step into, step over, turning breakpoints on and off etc) but it's extremely useful.
A more simple way of checking where problems are occuring is by adding an alert('im working); or something similar to code you're not sure if it's working. You can also alert a variable to see what the value is at that point. You can also use console command to print it to firebug's console. These are doing things that breakpoints/debugging do for you except with the debugging you don't need to change your code.
If there is a javascript error, then the easies way is using firebug or the Chrome Inspector (right click on the thumbnail and choose "Inspect element"). Open the console tab of either and refresh the page. If there is an error, it will be reported in the console and provide a link to the relevant line.
If there is no error being reported, then the code's logic is preventing the box from being displayed. You'll need to step through the code to find the error. Look at what function is being called from the click handler of the thumbnail image. Go to that function in either tool and place a breakpoint on the first line of the function. Click the thumbnail again and the code will pause on that line. From there you can step through the code and see which code branch is followed. There's likely a sanity check at some point that fails and causes the code to bomb out.

Categories