CODEWITHSUNDEEP
javascriptdom-eventsfirebugjavascript-debugger
Oscar Fanelli
Oscar Fanelli

Reputation: 3677

Firebug: find Javascript event origin

Is it possible to know what is the Javascript line of code that triggers a specific event on a specific DOM element of a page?

For example, if you go there: http://www.gamempire.it/, what is the line of code that make draggable the logo of the page (class="brand master").

Upvotes: 2

Views: 2514

Answers (2)

mhulse
mhulse

Reputation: 4072

Using Firebug 1.12.6 via FireFox on Vista ...

1) The problem:

problem

When clicking check box, the label hides; inspecting that element with Firebug shows inline styles being applied on click (it's safe to assume that there's a JavaScript, somewhere, applying these styles).

2) Enable Firebug's "Script" panel:

script

... and you may need to refresh your browser.

3) "Enable Break on Mutate":

In the Firebug HTML panel, select the offending/specific DOM element, turn on "Enable Break on Mutate" (orange pause button below the Firebug icon at top right of panel) ...

enter image description here

... and take steps to repeat the problem (in this case, I need to click on the check box).

4) Check the stack tab:

Finally, now that your code has stopped at the break event, click on "Script" section's "Stack" tab ...

enter image description here

... From there, you should be able to track down the origin of the offending JavaScript.

I'm not sure if this is the best way to do this, but, in this one case, it worked for me.

Upvotes: 2

Simon Lindholm
Simon Lindholm

Reputation: 2376

This is how I would debug that, in Firebug, purely through the console:

  • Download Firebug 1.12b1 or later, which has a getEventListeners command line API function (Chrome also has this).

  • Select the element in the HTML panel, to make it available as $0.

  • getEventListeners($0) --> Object { click=[1], mousedown=[1], remove=[1]}

    (Ah, so it has a mousedown listener. Nice.)

  • getEventListeners($0).mousedown[0].listener + "" --> "function (e){return typeof jQuery!==core_strundefined&&(!e||jQuery.event.triggered!==e.type)?jQuery.event.dispatch.apply(eventHandle.elem,arguments):undefined;}"

    (Internal jQuery wrapper. Let's go around that.)

  • $._data($0, 'events') --> Object { remove=[1], mousedown=[1], click=[1]}

  • f = $._data($0, 'events').mousedown[0].handler

  • f + "" --> "function (e){return t._mouseDown(e)}"

    (Hm. t doesn't look to be a global, but we can use Firebug's (very non-standard) closure accessor syntax to work around that.)

  • f.%t._mouseDown + "" --> "function (){var i,s=this._super,a=this._superApply;return this._super=e,this._superApply=t,i=n.apply(this,arguments),this._super=s,this._superApply=a,i}"

  • f.%._mouseDown.%n + "" -> ... some huge pile of code, which finally looks relevant.

At some point it should be possible to stop the process and start setting breakpoints instead, dragging the logo, and then stepping into the relevant code, but this console-only process feels very straight-forward to me, after I've gotten used to it.

In Chrome almost the same method should be applicable, except that the .% syntax would have to be replaced with expanding objects in the console, and clicking on <function scope>. Sadly it is not then possible the play with the functions in the console, but you can still get through to the wanted function to set breakpoints in it. (Side note: Firebug's equivalent to this is opening the objects in the DOM panel, checking the latter's "Show Closures" option, and expanding "(closure)". You can then get back to the console by right-click -> "use in command line", but it's still more clumsy than the alternative, IMO.)

Another method for Chrome is to go to the "Sources" panel, setting an "Event Listener Breakpoint" for "mousedown", clicking the logo, and then stepping into/over until you hit the wanted function (preferably with pretty printing enabled - use the {} icon at the bottom). This might be easier. :)

Or if you actually asked which piece of code added the event listener there: the easiest way is by inspection of the code around the functions we just found. Breakpoints in the libraries' add-event-listener functions would also work.

Upvotes: 6

Related Questions