Latest 'Aurora' Release Tricks Out Firefox Developer Tools

Coming versions of Firefox will allow web developers to edit web pages directly in the browser; just type and the page changes. The live HTML editing and other improvements to the built-in developer tools are available now in the Firefox Aurora preview channel.
Image may contain File Webpage Display Screen Electronics and Monitor
Live HTML editing in Firefox 17. Image: Screenshot/Webmonkey.

Firefox 17 recently graduated into Mozilla's Aurora development channel, which offers a chance to preview new Firefox features before they're ready for prime time. The latest Aurora release brings with it more improvements to the built-in web developer tools.

If you'd like to experiment with the new developer tools in the Aurora channel, grab a copy from Mozilla.

Mozilla has been working hard on Firefox's developer tools over the last several Firefox releases. There are some promising new features in the current Firefox beta and Firefox 17 will add several more, including live HTML editing.

Just as the Style panel of the Page Inspector in current releases allows you to manipulate the styles on the page, the coming Markup panel will let you tweak the DOM in real time. The client wants to re-write the homepage copy? No problem, just start typing. Live previews mean you can quickly prototype ideas without diving into your actual HTML templates or even opening a text editor and starting the save-and-refresh dance.

The Page Inspector has also been updated in this release so that visually selecting items on the page no longer draws a dark "veil" over everything else. The dark background was an unusual design choice back when the developer tools first launched, which, as we noted, is roughly the visual opposite of every other browser's developer tools.

There's been an option to turn off that dimming for some time, but when Aurora hits the final release stage in a couple of months the dimming will be gone for good. Instead highlighted elements will be outlined with a dashed line and the "node toolbar".

Mozilla's Kevin Dangoor explains the change:

We found that the appearance of the dark “veil” over everything but the selected element was striking, but also making it harder for designers to see styling changes they made in the context of their overall design.

...

Instead of darkening the whole page, we highlight the selected element using a subtle dashed line and the useful node toolbar. Even better, when you move your cursor to the Style panel to try out style changes, the highlighting fades away entirely so that you can focus entirely on the styling.

For more details on other changes for developers, including the revamped Web Console and the smarter debugger coming in Firefox 17, check out Dangoor's full post over on the Mozilla hacks blog.