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.
The screenshot feature sounds like magic and will come in very handy for semi-automated tests.
@gefangneimnetz [October 9th, 2012, 12:19]
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?
Leon Victor [November 30th, 2012, 10:50]