Discovery JavaScript execution path and files in Browser Developer Tools - javascript

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

Related

How would you stop a page from refreshing automatically?

I have a problem when I am trying to check the source of an interesting page which keeps refreshing automatically every 3-5 seconds (presumably due to some js script) which resets my Inspect Element Inspector window every time the page is refreshed.
Is there any other way other to stop that page from refreshing or perhaps the Inspector window from resetting itself other than turning on NoScript to stop the page from refreshing automatically?
Usually I just open DevTools, switch to the appropriate panel if necessary, and hit pause.
Opening DevTools: Via menus, or by press F12, Ctrl+Shift+I, or Cmd+Shift+I depending on browser and OS.
Switching panels: Pick the panel from the tabs at the top of DevTools. It'll be called "Debugger" (Firefox, IE) or "Sources" (Chrome) or similar.
Pausing: In the Debugger/Sources panel, click the pause button (usually looks like the pause button on a television remote control, ||) or press the keyboard equivalent. Keyboard equivalents are
Firefox & Chrome: F8
IE: Ctrl+Shift+B
(Updated 2020-03-30)
In Firefox 74 this option is in Options -> Privacy & Security -> Permissions
(Original reply)
Firefox has the option to prevent refresh natively, the option is in Advanced->General->Warn me when websites try to redirect or reload the page
The most popular solution for this problem is to trap the beforeunload event. The browser will ask the user for confirmation to leave the page. The code, in its simplest form, looks like this:
window.onbeforeunload = function() { return true }
You can enter this code in console. Alternately, you can simply paste the following URL in the browser address bar (console not required). You can even bookmark it.
javascript:window.onbeforeunload = function() { return true }
Be advised that modern browsers might chop off the javascript: part when you paste it inside the address bar; make sure you type it back.
To determine the cause of redirect in Firefox, try the following:
Open Web Developer Tools (CTRL + SHIFT + I), open "Toolbox Options" and check the "Enable persistent logs" option. This makes the logs persist across page loads (logs are cleared otherwise).
Now switch to "Network Monitor" tab.
Open the URL and let it refresh.
Inside the Network Monitor > Cause column you will find out why the page reloads.
The cause column is pretty ambiguous (Chrome does a much better job). However, if JavaScript was used to trigger page (re)load then it at least shows you the filename and line number of that script.
When the page is still loading, you can press the Esc key. While the page is still white, press it. When you stop the page from loading at this point, this usually stops all the auto loaded javascript. Any scripts that run on actions are usually not effected. Each page is different, try different timings.
When I use a site called NovelUpdates there is javascript that can make certain elements hidden, and when I press Esc on page load all the elements that would be hidden after page load are visible. Then when I click a button that would execute javascript that operates with no problems. NoScript isn't going to solve your issue I believe.
Another example of this are those websites with annoying boxes that pop out after 10 seconds that says you aren't a member and can't view any more of this site without logging in, like some news article websites.
What you could do is use the command exit(), which is the equivalent to die in php and simply stops the script.
If you don't know what's causing it and you don't want to look for the "bad boy", then you might as well stop the entire script at the very bottom of the page.

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.

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?
"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.

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

chrome's alternative for firebug's evaluation console?

I'm using chrome for a new website, and I'm doing some javascript debugging.
One of my favorite techniques to debug nested expressions is to put a breakpoint, enter an expression in firebug's input panel in the console tab and press run.
But I don't see this feature in chrome. I'm probably overlooking something. Is it there? And where can I find it.
You can do it right from this page: Hit CTRL+SHIFT+J, click the Sources tab, choose chromes-alternative-for-firebug-evaluation-console from the file drop down on the left, click on line 41 to create a break point. Now refresh the page and your breakpoint will stop the debugger.
Ctrl + Shift + I will open Chrome's Developer's Tools. Or (Chrome v9): Options -> Tools -> Developer Tools. Ctrl + Shift + J is a keyboard shortcut for the Javascript console.
Under the Scripts tab, you can click on the line number to set a breakpoint.
You can also try right clicking on the page and choosing "Inspect Element" which should open the developer tools for you. Then you can click the Scripts tab like Harmen said.

Categories