Since Firefox 4 last March, Mozilla have begun to include their own developer tools built in to the Firefox browser.

Whilst Firebug still remains available as a plugin and is still supported by Mozilla, the browser vendor identified the need to include built-in developer tools - possibly so it has more control over future features and targets of developer tools within Firefox.

Last May Mozilla’s Product Manager for Developer Tools, Kevin Dangoor, blogged:

At this stage, Firefox needs to ship with a strong baseline set of tools for web developers. Firebug is a standalone project with a lot of history behind it and big plans for the future. We want to be able to build new tools that head in some new directions while allowing the Firebug project to continue to explore their ideas. Our goal is to help the whole developer tools ecosystem. We want to make it easier for people to hack on the built-in devtools, on Firebug and on entirely new experiments, too.

Mozilla have recently released a road map and feature list for the Developer Tools which shows where they intend to take this new toolset in the coming months. If you’ve not yet had time to get acquainted with the new tools, we’ll take a look at what’s currently included; what’s coming soon to the browser and what differentiates Firefox’s developer tools from the other tools available. After all, these tools have the potential to become a web developers new best friend.

Falling in line with Firefox’s “release early, release often” philosophy the Developer Tools have been released as and when they are stable which means while they include some features you may not have seen in other tools, they are also lacking in some of the usual functionality you would expect from these tools. These missing features are coming and the intention will be to update this post as Firefox evolves, so features that are detailed in the ‘coming soon’ sections will make their way up the post to their relevant sections as they are released, and at that point I’ll flesh out the details.

This is by no means an exhaustive list of what’s in and what’s coming - but it should give you the introduction you’ve been meaning to have but just haven’t got round to yet.

Don’t forget, Firebug is still available, as are other development aids on the Mozilla Add-Ons site.

Introduction to the Developer Tools

Firefox’s web developer tools can be found in the menu bar under Tools > Web Developer, or by using the shortcuts listed with each feature below. At present, these tools are all separate components and appear docked to different sides of the browser window.

The roadmap suggests that these tools will appear together in a Developer Toolbar in a later release. Once this has been completed, a later release will allow the toolbar to appear as a separate window undocked from the browser.

You’ll notice a JavaScript Debugger and Network/Timeline panel is missing from the features listed below - these are coming to the Developer Tools but are currently scheduled for later in the year.

Web Console

Shortcut: “Ctrl”, “Shift” and “K” on PC; “Cmd” ⌘, “Option” ⌥ and “K” on the Mac

What’s Currently There

Messaging

Firefox’s web console provides an output for 4 types of messaging. Each type of message is timestamped and colour coded to allow easy identification; and each can be switched on/off by changing the button state. It can also be filtered by type via the associated drop down arrow or by a search term using the filter input area, something not currently possible in other tools.

• Net (black) shows information on network requests. It can be filtered to return all logs or just errors. Clicking on an entry shows information on request and response headers and cookies sent. You can also see the request and response body by right clicking on the Web Console and selecting “Log Request and Response Bodies”, although this data will only show for future network requests (not historical).
• CSS (blue) shows CSS errors and warnings.
• JS (orange) provides the same for JavaScript errors.
• Logging (or Web Developer in earlier versions of Firefox) is where console messages are outputted to. Messages can be filtered based on the type of console logging called. Using console.info, console.warn or console.error has the same effect as console.log, but each adds an indicative icon to differentiate.

Command Line Interface

The web console also contains a standard command line interface, which has a fully functional autocomplete and works in the same way as other browsers with a few additional extra features:

• $ and $$ are shortcuts for document.getElementById() and document.querySelectorAll(). As with other developer tools, $0 will return the currently selected element.
• pprint(object) outputs the contents of an object in a readable format.
• keys(object) outputs just the keys of an object as an array, while values(object) does the same for values.
• inspect(object) opens an object inspector for the object passed.
• clear() can be used to clear the current console output.

The Web Console can be undocked and moved around the browser window for developer convenience.

What’s Coming Soon

Firefox 12 introduces queued messages, which means developers will be able to see a page’s log history and error messages received at page load even if the Web Console was not open at that time.

What’s on the Roadmap

Please note: Items on the roadmap generally do not have a scheduled date, so we cannot be sure when these features will arrive.

Sourcemaps

Mozilla are implementing sourcemaps! When code reaches a production environment, it is often minified and collated in to one file. Sourcemaps allow developers to debug code at this stage by using the original source files. When a sourcemap is available, messages that are sent to the console (through console logging, warnings or errors in CSS and JavaScript) will link to the original source, not the generated file.

GCLI

Another upcoming feature for Web Console is the GCLI (Graphical Command Line Interface), which aims to encourage more users to use the command line by providing a way for developers to discover ways of interacting with the developer tools without using a mouse.

Focusing your cursor on the command line will bring up a menu (with supplementary help text) which can be interacted with by typing or selecting from the options available. Depending on the option selected more options become available. For example, selecting ‘tilt’ to show the 3D view (detailed below) will then give options to open, close, rotate and zoom. Selecting rotate and zoom will then provide options to define the amounts. As options are chosen in the graphical user interface, the command line instruction is created below.

The commands currently available in GCLI are:

• break - to add a breakpoint to a particular line of JavaScript
• console - to control the console (clear or close), NOT send messages.
• echo - to send a message to the console.
• edit - to edit a CSS or JavaScript resource.
• help - for help on the GCLI
• inspect - to directly inspect an element (based on a CSS selector that matches 1 item)
• tilt - to open, close and adjust the 3D view

