Firebug Tip: Log DOM Events

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.

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

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.