File Under: Browsers

Firefox 16 Offers New Tools for Web Developers

Mozilla has released Firefox 16, which gives web developers several cool new tools for building and debugging websites.

Current Firefox users will get the update the next time Firefox restarts. If you’d like to take Firefox 16 for a spin you can grab it from the Mozilla downloads page.

This release is short on new features for the ordinary users, but Firefox 16 does show web developers some love with the new Developer Toolbar and its “command line” tool.

The Developer Toolbar is really just a faster, easier way to get to the common web developer tools like the Inspector and Console. To use the new toolbar 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.

The real star of the Developer Toolbar is the new command line tool, which you’ll find on the left side of the toolbar where there’s now 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 (check out the video above).

To use the command line, just hit the shortcut (Shift-F2) and then type your commands. For example, you can inspect an element on the current 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.

Like recent releases of Opera, Firefox is dropping its vendor prefix (-moz-) from a number of stable CSS features, including animations, transitions, transforms and others.

For a complete changelog of everything new in Firefox 16, have a look at the release notes.