Six new developer features in Firefox Aurora

Installing Firefox Aurora

In order to test the features, I needed to download and install Firefox Aurora. So I clicked the Firefox Aurora Free Download button, and then clicked the executable file firefox-27.0a2.en-US.win32.installer-stub.exe.

Image credit: Ryan Boudreaux

Aurora Setup dialog box

I unchecked the selection to Make Aurora My Default Browser and then clicked the Options button, which resulted in the Aurora Setup dialog box. I made sure the default browser selection was still unchecked and also unchecked the selection to create a shortcut on my desktop. Then I clicked the Install button.

Image credit: Ryan Boudreaux

Aurora downloading and installing

It took a few minutes to get the download onto my PC (I have Time Warner Cable Turbo at 21M download speed). You may receive a notification from your antivirus software about an unknown file after you execute the installation file; this is mainly due to the newness of the file, but also due to the fact that it's a pre-beta version, so it has little history at this point.

Image credit: Ryan Boudreaux

About Aurora

Once the download and installation is complete, you are immediately taken to the Aurora browser and the About Aurora box.

Image credit: Ryan Boudreaux

Aurora icon on your quick launch bar

During the installation, if you select the checkbox to add a shortcut to your quick launch bar, you'll see the Aurora globe icon as displayed on the far right in this image.

Image credit: Ryan Boudreaux

Test driving the new tools

To use the new Firefox Developer Tools, right-click anywhere on the screen in Aurora and then click Inspect Element (Q).

Image credit: Ryan Boudreaux

Firefox Developer Tools panel

The Developer Tools panel opens defaulted to the Inspector tab at the bottom of the screen.

Image credit: Ryan Boudreaux

JavaScript Debugger: Break on DOM events

According to the JavaScript Debugger, the new tool allows you to automatically break a variety of DOM events without having to preset any breakpoints. Follow these steps to use the JavaScript Debugger:

1. Click the Debugger tab from the Developer Tools panel.

2. Click the Expand Panes button, which is to the right of the search text box.

3. Click the Events tab. You can click any event to pause it the next time it occurs.  

Image credit: Ryan Boudreaux

Inspector Tool: HTML Editor

By default, the Developer Tool opens to the Inspector tab. From there, you can make edits to the HTML by right-clicking any element and then selecting the Edit As HTML option.

Image credit: Ryan Boudreaux

Edit the HTML

And then the content box opens where you can edit the HTML.

Image credit: Ryan Boudreaux

Select the Inspector tab's default color unit format

Select default color format and color swatch previews

You now have the option to select the default color unit format for the Inspector tab. The selection options are in the Toolbox Options, and can be opened by clicking the cog button at the far left of the Developer Tools panel.

Image credit: Ryan Boudreaux

Color unit options

The color selector unit options are Hex, HSL(A), RGB(A), and Color Names.

Image credit: Ryan Boudreaux

Color swatch previews

Color swatch previews are now available from the Rules pane on the right side and show colors from selected elements within the Inspector pane, where the "content" includes the rule for a 2px border with a solid #000 and a background with a color of #333.

Image credit: Ryan Boudreaux

CodeMirror

The popular and versatile HTML5-based text editor CodeMirror is implemented in JavaScript for the browser and is now the component editor used in Firefox Developer Tools. It is in the Style Editor, Debugger, Inspector as the Edit As HTML option described above and in Scratchpad. From the Options settings, you can select from two Dev Tool Themes: Light or Dark.

Image credit: Ryan Boudreaux

Light Theme example

This figure is an example of the Light Theme with the Style Editor pane open within the Developer Tools pane.

Image credit: Ryan Boudreaux

WebConsole: Reflow Logging

From the Developer Tools panel, click the Console tab, select the CSS menu, and then click the Log menu item.

Image credit: Ryan Boudreaux

The log is on

With the log on, every time a reflow occurs on the active and inspected web page, a log will be printed with the name of the JavaScript function that triggered the recorded reflow.

Image credit: Ryan Boudreaux