Development Blog

Firebug 2.0 beta 6

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

This release integrates the existing EventBug extension and introduces a new Events side panel. This side panel is available in the HTML panel and lists all of the event handlers on the page grouped by event type for the currently selected DOM element. The panel also nicely integrates with other Firebug panels and allows to quickly find out, which HTML element is associated with specific event listener or see the JavaScript source code (issue 5440).

 

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).

Online example

 

You can also disable an existing event listener (the same way a CSS properties can be disabled in the CSS panel).

 

Event Targets

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>
  </div>
</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 div2 and div1 elements

Online example

 

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:
 

Online 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.

 

Online example

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Comments are closed.