The latest Firefox adds a very good looking web inspector

Feb 1, 2012 11:41 GMT  ·  By

Mozilla started working on a set of built-in developer tools not long ago. Since then, it's been making considerable progress and, with Firefox 10, the tools are now pretty useful.

Firefox 10 debuts a very snazzy looking but also very useful Web Inspector which enables developers to find out more about a page but also to make on-the-fly edits and changes and see the results instantly.

Page and style inspector

"Firefox adds a number of new built-in developer tools that let developers change the look and feel of websites in real-time," Mozilla explained.

The web inspector is split into two parts, the Page Inspector enables users to dig into the HTML source of a web page, while the Style Inspector enables developers to view and modify the CSS properties of the page.

"With Page Inspector, developers can peek into a page’s structure and layout without having to leave Firefox. This means they can quickly navigate between page elements and view the HTML document structure for the page," Mozilla wrote.

"Style Inspector makes editing the style of websites even easier. Now developers have quick access to CSS properties and can view or change values for their website within Firefox," it said.

In practice, the web inspector works significantly better than similar tools in Chrome or other browsers, if only because the selected element is much better highlighted.

Scratchpad with syntax highlight thanks to the Orion code editor

Another change in Firefox 10 that affects developers in particular is the upgraded Scratchpad. It is now based on the Eclipse Orion editor adding advanced features such as syntax highlighting, better indentation and other

Scratchpad was introduced in August last year, but the latest update makes it a lot more useful. For example, changes made in Scratchpad now survive a browser restart, so you're not going to lose anything if the browser closes unexpectedly.