Firebug: Watching Events

We have mentioned before how much we love Firebug, the Firefox extension for developers that lets you view, edit, and debug HTML, CSS, and JavaScript. Erik mentioned earlier here that the author of Firebug, Joe Hewitt, gave a presentation at Yahoo! and that you can watch or download the video of that presentation. I finally got a chance to watch that video a couple of weeks ago and I had to share with you something I learnt about one feature of Firebug many of us have used in the past and that seemed to have disappeared at some point: the ability to watch events going to particular elements on the page. There used to be an "Events" tab, but that tab is no more. Now instead, you need to go to the HTML tab, locate the element you are interested in, right click on it, and choose Log Events. From that point, Firebug logs all the events dispatched to the element in the Console tab. For instance, set Firebug to log events for an input field. Then type a key in that field. You will see the following sequence of events dispatched to the input field: keydown, keypress, and keyup. Then from the console, click on one of those events and Firebug will take you to the DOM tab, where you can see all the properties of that event. Neat, isn't it?