Subscribe to RSS Feed

Firebug Tip: Log DOM Events

by Honza

Updated: how to use this feature from the command line

This Firebug feature is called simply Log Events and allows developers to log DOM events into the Console panel.

All you need to do is right click on an element in the HTML panel, pick Log Events from the context menu and switch to the Console panel to see the logs in action.

See all Firebug tips

Logs in the Console Panel

If you activate logging e.g. for the body element and move your mouse cursor over the page, you should immediately see mouse related events in the Console panel.

Learn & Discover Events

This feature can be also used to learn & discover existing events. Let's try to log events for an input element.

Test input element (install Firebug and check it out right now):

The sequence of events displayed on the screenshot above corresponds to the following actions:

  1. focus: tab key pressed to set focus on the input
  2. select
  3. keyup: tab key released (keyCode=9)
  4. keydown: a key pressed (keyCode=65)
  5. keypress a character pressed (charCode=97)
  6. input Value of the input field has been changed
  7. keyup: a key released (keyCode=65)
  8. keydown: tab key pressed (keyCode=9)
  9. keypress (yet for the tab key pressed)
  10. change
  11. blur: Focus lost
  12. keyup: tab key released (keyCode=9)

Check out DOM event reference

Event Details

Inspecting the event object (associated with an event) is also possible. Just click on the green event label and Firebug automatically selects the DOM tab with event details.

Command Line

Event logging for an element can be also activated through Firebug Command Line. There are two related commands.

  • monitorEvents(object[, types])
  • unmonitorEvents(object[, types])

Let's see some examples.

Instead of right clicking on the body element to activate/deactivate the logging (see the first screenshot) you can type and execute following expressions into the command line. All events, just like before, will be logged in the Console panel.

monitorEvents(document.body);
unmonitorEvents(document.body);

If you want to log only specific events and avoid e.g. mousemove events check out the next example.

var myInput = document.getElementById("myInput");
monitorEvents(myInput, ["keyup", "keydown", "keypress"]);

This way, only keyup, keydown and keypress events will be logged into the Console panel for the test input box available above (in the Learn & Discover Events section). You can open Firebug on this page and check it out immediately.

See also Firebug wiki for monitorEvents and unmonitorEvents API.

 


If you have any tips how to improve this feature let us know.

Rss Commenti

33 Comments

  1. Honza, you should also mention monitorEvents()/unmonitorEvents(), which give more granular control over event logging.

    Sebastian

    #1 Sebastian Z.

  2. Can you play back these events for automated testing type scenarios?

    #2 DDD

  3. @Sebastian Z.: yep good point.

    #3 Honza

  4. @DDD: Not now, but sounds like a good idea. Perhaps new Firebug extension could implement that?

    #4 Honza

  5. [...] logs (see more about DOM event logging) are automatically linked with the target (issue [...]

    #5 Getfirebug Blog » Blog Archive » Firebug 1.11 alpha 1

  6. How can I enable event logging as soon as the document starts loading? I'm interested in logging all events sent to the "window.document" object right from the start, including any readystatechange and the DOMContentLoaded event.

    #6 Sergiu Dumitriu

  7. @Sergiu Dumitriu: Good point, I don't think it's currently possible, please create a new issue report http://code.google.com/p/fbug/issues/list

    Honza

    #7 Honza

  8. @Sergiu: I just did that report so, it isn't forgotten. http://code.google.com/p/fbug/issues/detail?id=5861

    Honza

    #8 Honza

  9. Thanks Jan, I've starred the issue.

    #9 Sergiu Dumitriu

  10. Hello, I love reading through your blog, I wanted to leave a little comment to support you and wish you a good continuation. Wishing you the best of luck for all your blogging efforts.

    #10 Cheap Club Dresses

  11. I must say that you are pretty good at blogging and you must need to carry on with this all the time. Keep it up.

    #11 http://www.genesishealthinstitute.com/andropause.php

  12. Firebug is the awesome tool for developer and code hacker because mostly we are in trouble while adding code in source file and sometime code doesn't properly work then firebug will help you out.

    #12 iPhone Application Developer

  13. Pretty good post. I just stumbled upon your blog and wanted to say that i have really enjoyed reading your blog posts.

    #13 click here

  14. It is a pretty good post. This post contains useful information which helps us a lot. I visit your website often and share with my friends.

    #14 check path

  15. There's a lot to understand about media rss 1.5. We were able to provide you with some of the facts above but there is still plenty more to write about in subsequent articles.

    #15 click here

  16. speachless efforts done in this blog i wish to see some more intresting posts in future.

    #16 online angry birds

  17. This is a very informative, impressive and creative post. It really helped me a lot. Thanks for sharing.

    #17 Adele bags

  18. this addons is useful for me, there's more bugs i can find... impressive and creative...

    #18 Cheap RS Gold

  19. The write-up is extremely good, like, you are extremely superb also it was seriously superb. convert pdf to epub for mac

    #19 http://www.vitiligonatural.com/

  20. is rather easy to see from the other comments as well that this post is well

    #20 bizznus

  21. Most notable of all is timberland boots sales devotion to customer and industry education. Whether through public facility reports, labels outlining the impact of specific products, or national conferences held to educate the retail community, cheap Timberland sale is committed to sharing their initiatives with consumers and competitors alike.

    #21 timberland classic boots

  22. Keep up the good works guys it is highly recommended indeed for all to visit.

    #22 hospiceadvantage

  23. I do think that software is hard to produce. And I appreciate you work very much.

    #23 cheap jerseys sale

  24. labels outlining the impact of specific products, or national conferences held to educate the retail

    #24 tipcosmetic

  25. This is why you need to carry out apt research before purchasing your wholesale wedding flowers.

    #25 hotelchainsuk

  26. Full-service Starbucks (hours vary from store), books, music, electronics, DVDs, a deli, a bakery, natural foods, and a full-service

    #26 Jeniffer

  27. A jacket is an outerwear garment that is lighter Canada Goose Yorkville Bomber in weight than a coat. Jackets are typically hip-length or shorter, and coats may reach to the mid-thigh or longer. Canada Goose Kensington Parka Although many jackets are unisex in construction, a few have features in their design that can make them seem more masculine or feminine. Does this Canada Goose Uk Spark an idea?

    #27 Canada Goose Borden Bomber

  28. Very intresting post I like ur website keep it up..!

    #28 EA Cricket 2012

  29. I have get a lot of useful information and fresh knowledge in your website.

    #29 rolex daydate ii replica

  30. Can you play back these events for automated testing type scenarios?

    #30 automobile insurance for students

  31. I found lots of interesting information here. The post was professionally written and I feel like the author has extensive knowledge in this subject.

    #31 minister collar suit

  32. Your work is deserved to be appreciated hard working efforts done in your blog.

    #32 Download Angry Birds Space Full Version For Free

  33. I’m impressed with your views on this matter and I agree with a lot of your ideas.

    #33 BattleField 3

Leave a comment