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?
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.
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
Short answer, you can blackbox jQuery files. This will ensure that the debugger doesn't enter the jQuery code.
What happens when you blackbox a script?
- Exceptions thrown from library code will not pause (if Pause on exceptions is enabled),
- Stepping into/out/over bypasses the library code,
- Event listener breakpoints don't break in library code,
- The debugger will not pause on any breakpoints set in library code.
The end result is you are debugging your application code instead of third party resources.
From: https://developer.chrome.com/devtools/docs/blackboxing
