Mozilla

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.

Updates+Screencast

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.

38 comments

Comments are now closed.

  1. Webstandard Blog wrote on December 23rd, 2011 at 13:28:

    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!

  2. John99 wrote on December 23rd, 2011 at 16:03:

    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.

  3. Chris wrote on December 23rd, 2011 at 17:27:

    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?

  4. chris wrote on December 23rd, 2011 at 17:55:

    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.

  5. Kevin Dangoor wrote on December 23rd, 2011 at 20:44:

    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.

  6. Mika wrote on December 23rd, 2011 at 21:46:

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

    1. Kevin Dangoor wrote on December 23rd, 2011 at 22:28:

      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.

  7. WpCult wrote on December 23rd, 2011 at 22:01:

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

  8. Style Thing wrote on December 23rd, 2011 at 22:46:

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

  9. fpiat wrote on December 24th, 2011 at 00:31:

    WHO NEED ANOTHER FIREBUG?
    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.

    1. Kevin Dangoor wrote on December 24th, 2011 at 18:36:

      With respect to Firebug, I’ll pass along this link, as I’ve written about the subject before: http://blog.mozilla.com/devtools/2011/05/25/the-relationship-between-firebug-and-mozilla-developer-tools/

      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 http://bugzilla.mozilla.org/, 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!

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

    2. StevetotheH wrote on February 23rd, 2012 at 05:12:

      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.

  10. KWierso wrote on December 24th, 2011 at 01:33:

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

  11. Amanjeet Singh wrote on December 27th, 2011 at 04:14:

    wow this 3d view feature is awesome….

  12. mynthon wrote on December 30th, 2011 at 07:29:

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

    1. Kevin Dangoor wrote on January 26th, 2012 at 07:18:

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

      http://www.mozilla.org/en-US/firefox/10.0beta/releasenotes/

      Here is the current official release notes:

      http://www.mozilla.org/en-US/firefox/9.0.1/releasenotes/

  13. Joachim Thomas wrote on December 30th, 2011 at 08:32:

    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)

  14. Mika wrote on January 2nd, 2012 at 09:48:

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

  15. Joachim Thomas wrote on January 6th, 2012 at 12:54:

    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)

    1. Victor Porof wrote on January 9th, 2012 at 12:43:

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

  16. Slimmy wrote on March 13th, 2012 at 12:12:

    Bloooooaaaaaaat.

    1. Kevin Dangoor wrote on March 14th, 2012 at 07:05:

      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.

  17. Richard Cook wrote on March 15th, 2012 at 10:40:

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

    In FF11, if I go to http://www.chromeexperiments.com/detail/cell-cycle/?f=webgl

    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?

    Thanks,
    Rich

    1. Kevin Dangoor wrote on March 15th, 2012 at 11:46:

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

      https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers

      1. Richard Cook wrote on March 15th, 2012 at 13:50:

        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.

        Rich

  18. ErnestV wrote on March 15th, 2012 at 12:12:

    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)

  19. ErnestV wrote on March 15th, 2012 at 12:20:

    Forget it – found the list :)

    1. Percy wrote on March 27th, 2012 at 16:20:

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

      1. Richard Cook wrote on March 27th, 2012 at 16:39:

        http://support.amd.com/us/gpudownload/Pages/index.aspx

  20. faycel wrote on March 15th, 2012 at 14:29:

    wawwwwww the 3d view is magic thanks mozilla

  21. Sti wrote on March 22nd, 2012 at 07:01:

    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!

  22. Percy wrote on March 27th, 2012 at 16:17:

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

    1. Jean-Yves Perrier wrote on March 27th, 2012 at 16:38:

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

  23. Tamixes wrote on April 14th, 2012 at 08:09:

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

  24. Colacino wrote on April 16th, 2012 at 20:23:

    Mozilla Html / CSS / wysiwyg please !!!

  25. DigitalMagick wrote on April 25th, 2012 at 23:59:

    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?

    1. Jean-Yves Perrier wrote on April 26th, 2012 at 14:11:

      You should ask it on the support web site (http://support.mozilla.org ) . 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.

  26. olav wrote on August 28th, 2012 at 02:52:

    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

Comments are closed for this article.