Firefox 16’s Web Developer Toolbar

Warning This article was written over six months ago, and may contain outdated information.

Firefox 16 should be released today, and as well as the new web platform features for devs – the meter element, Microdata API, dppx unit, and unprefixed calc(), Animations, Gradients, and Transforms – there’s also a very useful new tool, the Developer Toolbar. Called by Shift + F2 (on the Mac at least), it provides links to Firefox’s suite of native developer tools and a very impressive command line, which gives a range of shortcut commands to control the tools.

Among them, the screenshot command is new and very useful; screenshot foo.png will do a grab of the portion of the page that’s visible in the viewport at the moment, while screenshot foo.png 0 true will grab the whole page (0 is the delay in grabbing, true means grab elements outside of the viewport). To take a grab of only a particular node (and all of its children), use screenshot foo.png 0 false '.foo', where .foo is a selector that will only select a single item, like querySelector().

You can use it to control other development tools; console open will open the Web Console, and console close will close it; inspect will open the Inspector and inspect '.foo' will focus on the named element; likewise tilt open will open the 3D view, and tilt open '.foo' will give the specific focus.

The very cool Responsive Mode can be accessed with the dimensions of the desired viewport, such as resize to 320 640 – the latter two values represent width and height, respectively. You can even edit resource files, such as CSS and JS, using edit http://foo.com/bar.css 25 – the numeric value is an optional line number.

It will even integrate with third-party plugins; firebug open will launch Firebug, with other commands to attach and detach the window, and more.

You can find a full list of commands by typing help, or get detailed help for any command with help console, for example.

2 comments on
“Firefox 16’s Web Developer Toolbar”

  1. The screenshot feature sounds like magic and will come in very handy for semi-automated tests.

    @gefangneimnetz [October 9th, 2012, 12:19]

  2. I wanted to remap it as well since my F keys are hardware related which means the shortcut requires 3 keys. I dug around in about:config, but there’s nothing there even. So is this tool will help me to solve it?