Subscribe to RSS Feed

We have made a great further progress with John J. Barton on a new extension for Firebug called Eventbug. Big thanks to Olli Pettay (smaug) for fixing #448602 + #506961 and providing new Firefox APIs that allow enumerating event listeners on a web page!

Notice that these APIs are available in Firefox 3.7a1pre (I hope they'll make it into 3.6) and you also need Firebug 1.5 to test it.

Update: all necessary APIs for Eventbug have been backported to Firefox 3.6b3pre.

This extension brings a new Events panel that lists all of the event handlers on the page grouped by event type. 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.

So, see it in action!

Event Panel

The screenshot below shows content of the Events panel and three side panels (click the image to see the original size).

Eventbug Panel

Side panels are synchronized according to the selected listener in the main content area.

  • Targets Shows list of event targets that would be used as DOMEvent.currentTarget when event bubbles. All targets are clickable and navigate the user to the HTML panel.
  • Script Shows source code of the selected listener.
  • HTML Shows HTML code of the element that is associated with the selected listener.

HTML Panel

The extension also registers a new Events side-panel within the HTML panel.

In this case the Events side panel shows all registered event listeners for the selected HTML element.

Recommended Configuration

Firefox 3.7a1pre
Firebug 1.5b1
Eventbug 0.1a2

Known Issues

Eventbug is still in alpha phase and there are some known issues.

  • The panel is not updated if listeners are dynamically appended or removed upon user actions. You have to manually click the Refresh button (in the toolbar). This will be fixed as soon as #524674 is fixed (thanks Smaug! 🙂 )
  • If a listener is defined using a HTML attribute (e.g. click="alert('hello world!')" ) the source code is not compiled till the listener is actually executed (Firefox optimization). Eventbug UI doesn't reflect this and it can happen that link to a listener's source code doesn't work. The link should be disabled if the script object is not available.
  • The Script side panel doesn't yet allow to create breakpoint's.

And of course, as usual, if you have any ideas how to improve this feature let us know. If you found a bug, please report it.

Thanks!


Rss Commenti

28 Comments

  1. [...] Software is hard | Eventbug (alpha) Released. [...]

    #1 ~robcee/ – Eventbug (alpha) Released
  2. [...] Software is hard | Eventbug (alpha) Released http://www.softwareishard.com/blog/firebug/eventbug-alpha-released – view page – cached More musings on software development — From the page [...]

    #2 Twitter Trackbacks for Software is hard | Eventbug (alpha) Released [softwareishard.com] on Topsy.com
  3. This is unbelievable! you guys are so great!
    I've been waiting for some thing like this for years, and finally you give us such a great solution!
    Thank you!

    #3 SLY
  4. Great work, this will be very useful.

    #4 Ryan
  5. [...] Eventbug (alfa) Liberado Esta es una traducción de un post realizado por Jan "Honza" Odvarko, uno de los desarrolladores principales de Firebug y padre del panel de Red. El artículo original se encuentra aquí. [...]

    #5 Eventbug (alfa) Liberado « Notas de un Peregrino
  6. [...] Tweets about this great post on TwittLink.com [...]

    #6 TwittLink - Your headlines on Twitter
  7. [...] posted here: Software is hard | Eventbug (alpha) Released By admin | category: Software!!!? | tags: eventbug, from-the-page, released, the-page | [...]

    #7 Software is hard | Eventbug (alpha) Released Software Rss
  8. [...] Honza has screen shots and more details in his blog post. [...]

    #8 Getfirebug Blog » Blog Archive » Event Listener View for Firebug
  9. [...] post: Software is hard | Eventbug (alpha) Released Share and [...]

    #9 Software is hard | Eventbug (alpha) Released | www.kotihost.com
  10. [...] more here: Software is hard | Eventbug (alpha) Released Share and [...]

    #10 Software is hard | Eventbug (alpha) Released | www.kotihost.com
  11. I've been waiting for this for a long time. Luckily I've not been doing much serious JS in the meantime!

    Please please please push the powers that be to get it into Firefox 3.6 - a beta of which is apparently now out. Did the necessary Firefox tweaks make it into beta 1? If not do they have any chance of getting into beta 2?

    #11 pd
  12. Awesome! At least it's out finally.

    #12 jayarjo
  13. Link to Firebug 1.5b1 under "Recommended Configuration" seems to be broken.

    #13 jayarjo
  14. hey,the Firebug 1.5b1's URL is broken

    #14 popomore
  15. @popomore: fixed, thanks!

    #15 Honza
  16. @pd: We are pushing on the backport to 3.6 and you can also help, see: http://blog.getfirebug.com/2009/10/30/event-listener-view-for-firebug/
    Thanks!

    #16 Honza
  17. [...] Eventbug (alpha) Released – New firebug extension to help in debugging event-related issues. [...]

    #17 Double Shot #574 « A Fresh Cup
  18. [...] cant wait that long, check out this article about Firefox 3.7 and the new event view in Firebug. http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/ [...]

    #18 JS Event Debugging | Thoughts, Codes and Games
  19. [...] Software is hard | Eventbug (alpha) Releasedsoftwareishard.com [...]

    #19 Software is hard | Eventbug (alpha) Released « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
  20. cool!

    #20 reeze
  21. couldn't be better...

    #21 z.Yleo77
  22. [...] Eventbug (alpha) Released [...]

    #22 網站製作學習誌 » [Web] 連結分享
  23. Thanks for this great extension. One thing which would be nice is the ability to log events into the console.

    #23 Richard Eichhorn
  24. Notice that Firebug already supports this. Just right click on an element (you want to watch) and pick "Log Events". All events for the element will be displayed in the Console panel. There is no way how to filter these events yet, see: http://code.google.com/p/fbug/issues/detail?id=229
    Honza

    #24 Honza
  25. About time a useful event browser was made! Been waiting around for this. Thanks for contributing Honza. I hope development continues and we can see Eventbug being mainstream soon.

    #25 Sam
  26. Is it possible to highlight or blink the events when they are triggered?

    #26 Voxen
  27. @Voxen: sounds like a good idea! Please report a new bug report here http://code.google.com/p/fbug/issues/list (I'll mark it as an enhancement request). Thanks!

    #27 Honza
  28. I'm having a hard time figuring out whether (or where) Eventbug displays the name of the function that is executed when the event occurs. For instance, if I have an "onclick" event listener that executes the function showAll(), where does Eventbug show me that showAll() is the name of the function that executes?

    #28 Shaun G

Sorry, the comment form is closed at this time.