New Developer Tools in Firefox 11 Aurora

More Goodies for the Holidays!

Last month, I wrote a post for Hacks introducing the new tools in Firefox 10 Aurora. Those features have now moved to beta. Thanks for all of the great feedback so far!

In a dramatic turn at the end of that blog post, I foreshadowed that we had “more to come”. And, indeed here I am to tell you about the new developer tools features now in Firefox Aurora. What you see here is slated for final release in March, 2012.

Free-form Style Sheet Editing

In the last Firefox release, we introduced the Style Inspector. You can use the Style Inspector’s rules view to make changes to the CSS properties for an element. With this release, we’re adding a free-form Style Editor to the mix.

Select the Style Editor from the Web Developer menu, and you’re presented with a view that lists the style sheets for the page in one pane, and gives you an editor to make changes in another:

The Style Editor provides a friendly environment for working on your style sheets. Any changes you make are reflected instantly on the page. Once you’ve made your changes, you can save the file on your computer.

There are also a number of handy additional features. Click on the “eye” icon next to the style sheet and you can toggle the entire sheet on and off. If you’re working on a new page, you can create new style sheets on the fly or load a style sheet from disk.

If you want to take a look at how other sites on the web are styled, you can use the Style Editor to view the style sheets on any site. On public sites, the style sheets are often minified to reduce download time. The Style Editor will automatically prettify style sheets that it detects have been minified, but it will leave your source style sheets alone.

“Tilt” 3D View of Web Page Structure

Open up the Page Inspector (Web Developer->Inspect from the menu, or Inspect Element in the context menu on the page), and you’ll see a new 3D button on the toolbar if your computer is compatible with WebGL. Click that, and you’re presented with a whole new perspective on web page structure.

This 3D view (which was previously available in an add-on called Tilt), stacks elements as they are nested in the DOM and lets you see elements that are hidden or off the page. You can zoom in and out, rotate and pan the view to see the page from any angle that is helpful to you.

The 3D view is fully integrated with the rest of the Page Inspector functionality. You can open the HTML view or the Style Inspector for more information about the element you’ve clicked on in the 3D view. You can also change selected elements using the breadcrumbs on the toolbar.

The controls for the 3D view are easy:

Function Mouse Keyboard
Zoom Scroll up/down + and -
Rotate Click and drag a/d and w/s
Pan right-click and drag Arrow keys

Dozens of Other Improvements

Since the last release, we’ve landed dozens of refinements to our other developer features. A growing number of contributors are making the tools they use better by getting involved.

The Web Console, Scratchpad and Style Inspector have all had improvements since the last Firefox. Take a look, and let us know what you think!

Get it Now!

You don’t need to wait until March to get these great new features. Download Firefox Aurora today and see these and other improvements that are coming to final release soon.


Since I wrote this article, we’ve landed some fixes and improvements to these tools. I added the way to pan the Page Inspector 3D view (right-click and drag). Also, there is now a screencast for these features. Be sure to opt-in to YouTube’s HTML5 video option.

About kdangoor

