By
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