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