As a web designer and developer who spends his day developing and troubleshooting web designs in ASP.NET Web Pages, ASP.NET MVC, and Orchard CMS, I really appreciate the  web developer tools being integrated into the various browsers. In Firefox 11, Mozilla continues to push the envelope with a new style editor and 3D DOM Viewer. This is in addition to the really nice inspector and JavaScript Scratchpad introduced in the previous version of Firefox.

Firefox 11 Style Editor

The new style editor in Firefox 11 is your playground for doing live editing of CSS changes on your web pages. Got a problem with the CSS in your newly developed Orchard, Umbraco, or Drupal website? Open the page in Firefox 11 and display the inspector and style editor. Pinpoint those troublesome areas using the inspector and then make live changes to the CSS as displayed in the style editor. Once you found the correct CSS change go ahead and save the CSS using the style editor, too. Amazing the quality of tools you can now find just in the browser.

Firefox 11 Style Editor to design Orchard Umbraco or Drupal website

Firefox 11 3D DOM Viewer

I am not exactly sure how to use the new 3D DOM Viewer to my web development advantage yet, but man is it really cool to see your web page's DOM in 3D. This only works if you are WebGL capable. Next to the HTML Button on the Inspector will be a 3D Button. Press that and with the movement of your mouse you can start to see your web page DOM in 3D. Good fun!

Firefox 11 3D DOM View to help develop Orchard Umbraco or Drupal website

JavaScript Scratchpad

This isn't new to Firefox 11, but I wanted to mention it anyway because I use it a lot. Make sure you check out Scratchpad in Firefox for testing JavaScript and jQuery code against the active tab in Firefox. You can execute, load, and save code snippets using Scratchpad which is great for developing JavaScript and jQuery functionality right in the context of the web page for which it will run!

Firefox 11 JavaScript Scratchpad to help develop Orchard Umbraco or Drupal websites


Obviously the web developer tools in Firefox, Chrome, and Safari are getting better and better, but make sure you take a peek at the new web developer tools in Firefox 11 as I think you will find them very useful for both developing and debugging websites. The new Style Editor in Firefox 11 seems quite useful and I already use the JavaScript and jQuery Scratchpad quite a bit.