Skip to content

TechRepublic

  • Top Products Lists
  • Developer
  • 5G
  • Security
  • Cloud
  • Artificial Intelligence
  • Tech & Work
  • Mobility
  • Big Data
  • Innovation
  • Cheat Sheets
  • TechRepublic Academy
  • CES
  • TechRepublic Premium
  • Top Products Lists
  • Developer
  • 5G
  • Security
  • Cloud
  • Artificial Intelligence
  • Tech & Work
  • Mobility
  • Big Data
  • Innovation
  • Cheat Sheets
  • TechRepublic Academy
  • CES
  • See All Topics
  • Sponsored
  • Newsletters
  • Forums
  • Resource Library
TechRepublic Premium
Join / Sign In
Developer

Six new developer features in Firefox Aurora

By Ryan Boudreaux140 November 26, 2013, 2:51 PM PST

Image
1
of 18

FirefoxAuroraDevToolshero.jpg
FirefoxAuroraDevToolshero.jpg
Six new developer features in Firefox Aurora

Firefox Aurora

Image credit: Ryan Boudreaux

Firefox Aurora

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 gallery is also published as the article, Firefox Aurora’s new features show Mozilla listens to developers.

Image credit: Ryan Boudreaux
FirefoxAuroraDevTools_FigA_112213.gif
FirefoxAuroraDevTools_FigA_112213.gif
Six new developer features in Firefox Aurora

Installing 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.

FirefoxAuroraDevTools_FigB_112213.gif
FirefoxAuroraDevTools_FigB_112213.gif
Six new developer features in Firefox Aurora

Aurora Setup dialog box

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.

FirefoxAuroraDevTools_FigC_112213.gif
FirefoxAuroraDevTools_FigC_112213.gif
Six new developer features in Firefox Aurora

Aurora downloading and installing

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.

FirefoxAuroraDevTools_FigD_112213.gif
FirefoxAuroraDevTools_FigD_112213.gif
Six new developer features in Firefox Aurora

About Aurora

About Aurora

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

FirefoxAuroraDevTools_FigE_112213.gif
FirefoxAuroraDevTools_FigE_112213.gif
Six new developer features in Firefox Aurora

Aurora icon on your quick launch bar

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.

FirefoxAuroraDevTools_FigF_112213.gif
FirefoxAuroraDevTools_FigF_112213.gif
Six new developer features in Firefox Aurora

Test driving the new tools

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).

FirefoxAuroraDevTools_FigG_112213.gif
FirefoxAuroraDevTools_FigG_112213.gif
Six new developer features in Firefox Aurora

Firefox Developer Tools panel

Firefox Developer Tools panel

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

FirefoxAuroraDevTools_FigH_112213.gif
FirefoxAuroraDevTools_FigH_112213.gif
Six new developer features in Firefox Aurora

JavaScript Debugger: Break on DOM events

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.  

FirefoxAuroraDevTools_FigI_112213.gif
FirefoxAuroraDevTools_FigI_112213.gif
Six new developer features in Firefox Aurora

Inspector Tool: HTML Editor

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.

FirefoxAuroraDevTools_FigJ_112213.gif
FirefoxAuroraDevTools_FigJ_112213.gif
Six new developer features in Firefox Aurora

Edit the HTML

Edit the HTML

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

FirefoxAuroraDevTools_FigK_112213.gif
FirefoxAuroraDevTools_FigK_112213.gif
Six new developer features in Firefox Aurora

Select the Inspector tab's default color unit format

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.

FirefoxAuroraDevTools_FigL_112213.gif
FirefoxAuroraDevTools_FigL_112213.gif
Six new developer features in Firefox Aurora

Color unit options

Color unit options

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

FirefoxAuroraDevTools_FigM_112213.gif
FirefoxAuroraDevTools_FigM_112213.gif
Six new developer features in Firefox Aurora

Color swatch previews

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.

FirefoxAuroraDevTools_FigN_112213.gif
FirefoxAuroraDevTools_FigN_112213.gif
Six new developer features in Firefox Aurora

