Menu
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!
479
click on "Tracking Code" in the left menu (under the "Measurables" or "Websites" menu) click on "JavaScript Tracking" section. select the website you want to track. copy and paste the JavaScript tracking code into your pages, just after the opening <body> tag (or within the <head> section)
To view any variable in chrome, go to "Sources", and then "Watch" and add it. If you add the "window" variable here then you can expand it and explore.
Drill down to the file you and double-click to open it in the preview pane: If you look in the lower left corner, you'll see 2 curly brackets. By clicking on this, the minified file expands open to an unminified state.
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!
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
