Another day, another Firefox: Version 31 is upon us ALREADY

Web devs, Mozilla really wants you to like this one

Common Topics

Review The idea of a new version of Firefox will sound like a bad joke to some. To others, it’s a yawn – Firefox comes at the blistering pace of one new version every six weeks.

How can there be anything significant in the latest edition? Well, Firefox 31, released last week, is a significant update with new tools for web developers.

For some time now developers have been abandoning Firefox in favour of Google's Chrome browser, which has put much of its development effort into creating tools for developers. Firefox fell behind, both in tools available and in developer mindshare.

Recent releases of Firefox have been changing that, though, and this one is no exception. Among the new tools for web developers in this release are an editable box model dialogue, support for Sublime Text keybindings in the code editor and a new global eyedropper tool that makes it simple to grab a colour from anywhere in the browser.

The new eyedropper tool makes it simple to grab a colour from anywhere in the browser.

The latter will need to be enabled in the developer tools settings. Look for the option to "Grab a colour from the page" and make sure it's selected. Once you've enabled it, you'll see a new eyedropper icon in the top right corner of the developer tools panel. Click the icon to activate it and a small loupe will appear allowing you to select any colour in the browser window.

The eye dropper is also available when you click on colours with in the CSS inspector pane, making it easy to change the colour of an element to match others on the page.

The editable box model means you can now select an element and begin to manipulate it directly, without hunting down the specific CSS that applies to it. Instead you can just change the values in the box model pane and your margin, padding and border values will be applied to the selected element. You can also increment values by 1 with the Up/Down keys – hold down Alt to increment by 0.1 and Shift to increment by 10.

Firefox has long shipped with a developer tools editor (based on Codemirror). This release includes Codemirror 4, which brings support for Sublime Text key-bindings, Rectangle selection, Undo selection and Multiple selection.

There’s also a new canvas element debugger that can inspect 2D and 3D graphics by recording and then scrolling through the executed code frame by frame. Mozilla has a video demo of this feature in action.

There a couple of smaller new features in the dev tools, including Copy as cURL, which will copy any network request in the Network Monitor in cURL format. Just paste that into your terminal and you can inspect headers and other data using cURL.

Non-developers get a look in, too with native handling of video (.ogg files, anyway) and PDF files on Windows. That means, if you haven't explicitly told Firefox to open such files with another application, Firefox will open them for you.

Firefox 31 shows rumours of Mozilla's slide into irrelevance on the browser might be exaggerated - for web devs, at least.

Provided you can overlook some of the organization's exceedingly poor decisions in the last year, the latest version of Firefox has some great tools for web developers, some of which, for now anyway, you won't find in developer darling Google Chrome. ®