Mozilla

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.

28 comments

Comments are now closed.

  1. Ken Saunders wrote on March 19th, 2012 at 13:46:

    Excellent breakdown. Thanks.

    Is word wrap available for the Style Editor?

    1. Kevin Dangoor wrote on March 20th, 2012 at 03:22:

      Word wrap is not available at this time.

  2. Anon wrote on March 19th, 2012 at 18:18:

    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.

  3. Hanif wrote on March 20th, 2012 at 01:05:

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

  4. Kevin Dangoor wrote on March 20th, 2012 at 03:45:

    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. Andi Smith wrote on March 20th, 2012 at 06:28:

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

  6. Felipe Kautzmann de Mello wrote on March 20th, 2012 at 06:43:

    Hey, any date defined for the release one?

    1. Kevin Dangoor wrote on March 20th, 2012 at 09:58:

      Final release is planned for early June.

  7. alexleduc wrote on March 20th, 2012 at 10:02:

    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?

    1. Kevin Dangoor wrote on March 20th, 2012 at 10:16:

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

  8. Joshua Ellinger wrote on March 22nd, 2012 at 16:20:

    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.

    1. Kevin Dangoor wrote on March 26th, 2012 at 06:07:

      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.

  9. CSSGuy wrote on March 24th, 2012 at 09:46:

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

  10. Torrance wrote on March 25th, 2012 at 18:48:

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

    1. Kevin Dangoor wrote on March 26th, 2012 at 06:09:

      @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!

  11. Mehran wrote on March 27th, 2012 at 11:00:

    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
    Mehran

    1. Kevin Dangoor wrote on March 28th, 2012 at 07:27:

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

      https://bugzilla.mozilla.org/

      Kevin

  12. Mehran wrote on March 27th, 2012 at 11:01:

    I meant tired :-)

  13. Ishan Chaitanya wrote on May 3rd, 2012 at 02:00:

    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.

  14. Ramon wrote on June 6th, 2012 at 10:37:

    Hi,

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

    1. Kevin Dangoor wrote on June 6th, 2012 at 10:47:

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

      http://paulrouget.com/e/devtoolsupdate/

  15. Alex Marino wrote on June 8th, 2012 at 09:36:

    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.

    1. Kevin Dangoor wrote on June 10th, 2012 at 19:20:

      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.

      1. Alex Marino wrote on June 11th, 2012 at 06:47:

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

      2. Alex Marino wrote on June 14th, 2012 at 08:02:

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

        1. Kevin Dangoor wrote on June 14th, 2012 at 08:29:

          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:

          https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools

  16. Alex Marino wrote on June 14th, 2012 at 08:49:

    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.

    1. Kevin Dangoor wrote on June 14th, 2012 at 08:55:

      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.

Comments are closed for this article.