Firefox Aurora 13 Developer Tools Updates

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.

Context menu on nodes in the HTML panel

Style Inspector

Context menu for the CSS rules view

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.

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.

Invalid CSS in the rules view

Rules applied as the result of a media query will be shown with the media query.

A rule with an associated media query

Style Editor and Scratchpad

The Style Editor now saves CSS files loaded via file:// URLs without prompting. This makes the workflow for experimenting with CSS very quick. This feature actually ships in Firefox 12. It was added during the Firefox 12 Aurora cycle and wasn’t in the original notes posted here.

See the 1 minute video below to get an idea of how smooth this is.

There were a couple of notable changes to the editor code that is shared by both Scratchpad and the Style Editor. Theme add-ons can now change the editor styles and you can select a whole line of code by clicking on the line number in the gutter of the editor.

Our top secret developments

I hope you enjoy these updates. I wish I could tell you more about what’s in coming releases, but no one knows when they’ll land or has any idea what could possibly be in them. In fact, only a select few can see unfinished features and we try to ensure that our secret cabal remains impenetrable.

It’s just how we roll.

View full post on Mozilla Hacks – the Web developer blog

11 thoughts on “Firefox Aurora 13 Developer Tools Updates

  1. Joshua Ellinger

    Are there any plans to have this work with firebug? Where firebug would be an addon to the default inspector tools? There seems to be a lot of overlap here, but it is not clear why.

    I thought firebug is at least partially sponsored by Mozilla.

  2. Kevin Dangoor

    The Error Console should really go away. It’s old code and not useful to anyone who isn’t working on add-ons.

    The Web Console and Scratchpad are quite different in feel. Yes, they can both run JavaScript (and you can even do multi-line JS in Web Console by pressing shift-enter), but I don’t think they’re too confusing at this stage. I also think they’re likely to diverge further over time. (Imagine things that might happen if you merge Scratchpad with the forthcoming debugger, or maybe did some kind of mashup between Scratchpad and the Style Editor….)

  3. alexleduc

    I find overlapping functionality in the following tools to be a bit confusing. Scratchpad, Web Console and Error Console all seem to offer Javascript statement evaluation. From a usability point of view, shouldn’t these things be merged?

  4. Kevin Dangoor

    That would be a nice feature. We don’t have that yet, because we interrogate the CSS system for the styles and it throws out other vendor prefixed properties.

    Do feel free to file a bug. (I will do it sometime in the next few days if you don’t 🙂

  5. Anon

    Any chance of having the style inspector show vendor-prefixed rules for other browsers? Chrome does this, but no one else does as far as I can tell.

Leave a Reply