Photo: Jim Merithew/Wired

Firefox will soon be getting another JavaScript speed boost thanks to a project Mozilla calls “IonMonkey.” The project is a new just-in-time (JIT) compiler for Firefox’s SpiderMonkey JavaScript engine and will significantly speed up JavaScript-intensive websites like Gmail or Facebook.

IonMonkey is available today as part of the Firefox nightly channel and is slated to arrive in final form with Firefox 18 in early 2013.

Mozilla’s David Anderson writes about what makes IonMonkey faster on the Mozilla JavaScript blog:

SpiderMonkey has a storied history of just-in-time compilers. Throughout all of them, however, we’ve been missing a key component you’d find in typical production compilers, like for Java or C++. The old TraceMonkey, and newer JägerMonkey, both had a fairly direct translation from JavaScript to machine code. There was no middle step. There was no way for the compilers to take a step back, look at the translation results, and optimize them further.

IonMonkey takes that step back, introducing an intermediate step where JavaScript is optimized before it gets converted to machine code. The result is a pretty significant speed boost — Firefox 18 with IonMonkey is 20 percent faster on Google’s V8 benchmark tests than the current stable release, Firefox 15. For more details on how IonMonkey works and some additional performance stats, head over to Anderson’s post on the Mozilla JavaScript blog.

If the nightly builds are a bit too bleeding-edge for you, Firefox 18 and IonMonkey will hit the Aurora channel Oct. 8 and then Beta Nov. 20 before the final release in 2013.

Live HTML editing in Firefox 17. Image: Screenshot/Webmonkey.

Firefox 17 recently graduated into Mozilla’s Aurora development channel, which offers a chance to preview new Firefox features before they’re ready for prime time. The latest Aurora release brings with it more improvements to the built-in web developer tools.

If you’d like to experiment with the new developer tools in the Aurora channel, grab a copy from Mozilla.

Mozilla has been working hard on Firefox’s developer tools over the last several Firefox releases. There are some promising new features in the current Firefox beta and Firefox 17 will add several more, including live HTML editing.

Just as the Style panel of the Page Inspector in current releases allows you to manipulate the styles on the page, the coming Markup panel will let you tweak the DOM in real time. The client wants to re-write the homepage copy? No problem, just start typing. Live previews mean you can quickly prototype ideas without diving into your actual HTML templates or even opening a text editor and starting the save-and-refresh dance.

The Page Inspector has also been updated in this release so that visually selecting items on the page no longer draws a dark “veil” over everything else. The dark background was an unusual design choice back when the developer tools first launched, which, as we noted, is roughly the visual opposite of every other browser’s developer tools.

There’s been an option to turn off that dimming for some time, but when Aurora hits the final release stage in a couple of months the dimming will be gone for good. Instead highlighted elements will be outlined with a dashed line and the “node toolbar”.

Mozilla’s Kevin Dangoor explains the change:

We found that the appearance of the dark “veil” over everything but the selected element was striking, but also making it harder for designers to see styling changes they made in the context of their overall design.

…

Instead of darkening the whole page, we highlight the selected element using a subtle dashed line and the useful node toolbar. Even better, when you move your cursor to the Style panel to try out style changes, the highlighting fades away entirely so that you can focus entirely on the styling.

For more details on other changes for developers, including the revamped Web Console and the smarter debugger coming in Firefox 17, check out Dangoor’s full post over on the Mozilla hacks blog.

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.