debugging - Javascript execution tracking in Chrome - how?

Question

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 1

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!