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. 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.

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.

Update (April 18, 2012): Note that the context menu for rules in the Style Inspector Rules view has been removed from Firefox 13. Expect to see it return in a future Firefox.

About kdangoor

More articles by kdangoor…


  1. Ken Saunders

    Excellent breakdown. Thanks.

    Is word wrap available for the Style Editor?

    March 19th, 2012 at 13:46

    1. Kevin Dangoor

      Word wrap is not available at this time.

      March 20th, 2012 at 03:22

  2. 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.

    March 19th, 2012 at 18:18

  3. Hanif

    Ok now can you fix hardware acceleration in Windows 8 and themes.

    March 20th, 2012 at 01:05

  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 :)

    March 20th, 2012 at 03:45

  5. Andi Smith

    LOL – love the “top secret developments” bit :-)

    March 20th, 2012 at 06:28

  6. Felipe Kautzmann de Mello

    Hey, any date defined for the release one?

    March 20th, 2012 at 06:43

    1. Kevin Dangoor

      Final release is planned for early June.

      March 20th, 2012 at 09:58

  7. 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?

    March 20th, 2012 at 10:02

    1. 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….)

      March 20th, 2012 at 10:16

  8. 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.

    March 22nd, 2012 at 16:20

    1. Kevin Dangoor

      Firebug is partly sponsored by Mozilla. The project leader, Jan (Honza) Odvarko works for Mozilla, full-time on Firebug.

      Ultimately, decisions on how these tools interact is something for the two projects to decide together. Firebug has millions of users, and I personally like the fact that users today have a choice: stick with the familiar interface of Firebug or switch to the new interfaces we’re providing.

      Work that we’re doing is having direct benefits for Firebug already (new APIs that Firebug can use). Over time, we’ll be watching for places where there is overlap that we can reasonably remove.

      March 26th, 2012 at 06:07

  9. CSSGuy

    It would have been cool if there was a way to get only the css modifications done in the live session.

    March 24th, 2012 at 09:46

  10. Torrance

    Will visual displays of margin and paddings be coming to the dev tools? I find this essential during design work.

    March 25th, 2012 at 18:48

    1. Kevin Dangoor

      @Torrance There will be visual displays of margins and padding. There is a bug with a patch already for a layout view that just needs to finish its review cycle. There is another bug to display layout info in the highlighted area.

      Keep watching this space!

      March 26th, 2012 at 06:09

  11. Mehran

    Hi dear Kevin!

    I’m really proud to be a huge Firefox fan, and I wanted to thank all the people who spend their time, keeping Firefox the most enjoyable browser!
    Yet, what about the slim border around forms (like webkit-based browsers)? it’s very helpful, specially when you are trying or drunk! and it’s hard to focus, the browser will do the job! Can you do something about that?

    Thanks in advance

    March 27th, 2012 at 11:00

    1. Kevin Dangoor

      Hi Mehran,

      I’m not personally involved with that part of the browser. I would recommend filing a bug (or getting yourself cc’ed on an existing bug… most feature requests are already in bugzilla :)


      March 28th, 2012 at 07:27

  12. Mehran

    I meant tired :-)

    March 27th, 2012 at 11:01

  13. Ishan Chaitanya

    This seems highly useful. I have a little hard time catching up, but it will come eventually. I love what you do, keep it up.

    May 3rd, 2012 at 02:00

  14. Ramon


    Its possible view model box (where show width, height, border, padding, margin) ilke FireBug.

    June 6th, 2012 at 10:37

    1. Kevin Dangoor

      This is planned for Firefox 15 (which will be the Aurora channel release within the next few days):

      June 6th, 2012 at 10:47

  15. Alex Marino

    The UI of the FF Inspector throws a modal effect which hides the rest of the design except for the element selected. I think that is bad because any changes made to such element needs to be viewed in the context of the rest of the design which is now hidden from view. This is especially troublesome when selecting elements that have box shadows and/or border radius. You cannot see the drop shadows or border radius clearly or non at all!

    Would also be nice to have a color picker.

    June 8th, 2012 at 09:36

    1. Kevin Dangoor

      Firefox 15, which just entered the Aurora test phase, allows you to turn off the dimming of the page. Check it out (or wait a few weeks and it will be the release version).

      I agree that a color picker would be nice. We don’t have it yet, but we plan for it.

      June 10th, 2012 at 19:20

      1. Alex Marino

        Awesome! – looking forward to the color picker. :)

        June 11th, 2012 at 06:47

      2. Alex Marino

        It would also be nice to have the option to turn on/off the dashed border of the selected element.

        June 14th, 2012 at 08:02

        1. Kevin Dangoor

          I guess I can see how that’s useful, but then it would be hard to tell which element you have selected!

          I would recommend filing a bug on this:

          June 14th, 2012 at 08:29

  16. Alex Marino

    Bug submitted.

    I agree that it would be hard to tell which element is selected. But since I could toggle the dotted line, I could always find out. I also have a secondary confirmation of what is selected with the popup offered in the UI.

    June 14th, 2012 at 08:49

    1. Kevin Dangoor

      Thanks for filing the bug!

      I agree that it’s still possible to figure out what’s selected… and if you’re trying to style the border, it would be a lot more convenient if the tool wasn’t getting in the way.

      June 14th, 2012 at 08:55

Comments are closed for this article.