getfirebug.com has Firebug 2.0 beta 6
Firebug 2.0b6 fixes 6 issues
Firebug 2.0b6 is compatible with Firefox 30-32
Beta releases are also uploaded on AMO.
Let’s see what is new in this release!
DOM Events Inspector
EventBug extension doesn’t support Firebug 2 and you should uninstall it if using this version of Firebug.
Events Side panel
The previous screenshot demonstrates a situation where a
<button> element is selected and we can see that two listeners are registered for it: onclick and onmousemove. Name of the handler (in green) is a link that navigates you directly at the right line in the Script panel where you can inspect the JS code.
There is also a section Other listeners for: Window that shows one handler for load event. There is no way to select the window object itself in the HTML panel and so this section is visible all the time (in case any listeners are actually available).
You can also disable an existing event listener (the same way a CSS properties can be disabled in the CSS panel).
The Events panel displays also event handlers for all targets (parent elements) used when event bubbles.
Imagine the following scenario:
<div id="div1" onclick="onClickDiv1()">
<div id="div2" onclick="onClickDiv2()">
<div id="div3" onclick="onClickDiv3()">Click Me!</div>
If the user clicks on
div3 element the event will bubble up through the parent elements.
If you select
div3 element in the HTML panel the Events side panel shows shows all three listeners (coming from the event targets chain).
- The top section shows onclick for
div3 (the selected element)
- There are other two sections showing listeners for
Event Handlers Names
Name of the event handler displayed in the Events panel depends on the way how the event is registered. If it’s an inline event (created within an HTML attribute) the name always corresponds to the attribute (event type) since generated automatically by the browser. If you use
addEventListener, the name will correspond to the function passed in.
See an example:
Wrapped Event Handlers
Some JS libraries (e.g. jQuery) are wrapping the original function into another function. This happens for all registered event handlers, and so searching for the original function might be hard since the link offered in the Events panel always points to the wrapper function coming from particular JS library. But don’t worry, Firebug solves this problem by showing even the original wrapped function.
Please post feedback in the newsgroup, thanks.
Jan ‘Honza’ Odvarko