Firefox Aurora is the pre-Beta build of Firefox and is now available for download from the Firefox Aurora release channel. The free download includes new features for the Firefox
Developer Tools. Firefox implemented these new tools based on
comments from web developers and possibly in an attempt to offer an alternative
to Google web developer tools.

I’ll review most of the new
features that were covered in the Mozilla Hacks Firefox Developer Tools article Edit as HTML, Codemirror & more: JavaScript Debugger tool, edit as HTML, select default color unit format, color swatch previews, CodeMirror, and WebConsole Reflow Logging. 

Note: This content is also available in gallery format.

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 (Figure A).

Figure A

I unchecked the selection to Make
Aurora My Default Browser and then clicked the Options button (Figure A), which
resulted in the Aurora Setup dialog box (Figure B). 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.

Figure B

It took a few minutes to get the download onto
my PC (I have Time Warner Cable Turbo at 21M download speed) (Figure C). 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.

Figure C

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

Figure D

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 Figure E.

Figure E

Test driving some of the new tools

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

Figure F

The Developer Tools panel opens defaulted to the Inspector tab at the
bottom of the screen (Figure G).

Figure G

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 (Figure H):

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.  

Figure H

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 (Figure I).

Figure I

And then the content box opens where you can edit the HTML (Figure J).

Figure J

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 (Figure K).

Figure K

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

Figure L

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

Figure M

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 (Figure N).

Figure N

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

Figure O

WebConsole: Reflow Logging

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

Figure P

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 (Figure Q).

Figure Q

Summary

The new features in Firefox Developer Tools found in the pre-Beta release
of Aurora are a good testing ground for future releases of the Firefox browser. It shows that Mozilla is listening to the web developer community and
responding with great results.

What, if any, Firefox Developer Tools do you use in your day-to-day web
development? Also, if you checked out Aurora, share your impressions of the release in the discussion.