Firefox 16’s Web Developer Toolbar

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

Fire­fox 16 should be released today, and as well as the new web plat­form fea­tures for devs — the meter ele­ment, Micro­da­ta API, dppx unit, and unpre­fixed calc(), Ani­ma­tions, Gra­di­ents, and Trans­forms — there’s also a very use­ful new tool, the Devel­op­er Tool­bar. Called by Shift + F2 (on the Mac at least), it pro­vides links to Fire­fox’s suite of native devel­op­er tools and a very impres­sive com­mand line, which gives a range of short­cut com­mands to con­trol the tools.

Among them, the screenshot com­mand is new and very use­ful; screenshot foo.png will do a grab of the por­tion of the page that’s vis­i­ble in the view­port at the moment, while screenshot foo.png 0 true will grab the whole page (0 is the delay in grab­bing, true means grab ele­ments out­side of the view­port). To take a grab of only a par­tic­u­lar node (and all of its chil­dren), use screenshot foo.png 0 false '.foo', where .foo is a selec­tor that will only select a sin­gle item, like querySelector().

You can use it to con­trol oth­er devel­op­ment tools; console open will open the Web Con­sole, and console close will close it; inspect will open the Inspec­tor and inspect '.foo' will focus on the named ele­ment; like­wise tilt open will open the 3D view, and tilt open '.foo' will give the spe­cif­ic focus.

The very cool Respon­sive Mode can be accessed with the dimen­sions of the desired view­port, such as resize to 320 640 — the lat­ter two val­ues rep­re­sent width and height, respec­tive­ly. You can even edit resource files, such as CSS and JS, using edit http://foo.com/bar.css 25 — the numer­ic val­ue is an option­al line number.

It will even inte­grate with third-par­ty plu­g­ins; firebug open will launch Fire­bug, with oth­er com­mands to attach and detach the win­dow, and more.

You can find a full list of com­mands by typ­ing help, or get detailed help for any com­mand with help console, for example. 

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

  1. The screen­shot fea­ture sounds like mag­ic and will come in very handy for semi-auto­mat­ed tests.

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

  2. I want­ed to remap it as well since my F keys are hard­ware relat­ed which means the short­cut requires 3 keys. I dug around in about:config, but there’s noth­ing there even. So is this tool will help me to solve it?