Mozilla’s been working on a set of developer tools for Firefox. They decided to switch from Firebug and explore new ideas of creating developer tools. There are a lot of new interesting concepts and there are lot of things that will make these tools unique and different from Firebug. Here’s a quick overview of the current state of the dev tools:
The inspector in these developer tools works a little differently from other widely-used source inspectors. When an element is selected for inspection, a small toolbar shows up on the bottom of the browser window. The toolbar has the breadcrumb path to the element and a few control buttons. Currently you have to use the control buttons to view the HTML source or edit the CSS style. The “HTML” button gives you the source view of the page, just like other browser tools. “Style” shows you the CSS style editor.
The style editor resides in the right-hand side of the browser window. The editor is really similar to Chrome Dev tools and Firebug. Currently Mozilla is exploring new ways of making the style editor easier to use and more efficient. The “Properties” tab gives you the final computed style list of the CSS.
The 3D DOM view is an amazing WebGL demo, you can activate it using the inspector by hitting the “3D” button. This tool allows you to see your DOM in 3D — you can fly around in 3D around your page. Right now there’s no clear purpose to this, but some developers already find it useful for inspecting nested elements on the page. The camera can be controlled with your mouse or arrow + WASD keys.
Try out the latest version of Firefox developer tools by downloading the latest Nightly build.