File Under: Browsers

Latest Firefox Beta Offers Powerful New Tools for Web Developers

Hot on the heels of the latest stable release, Firefox 16 has entered the beta channel, bringing with it some cool new tools for web developers.

If you’d like to give them a try, download the latest Firefox beta from Mozilla.

The latest addition to Firefox’s ever-expanding set of built-in tools for web developers is the new Developer Toolbar and its “command line” tool.

The Developer Toolbar itself is really just a faster, easier way to get to the common web developer tools. To use it just hit the keyboard shortcut Shift-F2 and the Developer Toolbar will appear as a thin, dark gray strip along the bottom of the page.

To the right of the toolbar you’ll find buttons for the Inspector, Console and Debugger panels, but the real star of the Developer Toolbar is the new command line tool, which sits on the left side with a shell-style prompt. Mozilla refers to this as a “Graphical Command Line Interface,” an oxymoron that actually makes sense when you see it in action.

Here’s how it works: Hit the keyboard shortcut to activate it (Shift-F2) and then type your commands. For example, you can inspect an element on the page by typing Shift-F2 and then “inspect H1″. Hit return and Firefox will open the Inspector Panel and highlight the <h1> for you. You can do something similar to search your markup by id, just type “inspect #name” and hit return.

Once you get the muscle memory down it makes for an incredibly fast way to navigate through your source code without ever taking your fingers off the keyboard. It’s not Pentadactyl or Vimperator-level keyboard commands by any means, but it can definitely be a huge productivity booster for keyboard junkies. My only quibble is that Shift-F2 doesn’t toggle the Toolbar, it just opens it. And ironically there doesn’t seem to be a command line command to close it.

Among the useful tools the command line puts at your fingertips are “resize,” which lets you access the responsive design tools, “pagemod” for live editing, “cookie” for inspecting and creating cookies and “screenshot” for grabbing images of the page. There are 16 commands in all; be sure to read through the Mozilla Hacks blog post for more details and examples. And be sure to type “help” to get more details on what you can do with each command.

One of the best features of the new command line is that anyone can create their own commands, which means at some point Firebug might be able to add its tools to the list of commands. The Mozilla Hacks blog has promised a follow up post on how to create your own commands; we’ll be sure to let you know when it’s available.