How to debug JavaScript jQuery event bindings with Firebug or similar tools

Question

I need to debug a web application that uses jQuery to do some fairly complex and messy DOM manipulation  At one point  some of the events that were bound to particular elements  are not fired and simply stop working   If I had a capability to edit the application source  I would drill down and add a bunch of Firebug console log   statements and comment uncomment pieces of code to try to pinpoint the problem  But let s assume I cannot edit the application code and need to work entirely in Firefox using Firebug or similar tools   Firebug is very good at letting me navigate and manipulate the DOM  So far  though  I have not been able to figure out how to do event debugging with Firebug  Specifically  I just want to see a list of event handlers bound to a particular element at a given time  using Firebug JavaScript breakpoints to trace the changes   But either Firebug does not have the capability to see bound events  or I m too dumb to find it   -   Any recommendations or ideas  Ideally  I would just like to see and edit events bound to elements  similarly to how I can edit DOM today

User · Answer

ev icon next to elements  Within the Firefox Developer Tools  Inspector panel lists all events bound to an element   First select an element with Ctrl   Shift   C  e g  Stack Overflow s upvote arrow   Click on the ev icon to the right of the element  and a dialogue opens     Click on the pause sign    symbol for the event you want  and this opens the debugger on the line of the handler   You can now place a breakpoint there as usual in the debugger  by clicking on the left margin of the line   This is mentioned at  https   developer mozilla org en-US docs Tools Page Inspector How to Examine event listeners  Unfortunately  I couldn t find a way for this to play nicely with prettyfication  it just seems to open at the minified line  How to beautify Javascript and CSS in Firefox   Firebug   Tested on Firefox 42

User · Answer

Firebug 2 does now incorporate DOM events debugging   inspection

User · Answer

Use    data htmlElement   events   in jquery 1 7    ex      data document   events   or    data     class name   get 0    events

User · Answer

See How to find event listeners on a DOM node   In a nutshell  assuming at some point an event handler is attached to your element  eg       foo   click function     console log  clicked         You inspect it like so    jQuery 1 3 x  var clickEvents       foo   data  events   click  jQuery each clickEvents  function key  value      console log value     prints  function     console log  clicked           jQuery 1 4 x  var clickEvents       foo   data  events   click  jQuery each clickEvents  function key  handlerObj      console log handlerObj handler     prints  function     console log  clicked             See jQuery fn data  where jQuery stores your handler internally     jQuery 1 8 x  var clickEvents      data     foo   0    events   click  jQuery each clickEvents  function key  handlerObj      console log handlerObj handler     prints  function     console log  clicked

User · Answer

You could use FireQuery  It shows any events attached to DOM elements in the Firebug s HTML tab  It also shows any data attached to the elements through   data

User · Answer

With version 2 0 Firebug introduced an Events panel  which lists all events for the element currently selected within the HTML panel     It can also display event listeners wrapped into jQuery event bindings in case the option Show Wrapped Listeners is checked  which you can reach via the Events panel s options menu   With that panel the workflow to debug an event handler is as follows    Select the element with the event listener you want to debug Inside the Events side panel right-click the function under the related event and choose Set Breakpoint Trigger the event      The script execution will stop at the first line of the event handler function and you can step debug it

User · Answer

There s a nice bookmarklet called Visual Event that can show you all the events attached to an element  It has color-coded highlights for different types of events  mouse  keyboard  etc    When you hover over them  it shows the body of the event handler  how it was attached  and the file line number  on WebKit and Opera   You can also trigger the event manually   It can t find every event because there s no standard way to look up what event handlers are attached to an element  but it works with popular libraries like jQuery  Prototype  MooTools  YUI  etc

User · Answer

Here s a plugin which can list all event handlers for any given element event     fn listHandlers   function events  outputFunction        return this each function i           var elem   this              dEvents     this  data  events            if   dEvents   return             each dEvents  function name  handler               if  new RegExp         events                  events replace          replace   on i               i    test name                      each handler  function i handler                      outputFunction elem    n    i           name            handler                                                             Use it like this      List all onclick handlers of all anchor elements     a   listHandlers  onclick   console info       List all handlers for all events of all elements         listHandlers      console info       Write a custom output function      whatever   listHandlers  click  function element data          body   prepend   lt br   gt     element nodeName       lt br   gt  lt pre gt     data     lt   pre gt           Src   my blog  -  http   james padolsey com javascript debug-jquery-events-with-listhandlers

User · Answer

According to this thread  there is no way in Firebug to view what events are attached to listeners on a DOM element   It looks like the best you can do is either what tj111 suggests  or you could right-click the element in the HTML viewer  and click  Log Events  so you can see which events are firing for a particular DOM element   I suppose one could do that to see what events could be firing off particular functions

User · Answer

I also found jQuery Debugger in the chrome store  You can click on a dom item and it will show all events bound to it along with the callback function  I was debugging an application where events weren t being removed properly and this helped me track it down in minutes  Obviously this is for chrome though  not firefox

User · Answer

jQuery stores events in the following      a somefoo   data  events     Doing a console log    a somefoo   data  events    should list the events attached to that element

User · Answer

As a colleague suggested  console log   alert   var clickEvents       foo   data  events   click  jQuery each clickEvents  function key  value        console log value

User · Answer

The WebKit Developer Console  found in Chrome  Safari  etc   lets you view attached events for elements   More detail in this Stack Overflow question

User · Answer

Using DevTools in the latest Chrome  v29  I find these two tips very helpful for debugging events    Listing jQuery events of the last selected DOM element  Inspect an element on the page type the following in the console          data  0   events     assuming jQuery 1 7    It will list all jQuery event objects associated with it  expand the interested event  right-click on the function of the  handler  property and choose  Show function definition   It will open the file containing the specified function      Utilizing the monitorEvents   command

User · Answer

Looks like FireBug crew is working on an EventBug extension  It will add another panel to FireBug - Events     The events panel will list all of the event handlers on the page grouped by event type  For each event type you can open up to see the elements the listeners are bound to and summary of the function source   EventBug Rising  Although they cannot say right now when it will be released

[javascript] How to debug JavaScript / jQuery event bindings with Firebug or similar tools?

Examples related to javascript

Examples related to jquery

Examples related to event-handling

Examples related to firebug

Examples related to jquery-events