With GCLI, if you wish to use normal JavaScript commands you currently need to start your code with a curly brace {.

If you want to have a play with the GCLI, you can try it in the Firefox Nightlies. You’ll need to go to about:config and search for ‘devtools.gcli.enable’. Set this flag to true.

Inspect

Shortcut: “Ctrl”, “Shift” and “I” on PC; “Cmd” ⌘, “Option” ⌥ and “I” on the Mac

What’s Currently There

The “Inspect” tool allows developers to inspect the HTML and CSS of the web page. The Inspect bar currently consists of a “Inspect” tool, breadcrumbs and three options: “HTML”, “Style” and “3D View”.

The breadcrumbs allow you to not only traverse up the DOM, but also give a quick shortcut to reaching the first child of the current selected element.

HTML

The “HTML” option opens the HTML view of the page, showing the DOM in its current state; while the “Style” option shows a second window for CSS.

The “Inspect” button allows you to select an element on the page. The tool places a handy highlight over the area of the page the user is currently looking at both on the page (greying out the remainder) and within the Inspect tool (providing the HTML tab is open).

It’s possible to change attribute values on the fly by double clicking on the value in the HTML window and entering a new value. Firefox keeps the current value visible in case you need to refer to it whilst editing.

Style

The “Style” window is the equivalent to your usual CSS developer tool area. “Rules” provides a way of seeing all the rules currently applied to the selected element, giving an easy interface for turning styles on and off and editing values (but sadly not increments or color swatches are currently available).

“Properties” shows all the style properties applied and can be filtered to show only styles set by the user. By clicking the arrows next to the property, you can see which rule is being applied and any unsuccessful rules - handy for when you are unsure why a particular rule is not being applied. If you’re also unsure of what a particular property means, hovering over it reveals a question mark which, when clicked, will open a link to the Mozilla Developer Network where a description and explanation exists.

From Firefox 11, “3D View” gives a 3D representation of the Document Object Model (DOM).

Paul Rouget explained the view on Mozilla Hacks last July when it was called Tilt:

Since the DOM is essentially a tree-like representation of a document, this tool layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering itself. Unlike other developer tools or inspectors, Tilt allows for instant analysis of the relationship between various parts of a webpage in a graphical way, but also making it easy for someone to see obscured or out-of-page elements.

What’s on the Roadmap

Editing HTML will be improved with the ability to add attributes to HTML elements, change text and will eventually provide autocompletion and validation of changes.

Inspect elements will also show margin and padding visually with values, although details on how have not been provided as yet.

Sourcemaps will also be included for CSS and will work as described above.

Scratchpad

What’s Currently There

The “Scratchpad” tool runs JavaScript in a sandbox which optionally has access to the page. It can be used to access and set variables and objects on the page by prefixing them with window..

Scratchpad includes syntax highlighting and is not too disimiliar to the Web Console command line except you have far greater control on the output; can write multiple lines of code without worrying about the console executing it and can run a selection of code rather than everything you’ve written.

Once you have written your JavaScript, you can use one of three commands to execute it. The options are found in the Execute menu bar; by right clicking on the Scratchpad or by using the keyboard shortcuts.

If you don’t wish to run all of your code you can highlight the code you want before using the Execute commands.

• Run (“Cmd” ⌘, and “R” on the Mac) will just evaluate the code as is.
• Inspect (“Cmd” ⌘, and “I” on the Mac) will return an object inspector
• Display (“Cmd” ⌘, and “L” on the Mac) will return the result in a comment after the code run.

You can also save and load code from the File menu.

More information about Scratchpad is available on the Mozilla DevTools blog.

What’s on the Roadmap

Scratchpad will offer autocompletion (like the Web Console) and a way of revisiting code run in the past, in a similar way to how the Web Console has a history available by pressing the up cursor key.

Style Editor

What’s Currently There

The style editor is arriving in Firefox 11 (March 7th). The style editor allows developers to directly edit stylesheets and save the new files. You can also import other stylesheets and add new stylesheets.

Unfortunately, the style editor doesn’t currently link up to the Style toolbar in the Inspect tool.

What’s on the Roadmap

The roadmap discusses a Style Doctor which will help developers determine why a page doesn’t look quite as expected.

Page Source / Error Console

Shortcut: Source - “Option” ⌥ and “U” on the Mac; Error Console - “Shift”, “Option” ⌥ and “J” on the Mac

The Page Source and Error Console tools have been in Firefox since day 1 (almost). Page source simply allows you to view the source of the page before DOM manipulation, whilst the Error Console details all the errors within the browser (including errors in Firefox).

Further Information

It’s possible for anyone to take a look at what’s coming soon by downloading these versions of Firefox:

• Firefox BETA - the next release of Firefox (barring any serious QA issues)
• Aurora - mostly stable and two versions ahead of release giving a great insight in to what’s next.
• Firefox Nightly - not stable, not recommended for general usage but it can be a good indication of what’s to come.

The Firefox Developer Tools roadmap is available on the Mozilla Wiki. There are also more details of Firefox’s current Developer Tools available on the MDN. If you feel I’ve missed anything, please comment below.

If you’re interested in browser developer tools, you may want to read my post on 25 Secrets of the Browser Developer Tools. If you’ve already read those, stay tuned for more secrets soon!