Pinterest Stumbleupon Whatsapp
Ads by Google

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 Top 15 Firefox OS Apps: The Ultimate List For New Firefox OS Users Top 15 Firefox OS Apps: The Ultimate List For New Firefox OS Users Of course there is an app for that: It's web technology after all. Mozilla's mobile operating system Firefox OS that, instead of native code, uses HTML5, CSS3 and JavaScript for its apps. Read More .

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.

Ads by Google

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.

firefoxdev-install

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 What Is An Ubuntu PPA & Why Would I Want To Use One? [Technology Explained] What Is An Ubuntu PPA & Why Would I Want To Use One? [Technology Explained] Read More .

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.

firefoxdev-responsive

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.

WebIDE

Firefox has been able to run Firefox OS apps Test Mozilla's FirefoxOS on Your Windows, Mac or Linux Computer Test Mozilla's FirefoxOS on Your Windows, Mac or Linux Computer Curious about the latest smartphone operating system: FirefoxOS? This open source, royalty-free operating system is bound to pop up on phones all over the planet eventually, but odds are a phone running it is not... Read More 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.

firefoxdev-emulators

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.

firefoxdev-valence

The text editing experience lacks the sophistication of Sublime Text 2 Try Out Sublime Text 2 For Your Cross-Platform Code Editing Needs Try Out Sublime Text 2 For Your Cross-Platform Code Editing Needs Sublime Text 2 is a cross-platform code editor I only recently heard about, and I have to say I'm really impressed despite the beta label. You can download the full app without paying a penny... Read More , and the precision and expediency of Vim The Top 7 Reasons To Give The Vim Text Editor A Chance The Top 7 Reasons To Give The Vim Text Editor A Chance For years, I've tried one text editor after another. You name it, I tried it. I used each and every one of these editors for over two months as my primary day-to-day editor. Somehow, I... Read More . Rather, it more closely resembles Notepad++ Soup Up The Notepad++ Text Editor With Plugins From The Notepad Plus Repository [Windows] Soup Up The Notepad++ Text Editor With Plugins From The Notepad Plus Repository [Windows] Notepad++ is a worthy replacement for Windows’ in-built and much loved text editor, and comes highly recommended if you’re a programmer, web designer or simply someone who finds themselves in need of a powerful plain... Read More .

firefoxdev-editing

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.

firefoxdev-helloworld

ScratchPad

Don’t you wish there was an easier way to write JavaScript one-liners? I do. Sure, you can open up a command prompt and launch a Node.js REPL What is Node.JS and Why Should I Care? [Web Development] What is Node.JS and Why Should I Care? [Web Development] JavaScript is a just a client-side programming language that runs in the browser, right? Not any more. Node.js is a way of running JavaScript on the server; but it's so much more as well. If... Read More , but that’s time consuming. Or, you could open up a Chrome console Figure Out Website Problems With Chrome Developer Tools Or Firebug Figure Out Website Problems With Chrome Developer Tools Or Firebug If you've been following my jQuery tutorials so far, you may have already run into some code problems and not known how to fix them. When faced with a non-functional bit of code, it's very... Read More . But again, this is time consuming.

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.

firefoxdev-scratchpad

The best part is, whatever you write doesn’t (necessarily) have to contaminate your console logs. Neat-o.

Developer ToolBar

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.

Other Goodies

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.

firefoxdev-performance

There’s also a really sophisticated profiler, making it easy to identify the JavaScript code that is slowing down your site.

firefoxdev-network-monitor

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.

firefoxdev-styles

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.

  1. kabir
    December 1, 2014 at 11:04 am

    I have been using firefox for my development for over 8 years now. With this new developer edition im more happier, I only wished one component should be added of making REST calls, just like DHClient from chrome.

  2. v8
    November 19, 2014 at 9:51 pm

    Absolutely awesome. It's like FireBug but native so it's faster. No need to figure out how to use the dev tools of other browsers.

    Connecting it to mobile and debugging it there is just fantastic.

    Back to Firefox for me.

    • Matthew Hughes
      November 30, 2014 at 4:59 pm

      Yep. I've been using it pretty much exclusively for development purposes for the past few weeks. It's phenomenal.

      Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *