Using Chrome, how to find which of my click events triggers on a click?

Question

I know that I can use the following advice to pause on click:

Using Chrome, how to find to which events are bound to an element

But when I followed this advice I found that after stepping out 20 times I have still not arrived at my source code. I am still navigating various tracking files and jQuery files.

Is there any faster way to to find which of my click events triggers on a click? Perhaps it is possible to skip all files that are not my source code?

Answer 1

You can blackbox libraries or other scripts you don't care about.

This means the debugger will ignore those scripts and "jump" over them.

When stepping through the code with DevTools (the "Sources" tab), right-click the (for example) jQuery line of code which the debugger paused on and choose "Blackbox script"

There's a nice animated GIF here showing you how to do that. https://umaar.com/dev-tips/128-blackboxing/

Works for me in Chrome version 66.0.3359.139 (Official Build)

See also Ignore a script or pattern of scripts from the official DevTools docs.

Answer 2

You can blackbox a script: https://developer.chrome.com/devtools/docs/blackboxing

That requires your jquery to be in a separate file, and not bundled in using something like webpack.

Then, you can do something like add jquery.js (or whatever) to your framework pattern. This will prevent the debugger from stepping into jquery code