CODEWITHSUNDEEP
google-chrome-devtools
niksrb
niksrb

Reputation: 459

Event listener breakpoints in Google Chrome Devtools

Event listener breakpoints in Google Chrome Devtools offers various number of options, but for me, they are not really of great use since they always throw me to some irrelevant part of code.

What I would like to know is if it is possible to limit it to just one class? For example onMouseClick send me to the 1st method that executes after mouse click, inside specific class. If none of the methods are fired inside this class, than simply do nothing.

Upvotes: 3

Views: 1294

Answers (1)

David
David

Reputation: 6084

You can set the breakpoints for each script and each line individually. First open the debug-tools and chose a script in the sources-tab:

enter image description here

Then you can click on the line-number (here only no. 1) and it looks like this:

enter image description here

As you see now is the line marked, but also in the right col your individual breakpoint is listed.

After having marked the breakpoint you still have to reload the page that the scripts are executed again till to the breakpoint. Afterwards you can use the icons above the right col to step in or step over the commands following the breakpoint.

Having minified scripts, breakpoints are hard to use, so it's better to have a script where each line has only one command, it's much easier then to debug. So for debugging you should change the corresponding script in your page to the non-minified version, perhaps also with a map-file if available.

Upvotes: 1

Related Questions