~robcee/ more than just sandwiches

4 January 2012 @ 12pm

devtools, Firefox, Mozilla

Firefox 11 Devtools Additions

With the Page Inspector landed for Firefox 10 (currently in Beta), we’re adding to it with a couple of exciting new features for Firefox 11 (now on Aurora).

The first of these features is somewhat complementary to the Page Inspector and lives in its own window. The Style Editor is the hard work of Cedric Vivier and is a unique tool for editing CSS in the Web Browser. You can edit styles in a web page and immediately see the results. When you have something you like, you can save the CSS to disk and incorporate the changes on your website.

To access it, use Shift-F7.

It would be grossly unfair to not thank Paul Rouget, Dão Gottwald and Stephen Horlander for their great work reskinning the Style Editor for this release. Paul did a fantastic job on the styling while Dão kept the reviews flowing, none of which would have been possible without Stephen’s brilliant colors and design tweaks.

Another major feature we’ve landed in Firefox 11 is Tilt – a 3D View of the page’s DOM. Last year around this time, I suggested this as a possible alternative to the standard highlighter view most inspectors give developers. That became a Google Summer of Code project implemented by the more-than-capable Victor Porof who later managed the port to Firefox itself with reviews from Cedric Vivier and Benoit Jacob.

We have yet to see what kind of impact this sort of visualization has for developers, but I think as more people get used to having it, it’s going to become an invaluable tool for acquiring a high-level overview of the structure of a web-page and eventually, become a useful playground for manipulating and interacting with the structure of the page itself.

I’m really interested to see what people can do with this. We’re already seeing some strange and interesting applications of it on the web, but I think having a 3D library capable of rendering these types of meshes in Firefox itself is going to be an interesting area for exploration.

Happy 2012!


Posted by
4 January 2012 @ 1pm

On 11.0a2 (2011-12-30), the Style Editor seems to only load half of the stylesheet. For instance on this page the stylesheet is cut off at line 84. When you make a change, it applies the modified stylesheet and so you lose half of the page’s styles. I’m not sure what are the conditions to reproduce this bug since it appears systematically on some pages, and appeared first on some pages but not the second time I tried.

Posted by
4 January 2012 @ 2pm

that’s a known bug. Thanks!