Debugging jQuery event in Chrome

Question

We have a very intensive JS web application, mainly based on jQuery live bindings (indeed, we have been doing this since before jQuery v1.7).

Chrome's built-in Chrome tools are great, but there is one problem that continues to arise that I always find it almost impossible to debug with them: Sometimes my live handlers are not called due to an earlier handler that stops the bubbling event .

Is it possible to tell Chrome (or perhaps Firebug or another extension or bookmarklet (preferably for free!)) To break in the next event handler outside the jQuery library code . Thus, I could just press a button and see what event, if I shoot, step over and see when I accidentally stop the spread?

If not, is there a good reason why not? It can be done?

Answer 1

You may find this useful: http://www.sprymedia.co.uk/article/Visual+Event+2

A Javascript shortcut called Visual Event that visually shows the elements on the page that have events, events, and the function that the event will fire when it starts ...

It turns out that there is no standard method provided by the W3C-recommended DOM interface to find out which event listeners are connected to a specific node .... Thus, we are forced to look at individual Javascript libraries that usually support the attached event cache (therefore, you can delete them later and perform other useful abstractions).

Answer 2

In Chrome DevTools, you can set a breakpoint by event type:

https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#listeners

You cannot exclude jQuery events.

By the way, you should use delegate instead of live ()

Answer 3

In addition to DG's answer, this is a Chrome Extension for Visual Event. Work great