14 DAY TRIAL // The Firefox 10 Beta brings a decent set of new features for end users, but it's also bringing a lot of new features aimed at developers, from new capabilities to dedicated tools.
The star of the show has to be the new web inspector tool. It enables developers to quickly analyze a web page with the visual tool. It comes especially useful for CSS.
But there's more to it, there is anti-aliasing for WebGL, CSS3 3D Transforms, the new Full Screen API for video and games as well as much better Scratchpad thanks to the integration of the Orion Code Editor.
The page and style inspector
The web inspector introduced in Firefox 10 has two main tools, the page inspector and the style inspector. The first enables you to check out the HTML source of a page and see which elements relate to which piece of code.
"Developers can see the HTML and CSS rules applied to any selected page element. This makes it easy to navigate through different page elements while viewing the HTML document structure for the page," explains Mozilla.
The same goes for the style inspector which lists the different CSS properties applied to the page and enables developers to modify any of them for instant feedback on what the changes would look like.
Scratchpad with syntax highlighting and other improvements
The Scratchpad feature, introduced last summer, is getting an update. Thanks to the integration of the Orion code editor, the Scratchpad now supports features such as syntax highlighting, better indentation and other regular features that a code editor should have.
The Scratchpad provides a simple way of writing and testing small JavaScript snippets, with more flexibility than the web console allows. WebGL anti-aliasing, CSS3 3D-Transforms and IndexedDB
Firefox 10 comes with new capabilities, not just new developer tools. For example, WebGL graphics can now be anti-aliased resulting in much smoother looking elements. While games will benefit from the less jagged looks, UI elements and animations have the most to gain.
The latest Firefox Beta introduces support for CSS3 3D-Transforms, which enable developers to create very interesting animations using CSS3 alone.
Other improvements and new features include a new Full Screen API, especially useful for games and video, as well as a better implementation of the IndexedDB specifications.