Firefox has always been popular with developers. Eager to cement that reputation even further, they have launched Firefox Developer Edition; a cutting-edge spin on the popular browser loaded with features designed to make web development even easier.
Mozilla is also apparently trying to make it easier to develop for Firefox OS; their HTML5 based smartphone OS for low-end devices. They seemingly understand the value of developers for a smartphone platform, and are trying to increase the already-expansive Firefox OS software library.
As a result, this spin on the much-loved web browser comes loaded with a wealth of developer tools that make it simpler to create applications for Firefox OS, including a fully-featured IDE, and device simulators.
Surprisingly, Firefox Developer Edition also comes with utilities that allow you to create websites that render perfectly in Safari on iOS, and also in Google Chrome.
Developer Edition is available for OS X, Linux and Windows, and runs on the latest, bleeding-edge version of Firefox. But is it any good?
Should You Download Firefox Developer Edition?
If you only want a browser for surfing, gaming and watching videos, this isn’t for you.
Indeed, Firefox Developer Edition is very much a bleeding-edge piece of software. Expect crashes aplenty, and certain things not to work.
But if you’re learning to code, or if you’re a seasoned developer looking for something new to add to your utility belt, Firefox Developer Edition is certainly worth looking into.
Getting Firefox Developer Edition
Firefox Developer Edition is available as a free download from the Mozilla website.
Installing it is as you would expect. If you use Windows, expect to click ‘next’ until your index finger throbs. If you’re using OS X, just drag and drop the binary into your Applications folder.
Linux users get a tar.bz2 archive. If you use Ubuntu or Linux Mint, you can grab a copy of Firefox Developer Edition from the Aurora PPA. If you’re not sure how to add a new repository, Justin Pot explains it well here.
Here’s what you can expect once you’ve installed it.
Responsive Design View
Oh, to be a web designer in the late 1990s. Everyone had pretty much the same sized screen, and everyone was using the same browser. There’s beauty in homogeny.
But, things have changed. Computer monitors range from 11 inches, to a gargantuan 40 inches. Add to the mix the thousands of different mobile devices, each with different sized screens, and you’ve got a recipe for design disaster.
But Firefox Developer Edition has you covered. Want to see how your device looks like on a Netbook? Just open Responsive Design View and drag the window pane across until it’s the size you want. Firefox will do the rest.
Firefox has been able to run Firefox OS apps for a long time. With that said, if you’re building a Firefox OS app, it’s effectively going to run in the browser. So, why not write your code in the browser? That seems to be the philosophy behind WebIDE; a simple development environment baked into Firefox Developer Edition.
WebIDE lets you choose from a vast array of Firefox OS simulators, including ones for the latest, greatest, most bleeding edge versions.
In tandem with WebIDE, Firefox OS comes with something called Valence. This allows you to test your websites across multiple platforms, including any connected iPhones, and versions of Google Chrome later than 37.
However, you can write code and push it straight to the Firefox OS simulator, all with the same window. This makes it an astoundingly efficient choice for app developers.
Mozilla have heard your cries and have included something called ScratchPad in with Firefox Developer Edition. It’s pretty simple. Just open it up. Write your code. Press ‘run’. It also comes with some pretty impressive code-completion and hints, which are handy should you ever get stuck.
The best part is, whatever you write doesn’t (necessarily) have to contaminate your console logs. Neat-o.
The Developer Toolbar allows you to perform a variety of actions in a command-line esque interface, and all without leaving the browser.
There’s too much to go into here, but needless to say, if you need to delete an element or open a folder, or even open your website on your phone, you can do it with the Developer Toolbar.
Firefox Developer Edition comes with some awesome utilities that make it easier to be productive as a developer. But they’re not necessarily unique to it.
You’ve got a network monitor, making it easy to see which files are getting loaded, and what throws a 404 Not Found error.
It also comes with a styles editor. This is a really beautiful CSS editor which makes it easy to tweak how your page looks in the browser.
All of this is cool, but none of it is terribly unique to Firefox Developer Edition.
This Is Awesome
It’s November. It’s not even Christmas yet. So, why am I grinning like a cheshire cat and rubbing my hands with glee? It’s not Christmas, is it?
Either way, Firefox Developer Edition feels like a treat. It’s awesome. It’s fast. It’s beautiful. And it will make you a better, more productive developer. Download it now, I implore you.
Have you tried Firefox Developer Edition? Do you love it, or are you sticking to Chrome and its DevTools? Let me know in the comments below.