While users of the Firefox release channel are just now getting to enjoy the Style Editor and the Page Inspector 3D (Tilt), we have a number of nice developer tools improvements that we’ve shipped to the Aurora channel for Firefox 13. Aurora users are up to 12 weeks ahead of the release channel.

Page Inspector

Styling CSS menus and other elements that are styled with the :hover, :active and :focus pseudo-classes has gotten much easier. You now have the ability to lock in a pseudo-class for the selected page element in the Page Inspector. I have made a 1 minute video to show this feature in action.

Right-click on the page element “infobar” for the selected element to toggle the pseudo-class lock. When you have selected an element in the Page Inspector, the infobar is the hovering box that has the tag name, element ID and classes. We are planning to add a convenient menu for this feature, but you can use pseudo-class locking today with a simple right-click.

When you reopen the Page Inspector, the HTML panel and Style sidebar will reopen as well, if you had them open when you last used Page Inspector. This saves you from having to press ctrl-H and ctrl-S to reopen them. If you’re wondering about those keyboard shortcuts, you can find those and other useful tips on the MDN page for the Page Inspector.

When using the Page Inspector 3D view, you can press the “f” key to bring an element back into view (focus it). Hint: if you don’t see the 3D button in the Page Inspector, you might have a blocklisted graphics driver. A simple driver update may be all you need.

The element context menu in the HTML panel now offers some handy actions.

Style Inspector

The Style Inspector sidebar of the Page Inspector has had a number of useful upgrades.

You can now select and copy a rule out of the Rules view. To make things even quicker and easier, you can copy a rule or part of a rule from the context menu. Update: due to some bugs found during Aurora, the context menu shown to the right has been backed out. You can still copy rules out of the rules view by selecting the text of the rule.

In the Computed view, the links to the CSS files now go to the Style Editor rather than View Source. This can make some workflows quicker (see the video in the Style Editor section below).

Invalid entries in the rules view are now marked with a warning sign. The tooltip can give you further information about the problem.