Hands up all those using Firebug. Of course you are. It’d be madness not to. Despite using Firebug almost every day for 5 years, I’m still finding new features and widgets. Here’s one you may have missed…
When inspecting links, Firebug shows the default CSS state, i.e. styles applied to a:link. By default, the :hover and :active styles are not shown. Fortunately, you can change the state of the link by clicking Style and choosing the appropriate option:
The CSS for the :hover and/or :active states will magically appear in the console.
The feature is incredibly useful — especially if you’re debugging complex CSS drop-down menus or other effects. Currently, Firebug is the only developer console to support it, although the feature has been added to nightly builds of the webkit inspector. It’ll eventually appear in Chrome and Safari.
Opera’s Dragonfly console is slightly different. If you inspect an element using the right-click menu option, it will have :hover or :focus set accordingly and the CSS styles are displayed. However, navigating the DOM tree will not set the state.
As far as I’m aware, the feature is not available in IE’s Developer Tools — unless anyone knows otherwise?
Do you have any other useful developer console hints?
