Released last week, Firefox 16 featured something significant for developers – the new Developer Toolbar. What the new toolbar does is allow you to control all other developer tools i.e. Debugger, Web console and the Inspector. It also has a few additional commands for controlling add-ons or Firebug. Where the toolbar is meant for developers, it does sport a few options that might make an advanced user’s life much easier. This post details the usage and scope of the Developer Toolbar, along with commands that a power user could find useful.
Beginner’s Guide To The Developer Toolbar
Access & Layout
To open the Developer Toolbar, go to Tools > Web Developer > Developer Toolbar or hit the F2 key. The toolbar appears at the bottom of the window, if you have the add-on bar enabled, the Developer Toolbar will appear above it. It has an input field for typing and executing commands, and three buttons that toggle the Web Console, the Inspector and the Debugger. Items in any menu displayed by the Developer Toolbar can be selected using the up/down arrow keys and executed by hitting the enter key.
The Developer Toolbar has its own syntax for executing commands. It isn’t difficult and should be easy to remember after a few days of use, but considering that it is new and users might be prone to forgetting it, Firefox has added hints to highlight what comes next when you are typing a command. For example, if you type in Help, [search] will appear indicating you can enter what command you want to look up help for.
Looking Up Commands
Looking up a command, what it does and what the syntax of the command is, is easy; type in help in the toolbar and hit enter (ignore the [search] string that appears). A list of commands that the toolbar supports and the syntax for accessing help for each one is displayed. Alternatively, you can hit the F1 key to view the list, but it isn’t as comprehensive as the one you get from typing help.
When you type in help, a pop up containing 17 commands opens. Each command has additional commands and this pop up tells you what to type to access help for those commands and a brief description of what each command does.
This command, as per its description, allows you to manipulate add-ons. Specifically, it lets you enable or disable one of the installed add-ons or display a complete list of all the installed add-ons. The following syntax is used (sans the square brackets).
- [addon enable] to enable an add-on from list
- [addon disable] to disable an add-on from list
- [addon list] to view a list of all installed add-ons
You can add an additional string to the last command to narrow down what type of add-ons you want to list i.e. dictionary, extension, locale, plugin, theme or all. If you do not enter the Type string and hit return, you will see a list of all installed add-ons with the disabled ones crossed out.
This command allows you to check the value of a Firefox preference. Normally, you would have to visit the about:config page and search for a preference to look up its value. Type in the name, or a part of the name of a preference and the Developer Toolbar will search for it as you type. This applies to the following three commands.
- [pref reset] resets the value of a preference to its default value, expands to include the name of the preference.
- [pref set] changes the value of a preference. The syntax expands to include the name of the pref and the value you want to set for it. The value may be in terms of true/false, 1/0 or a numerical value
- [pref show] displays the current value of the preference you enter.
In Firefox 15, Mozilla introduced a responsive design tool that allowed users to resize the webpage within the window frame to any size or to one of the presets. The Resize command allows you to open/close, toggle the responsive design tool or to resize to any width or height.
- [resize off] turns responsive design tool off
- [resize on] turns responsive design tool on
- [resize to] allows you to change the size of a web page in the responsive design tool. As you type, the syntax expands to include the width and height of the page
- [Resize toggle] toggles the responsive design tool, rather redundant with the on/off command already there
Firefox never really had a restart button which is annoying if you consider how often you have to restart it. Even with some no-restart add-ons, a restart is needed to get the add-ons to work. The Restart command allows you to restart Firefox in one of two modes. If you follow the command with True, it will not load content from its cache and if you follow it with False, it will reload content from the cache
- [restart true] does not load from cache
- [restart false] loads content from cache
With Firefox new CLI, you no longer have to rely on extensions to take a screenshot of a web page. The Developer Toolbar comes with a screenshot utility that allows you to capture screenshots as well as take a time delayed screenshot of a webpage.
[screenshot] This expands to include the name the file will be saved with, the delay time and whether to take a screenshot of the visible area of the webpage or the entire page. For example:
screenshot addictivetips 5 true
It will capture a screenshot of a webpage, save the file with the name ‘addictivetips’, there will be a 5 second delay before the screenshot is captured, and it will capture the entire webpage. Tests showed that no matter what the value for fullpage was set, it only captured the visible area. Additionally, you can define a particular CSS element to capture in the screenshot.
The tilt 3D view, first introduced a few versions back in Firefox 11, allows you to view slices of your webpage with each element in its distinct layer. The feature is useful for finding broken HTML code or checking which element is spilling over to the next one or, for just plain good old fun. The tilt commands in the Developer Toolbar allow you to open and close it. Set dimensions for rotating it, resetting the dimensions, translating the dimensions along X and Y axis and zooming in on the web page.
- [tilt close] & [tilt open] Close and open the 3D view, respectively
- [tilt reset] resets the rotation values on the webpage
- [tilt rotate] lets you enter values to rotate the page on. The syntax expands to enter a value for the X, Y, and Z axis respectively.
- [tilt zoom] zooms in on the web page, expands to include the zoom level. The zoom is not applied on the absolute zoom level but on relative zoom value of the current page.
If the feature isn’t working, you might have WebGl disabled. Go to about:config or use the Pref command described above to set the value of webgl.disabled to false and the value of webgl.force-enabled to true.
There are a few other commands in the new Developer toolbar, but unless you’re a developer, they are unlikely to interest you. For power users, these appear to have the most utility, though regular users are probably going to have to pass on it.