This story was written by Keith Dawson for UBM DeusM’s community Web site Develop in the Cloud, sponsored by AT&T. It is archived here for informational purposes only because the Develop in the Cloud site is no more. This material is Copyright 2012 by UBM DeusM.

Firefox's Developer Command Line

Front-end Web developers and browser add-on makers have a powerful new tool.

Firefox 16, now in the Beta channel, sports a powerful new feature for developers: a graphical and extensible command line.

The browser's new Developer Toolbar should catapult Firefox to the front of the pack, for now, in the competition for browser mindshare among front-end Web developers. Here is a video by Mozilla's Kevin Dangoor going through some of the command line's features.

The Developer Toolbar (Mozilla also refers to it as the Graphical Command Line Interface, or GCLI) is invoked by shift-F2 or by selecting it under Web Developer in the Tools menu. It brings up a black bar at the bottom of the browser window: command line on the left, buttons on the right to invoke the Web Console, Inspector, and Debugger.

The command line is intended to be discoverable. As you type a few characters of a command or keyword, possible completions appear in light grey. Hit the Tab key and the keyword is completed. There is considerable help in context. (All in all the guidance and discoverability aren't at the level of the DECSystem-20's CMD JSYS from the 1970s, for those of you venerable enough to remember that.)

For Web front-end developers, the GCLI brings convenience and power. The edit command opens the Style Editor on any CSS files that the page loads; inspect lets you examine details of the styling of any page element.

Perhaps the most intriguing command is resize, which controls the Responsive Design View. This allows you to set the viewport to any desired size to see how your responsive design will behave when displayed on different devices. Combined with inspect, resize gives you unique insight into how your HTML5 media queries are working.

The pagemod command lets you play what-if with page design and content. It is also instructive in demonstrating how sites operate, e.g. to track users. Try visiting some news or e-commerce site and typing this into the GCLI: pagemod remove element iframe. You may see as many as 20 or 30 iframes (many of them undisplayed) go away.

You can use the pref command as a quick way to set any of Firefox's hundreds of preferences, avoiding a trip to the about:config page. For example, this command sets the experimental Do Not Track header: pref set privacy.­donottrackheader.­enabled true.

The GCLI gives Firefox a way to add shortcuts to any number of browser features, without cluttering up the interface. Best of all, the GCLI is user-extensible. Mozilla has not yet released documentation for how to extend the command line, but promises it will be forthcoming soon.

There is plenty more in Firefox 16, including the un-prefixing of a number of CSS3 features: animations, transitions, transforms, and others. (Here are the release notes and notes for developers for Firefox 16.)