More articles by kdangoor…


  1. Webstandard Blog

    Wow, sounds great and it seems that mozilla is “striking back” against webkit. Good news and merry x-mas to all the mozillas out there!

    December 23rd, 2011 at 13:28

  2. John99

    This looks very interesting as a way of visualising the page structure. At present my Firefox 11.0.a2 & 12.0a1 using the Inspect option only appears to have the HTML button and Style button.

    December 23rd, 2011 at 16:03

  3. Chris

    Loving the 3D tilt addon been made standard now, so much easier to know whats going on behind the scenes, the only problem i am having is all the shortcuts keys don’t work for me.

    Can anyone else replicate this?

    December 23rd, 2011 at 17:27

  4. chris

    trying to use new 3D inspector.

    um, there’s no new 3D button on the inspector toolbar. am i missing something?

    i’m running Aurora 11.0a2 (2011-12-22). Update check says its up to date.

    December 23rd, 2011 at 17:55

  5. Kevin Dangoor

    To those who don’t see the “3D” button in the page inspector, sorry! I forgot to mention in the original post (now updated) that the 3D button is only visible on computers/OSes that are WebGL compatible.

    December 23rd, 2011 at 20:44

  6. Mika

    Hey Guys, we need a fast core and not every addon/plugin implemented in the core.

    December 23rd, 2011 at 21:46

    1. Kevin Dangoor

      We certainly want a fast Firefox as well, and we have tests to verify that our tools aren’t slowing things down (that’s one of the infrastructure benefits we get by having things in the “core”).

      We’re definitely going to leave lots of room for additional functionality to live in addons.

      December 23rd, 2011 at 22:28

  7. WpCult

    This is a great tool love the way you can tilt and visulize the page very good stuff.

    December 23rd, 2011 at 22:01

  8. Style Thing

    Kevin Dangoor,
    can you just make the button disabled when I don’t have required hardware

    December 23rd, 2011 at 22:46

  9. fpiat

    Netscape died from all the other products added to the browser. It seems Mozilla is taking the same path.
    I wonder if the Moz’s boys know that there is an old and absolutely wonderful add-on named Firebug. Without Firebug, Firefox never get the popularity he has now.
    Question 1: why Mozilla doesn’t help Firebug to become better and better instead of spending time making concurrent functionnalities?
    Question 2: why Mozilla spend time and money reinventing the wheel with editors and other sexy (but without real interest) stuff instead of implementing completed HTML5 spec (forms for example).
    It seems that the voices that are not in the choir of the evangelists are completely suppressed and we have nothing to say against the Word of God. Amen and merry Xmas.

    December 24th, 2011 at 00:31

    1. Kevin Dangoor

      With respect to Firebug, I’ll pass along this link, as I’ve written about the subject before:

      There are other people working on the HTML5 forms features, and I do believe these are being worked on. I’m sure if you search, you’ll find the bugs for the particular features that are of interest to you.

      Finally, we’re just out to make some great software. Voices are not being suppressed and no one I know claims to have the Word of God. If you want to contribute to the conversation or help make better tools for web developers, sign up on the dev-apps-firefox mailing list and get involved!

      p.s. I can think of a number of other reasons that probably contributed more to Netscape’s decline. Adding tools for web developers certainly had nothing to do with it.

      December 24th, 2011 at 18:36

    2. StevetotheH

      I think that before you compare Firefox to Netscape you should learn to “form” a proper sentence. Netscape lost its edge because it STOPPED innovating not in spite of innovation. I think that if you pay attention to what is going on around you, you’d see that each release is better than the last. Without Firefox there would be no Firebug not vise versa.
      Firebug is great but if Firefox does the same thing native then it’s 1,000 times better. It’s almost like Firefox is composed of contributions from ten’s of thousands of people who use Firefox and its add-ons and then give feed back.

      February 23rd, 2012 at 05:12

  10. KWierso

    Heh. Tilt works on the browser’s chrome:// URL…

    December 24th, 2011 at 01:33

  11. Amanjeet Singh

    wow this 3d view feature is awesome….

    December 27th, 2011 at 04:14

  12. mynthon

    This one bothers me: where can i find changelog (or detailed release notes) for every firefox release?

    December 30th, 2011 at 07:29

    1. Kevin Dangoor

      I’m not sure if there’s a single page listing all release notes, but release notes are found at URLs like this:

      Here is the current official release notes:

      January 26th, 2012 at 07:18

  13. Joachim Thomas

    Also on my FF11 Aurora nothing appears.. my system should be “webgl enabled”, other demos are working (and also in about:config i seems set all to “true”) but nothing visible here (11.0a2 2011-12-29 installed)

    December 30th, 2011 at 08:32

  14. Mika

    You have to “Inspect an Element (Q)” and then a bar appears at the bottom. The button is on the right side.

    January 2nd, 2012 at 09:48

  15. Joachim Thomas

    thanks for the suggestion..

    I tried with Shift+Ctrl+I (on a win7/64 system).. usually other webgl demos work without problems.. but with the inspector active I see only the “HTML” and “Style” buttons…

    any hints if there’s something more to set in about:config ? (as far as I know, it seems all is set “on” there)

    January 6th, 2012 at 12:54

    1. Victor Porof

      Try setting devtools.tilt.force-enable to true.

      January 9th, 2012 at 12:43

  16. Slimmy


    March 13th, 2012 at 12:12

    1. Kevin Dangoor

      Though your comment could be considered trolling, I’ll bite. It depends on what you mean by “bloat”. If you mean that the size of the Firefox download is marginally larger, you’re correct. But adding a little bit to the download size is not a big deal for most people.

      Memory use and performance are both things that we test for and the Firefox developer tools are designed to have minimal impact on every day web browsing. They also perform well when you activate them.

      We also didn’t bloat the user interface in adding these features and are working hard to ensure that the UI for our tools scales up well.

      So, you may make a claim of “bloat”, but that’s a simplistic claim to make. If there’s some *actual* problem, we can talk about that, but I don’t believe there is.

      March 14th, 2012 at 07:05

  17. Richard Cook

    I can not use the 3D feature, there is no button. I’m running on Windows 7, FF11.

    In FF11, if I go to

    and launch the demo, it says webgl is not supported.

    If I launch Chrome, and go to the same url, I can successfully run the demo.

    Why is FF11 reporting that correctly know that my OS supports webgl?


    March 15th, 2012 at 10:40

    1. Kevin Dangoor

      We have identified problems with certain graphics drivers. There’s more information here:

      March 15th, 2012 at 11:46

      1. Richard Cook

        Ah. On the Dell website, the latest ATI driver for my laptop was < than version 8.741.0.0. I had to go the ATI website and download the latest reference driver. I now see the 3D button. Thanks for the help.


        March 15th, 2012 at 13:50

  18. ErnestV

    Is there a compatibility list for WebGL, i.e. what are the hardware requirements to be compatible with WebGL?
    I just installed FFox 11 but I don’t have the 3D option (Win7, Sony Vaio)

    March 15th, 2012 at 12:12

  19. ErnestV

    Forget it – found the list :)

    March 15th, 2012 at 12:20

    1. Percy

      Where did you find it? I have the same problem on my Sony Vaio, Win7 too

      March 27th, 2012 at 16:20

      1. Richard Cook

        March 27th, 2012 at 16:39

  20. faycel

    wawwwwww the 3d view is magic thanks mozilla

    March 15th, 2012 at 14:29

  21. Sti

    I think this 3d view feature could optionally be incorporated into html5 reading apps, thus enabling realistic page handling, instead of gimmick js effects with the page’s corner, etc.
    In order to fully appreciate that possibility, try reading the current article and comment list with dev tools’ 3d view enabled and the text’s head slightly inclined towards the back, like when reading a real book – see the difference?
    To me at least, it’s huge!

    March 22nd, 2012 at 07:01

  22. Percy

    Why I can’t see the 3d button on Page Inspector?

    March 27th, 2012 at 16:17

    1. Jean-Yves Perrier

      Have you checked that your graphic card supports WebGL? It is required for that tool.

      March 27th, 2012 at 16:38

  23. Tamixes

    Loving the ease of use – but is there a legend regarding colors it uses with the 3D view?

    April 14th, 2012 at 08:09

  24. Colacino

    Mozilla Html / CSS / wysiwyg please !!!

    April 16th, 2012 at 20:23

  25. DigitalMagick

    Ok, My computer supports WebGL just fine, as an identical laptop with identical drivers installed from the same imaging disk. Once updated to Firefox 12 the moment it was released as an update, the other was only updated 15 minutes ago. The one updated a short while ago has the 3D button and it works very nicely. The one from 15 minutes ago has no 3D button. So blaming this on blocked video drivers, or WebGL requirements is bunk. When can we expect an honest answer?

    April 25th, 2012 at 23:59

    1. Jean-Yves Perrier

      You should ask it on the support web site ( ) . They will be able to ask you the precise questions and the precise values in about:support to be able to diagnose your problem.

      All what we can do is guesswork, which is not very useful.

      April 26th, 2012 at 14:11

  26. olav

    For anyone with “missing 3D view” problems, here’s what helped me:
    go to URL about:config
    type in “webgl” in the search bar, find “webgl.force-enabled”, double-click on it, setting the value TRUE

    August 28th, 2012 at 02:52

Comments are closed for this article.