CodeMirror

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.

FirefoxAuroraDevTools_FigO_112213.gif
FirefoxAuroraDevTools_FigO_112213.gif
Six new developer features in Firefox Aurora

Light Theme example

Light Theme example

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

FirefoxAuroraDevTools_FigP_112213.gif
FirefoxAuroraDevTools_FigP_112213.gif
Six new developer features in Firefox Aurora

WebConsole: Reflow Logging

WebConsole: Reflow Logging

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

FirefoxAuroraDevTools_FigQ_112213.gif
FirefoxAuroraDevTools_FigQ_112213.gif
Six new developer features in Firefox Aurora

The log is on

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.

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.

  • Developer
  • Enterprise Software
  • Account Information

    Share with Your Friends

    Six new developer features in Firefox Aurora

    Your email has been sent

Share: Six new developer features in Firefox Aurora
Image of Ryan Boudreaux140
By Ryan Boudreaux140
Thirteen years of web and graphic developer experience.
  • Account Information

    Contact Ryan Boudreaux140

    Your message has been sent

  • |
  • See all of Ryan's content

TechRepublic Premium

  • TechRepublic Premium

    Guidelines for building security policies

    PURPOSE These guidelines from TechRepublic Premium will help you define the necessary ingredients of a security policy and assist in its proper construction. They’re designed to work hand in hand with the subjective knowledge you have of your company, environment and employees. Using this information, your business can establish new policies or elaborate on those ...

    Published:  March 23, 2023, 12:00 PM EDT Modified:  March 24, 2023, 1:00 PM EDT Read More See more TechRepublic Premium
  • TechRepublic Premium

    Hiring kit: Artificial intelligence architect

    PURPOSE Recruiting an Artificial Intelligence Architect with the right combination of technical expertise and experience will require a comprehensive screening process. This Hiring Kit from TechRepublic Premium provides an adjustable framework your business can use to find, recruit and ultimately hire the right person for the job. From the hiring kit: DETERMINING FACTORS, DESIRABLE PERSONALITY ...

    Published:  March 23, 2023, 12:00 PM EDT Modified:  March 24, 2023, 1:00 PM EDT Read More See more TechRepublic Premium
  • TechRepublic Premium

    Hiring kit: Autonomous systems engineer

    PURPOSE Hiring the right Autonomous Systems Engineer requires a specific and precise recruitment process, supported by a thorough understanding of the project requirements. This Hiring Kit from TechRepublic Premium provides an adjustable framework your business can use to find, recruit and ultimately hire the right person for the job. From the hiring kit: DETERMINING FACTORS, ...

    Published:  March 23, 2023, 12:00 PM EDT Modified:  March 24, 2023, 3:00 PM EDT Read More See more TechRepublic Premium
  • TechRepublic Premium

    Hiring kit: Application support engineer

    PURPOSE This Hiring Kit: Application Support Engineer from TechRepublic Premium provides an adjustable framework your business can use to find, recruit and ultimately hire the right person for the job. From the hiring kit: DETERMINING FACTORS, DESIRABLE PERSONALITY TRAITS AND SKILLSETS The skillset of successful Application Support Engineers is marked by balancing the technical expertise ...

    Published:  March 23, 2023, 12:00 PM EDT Modified:  March 24, 2023, 5:00 PM EDT Read More See more TechRepublic Premium

Services

  • About Us
  • Newsletters
  • RSS Feeds
  • Site Map
  • Site Help & Feedback
  • FAQ
  • Advertise
  • Do Not Sell My Information

Explore

  • Downloads
  • TechRepublic Forums
  • Meet the Team
  • TechRepublic Academy
  • TechRepublic Premium
  • Resource Library
  • Photos
  • Videos
  • TechRepublic
  • TechRepublic on Twitter
  • TechRepublic on Facebook
  • TechRepublic on LinkedIn
  • TechRepublic on Flipboard
© 2023 TechnologyAdvice. All rights reserved.
  • Privacy Policy
  • Terms of Use
  • Property of TechnologyAdvice