jQuery event debugging in Chrome

Question

We have a very JS intensive web application, largely based around jQuery's live bindings (indeed we've been making this since prior to jQuery v1.7).

Chrome's built in dev tools are great, however there is one problem that keeps occurring that I always find almost impossible to debug with them: Sometimes my live handlers are not called due to an earlier handler stopping the event bubbling.

Is there any way I can tell Chrome (or indeed Firebug or another extension or bookmarklet (preferably free!)) to break on next event handler outside of the jQuery library's code. This way I could simply click the button and see which event if firing, step through and see when I'm accidentally stopping the propagation?

If not, is there a good reason why not? Can this be done?

Solution 1

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

Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered...

It turns out that there is no standard method provided by the W3C recommended DOM interface to find out what event listeners are attached to a particular node.... As such we are forced to looked at the individual Javascript libraries, which typically maintain a cache of attached events (so they can later be removed and perform other useful abstractions).

Solution 2

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

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

You can't exclude jQuery events though.

BTW you should use delegate instead of live()

Solution 3

In addition to DG response, this is the Chrome Extension of Visual Event. Work perfectly