Javascript execution tracking in Chrome - how?

javascript debugging google-chrome google-chrome-devtools
Pave picture Pave · Feb 3, 2012 · Viewed 74.9k times · Source

I have ~ 100-200 javascript functions loaded on a web-site. I want to determine what javascript function is executed when i click one item or another in Google Chrome. How can i do it with Chrome Web Developer Tools? Thanks!

Answer

Alexander Pavlov picture Alexander Pavlov · Feb 3, 2012

One simple approach is to start Chrome Developer Tools, switch to the Sources panel and hit F8 (Pause Execution). This will break on the first executed JavaScript statement.

Another approach is to set an event listener breakpoint for mousedown or click: in the same Sources panel, expand the "Event Listener Breakpoints" in the righthand sidebar. Expand the "Mouse" item and check the events you want to break on (e.g. "click", "mousedown"). Then go click in your page and see the JS execution break in the DevTools. Enjoy!

Related questions

How do you launch the JavaScript debugger in Google Chrome?

When using Google Chrome, I want to debug some JavaScript code. How can I do that?

Read More
Chrome developer tools do not show all JavaScript files any more

Not all JavaScript files are visible in Chorme Developer tools any more. Google Chrome is up to date. Version 44.0.2403.130 m Debug version of the app. Scripts in the head. <script src="/Scripts/jquery-ui-1.8.24.js"></script> <…

Read More
Chrome debugging - break on next click event

We have a button. Click events are handled by a 3rd party framework, however, the framework is buggy somehow. We want to debug the framework, however, we don't know where the corresponding event handler code resides to set a breakpoint. …

Read More