Menu
I'm trying to debug a web page that makes heavy use of events, and so I need to monitor all events that are fired.
Most of the events are bound using jQuery. Hence, it would be particularly useful if there was a way to specifically monitor only those events.
832
Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element. If the event will fire, then you will get a breakpoint in the debugger.
Right-click on the search icon button and choose “inspect” to open the Chrome developer tools. Once the dev tools are open, switch to the “Event Listeners” tab and you will see all the event listeners bound to the element. You can expand any event listener by clicking the right-pointing arrowhead.
Right-click on the search icon button and choose “inspect” to open Firefox developer tools. The “search icon” button DOM node will be automatically highlighted in the Firefox “Inspector” tab. Click on the word “event” on the highlighted DOM node to see all the events bound to the element.
Of course you can do just fine with Firebug, the console and the scripts tab where you can add breakpoints and watches, but you want to do it smarter / easier obviously.
There is a neat Firebug plugin called EventBug that just logs all the events and groups them by event type so you can expand and see what triggered them.
EventBug doesn't do it realtime, you have to refresh though.
One other way is to use the 'Log Events' feature against any DOM element in Firebug. This does do it realtime and you can see what order events are fired / triggered as well.
Try this:
<body> Log Events from the context menuClosed (manually)This is what you see with Log Events:
Also worth trying the FireQuery add-on for Firebug to see what elements in the DOM have jQuery events attached to them and what they are.
And as benvie's answer mentions, this is possible in webkit's developer tools as well.
124
This has been introduced some versions ago but as of Firefox 35 events associated with an element can be seen on the Inspector: next to the element which you want to see the events (in case there is any) there will be an icon with the 'EV' letters. Click it and you will see a small popup window with the events for that element.
More info: http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
