Mozilla Introduces the First Browser Built For Developers: Firefox Developer Edition

Developers are critical to the continued success of the Web. The content and apps they create compel us to come back to the Web every day, whether on a computer or mobile phone.

In celebration of the 10th anniversary of Firefox, we’re excited to unveil Firefox Developer Edition, the first browser created specifically for developers.

Ten years ago, we built Firefox for early adopters and developers to give them more choice and control. Firefox integrated WebAPIs and Add-ons to enable people to get the most out of the Web. Now we’re giving developers the whole browser as a hard-hat area, allowing us to bring front and center the features most relevant to them. Having a dedicated developer browser means we can tailor the browsing experience to what developers do every day.

Because Firefox is part of an open-source, independent community and not part of a proprietary ecosystem, we’re able to offer features other browsers can’t by applying our tools everywhere the Web goes, regardless of platform or device.

One of the biggest pain points for developers is having to use numerous siloed development environments in order to create engaging content or for targeting different app stores. For these reasons, developers often end up having to bounce between different platforms and browsers, which decreases productivity and causes frustration.

Firefox Developer Edition solves this problem by creating a focal point to streamline your development workflow. It’s a stable developer browser which is not only a powerful authoring tool but also robust enough for everyday browsing. It also adds new features that simplify the process of building for the entire Web, whether targeting mobile or desktop across many different platforms.

If you’re an experienced developer, you’ll already be familiar with the installed tools so you can focus on developing your content or app as soon as you open the browser. There’s no need to download additional plugins or applications to debug mobile devices. If you’re a new Web developer, the streamlined workflow and the fact that everything is already set up and ready to go makes it easier to get started building sophisticated applications.

So what’s under the hood?

The first thing you’ll notice is the distinctive dark design running through the browser. We applied the developer tools theme to the entire browser. It’s trim and sharp and focused on saving space for the content on your screen. It also fits in with the darker look common among creative app development tools.

We’ve also integrated two powerful new features, Valence and WebIDE that improve workflow and help you debug other browsers and apps directly from within Firefox Developer Edition.

Valence (previously called Firefox Tools Adapter) lets you develop and debug your app across multiple browsers and devices by connecting the Firefox dev tools to other major browser engines. Valence also extends the awesome tools we’ve built to debug Firefox OS and Firefox for Android to the other major mobile browsers including Chrome on Android and Safari on iOS. So far these tools include our Inspector, Debugger and Console and Style Editor.

WebIDE allows you to develop, deploy and debug Web apps directly in your browser, or on a Firefox OS device. It lets you create a new Firefox OS app (which is just a web app) from a template, or open up the code of an existing app. From there you can edit the app’s files. It’s one click to run the app in a simulator and one more to debug it with the developer tools.

Firefox Developer Edition also includes all the tools experienced Web developers are familiar with, including:

  • Responsive Design Mode – see how your website or Web app will look on different screen sizes without changing the size of your browser window.
  • Page Inspector– examine the HTML and CSS of any Web page and easily modify the structure and layout of a page.
  • Web Console – see logged information associated with a Web page and use Web Console and interact with a Web page using JavaScript.
  • JavaScript Debugger – step through JavaScript code and examine or modify its state to help track down bugs.
  • Network Monitor – see all the network requests your browser makes, how long each request takes and details of each request.
  • Style Editor – view and edit CSS styles associated with a Web page, create new ones and apply existing CSS stylesheets to any page.
  • Web Audio Editor – inspect and interact with Web Audio API in real time to ensure that all audio nodes are connected in the way you expect.

Give it a try and let us know what you think. We’re keen to hear your feedback.

More Information:

About Dave Camp

Dave Camp is Director of Engineering for Firefox at Mozilla.

More articles by Dave Camp…


115 comments

  1. Emil

    I need a Portable version of Developer edition – this way I get to use it without breaking company software policy…
    Please has this been packaged as Portable?

    November 11th, 2014 at 06:51

    1. Don Coleman

      There is Aurora (Firefox Developer Edition) for Android:
      https://www.mozilla.org/en-US/firefox/channel/#aurora

      November 11th, 2014 at 09:59

    2. Erkin Alp Güney

      It is possible but you would lose a part of your debugging abilities. Better ask your boss for a special permission.

      November 11th, 2014 at 10:05

    3. V

      There’s a zip on
      https://download-installer.cdn.mozilla.net/pub/firefox/nightly/latest-mozilla-aurora/
      it’ll probably try to create/use a profile in the customary locations, but you can probably find how to change the profile path to a usb stick or use Sync to transfer your settings
      these might help with that:
      https://support.mozilla.org/en-US/kb/how-do-i-set-up-firefox-sync
      https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles
      https://developer.mozilla.org/en-US/docs/Mozilla/Command_Line_Options

      November 21st, 2014 at 23:27

  2. Robert

    Looks great but it it does not seem to work with Polymer. My application works perfect on chrome but does not load at all in Firefox DE. It doesn’t render anything at all insde the tag.

    November 11th, 2014 at 07:01

  3. AG

    after install it crashes all the time, can’t get it to run.

    November 11th, 2014 at 08:43

    1. April Morone

      Yes, but how did you install it? If through the ppa repository through linux Terminal, you might have better luck with it.

      November 29th, 2014 at 00:56

  4. Robert

    The moment Mozilla introduced the Asstralis inteface, I stopped using their bloatware.

    November 11th, 2014 at 09:23

    1. Googum

      Simbly epic! :^)

      November 12th, 2014 at 09:06

  5. Android App Review

    We were wondering when can we except the mini version of Firefox like all others ?

    November 11th, 2014 at 09:39

  6. Mats

    I lost my “developer theme” when I restarted the browser. I lost all borders. :(

    November 11th, 2014 at 10:45

    1. Albert

      Had the same experience. Maybe you installed Firebug v3 along with it. That comes with it’s own theme, which you can change back in DevTools > Settings > Themes

      Hope that helps :)

      November 13th, 2014 at 03:53

      1. Mats

        You’re right, that did help. Thanks. :)

        November 13th, 2014 at 04:44

        1. Albert

          fyi: the fb theme seems to get fixed with Firebug 3 alpha 3 – https://github.com/firebug/firebug.next/issues/177

          just found it in the list of known issues: https://www.mozilla.org/en-US/firefox/35.0a2/auroranotes/

          November 14th, 2014 at 17:43

          1. samy

            Dear Albert,

            I want to develop a specific feature for the web browsers including chrome and firefox. I am new to this area, but have some good ideas as to what features should be available on a standard browser,
            Could you please suggest me how to achieve it, I dont know web programmaing, Would really appreciate your help.
            Thanks

            December 1st, 2014 at 14:53

        2. kushagra

          It is not working for me..even i uninstalled firebug. how can get dark theme back.. ??

          November 16th, 2014 at 21:49

          1. Albert

            … and you tried switching it via DevTools > Settings > Themes ?

            November 18th, 2014 at 20:41

  7. Ed

    A few things that hit me right off in the debugger:

    1) It cannot have tabs for the files you are working with in a debug session. When you have dozens or hundreds of JS files in your project, this makes it very difficult to work with just 2, 3, or 4 of those files in a debug session.

    2) The same kind of thing applies to the breakpoints being listed under the files in the side list. When you have breakpoints set in a large list of files, it would be really annoying to use that debugger for toggling those breakpoints on and off. Chrome puts the breakpoints in its own section so they are all together and easy to switch to when debugging.

    3) The visual stack path at the top is pretty much a waste since you have the call stack tab that shows the same type of information. Using that space to have the files on tabs that you are working with would be a far more useful feature.

    These two items alone make it a non-starter in comparison to using Chrome for a large application debugging.

    November 11th, 2014 at 11:26

  8. dav

    Full Offline installer? Localized versions?

    November 11th, 2014 at 11:44

    1. Stephen Spencer

      The full array of installers are here: https://www.mozilla.org/en-US/firefox/aurora/all/

      November 12th, 2014 at 02:15

  9. Steven Roussey

    Does this have e10s enabled?

    November 11th, 2014 at 11:47

  10. Tad Scsi

    Really?

    One can no longer expect a browser to open to device screen resolution as always was the case before? Now we get an aborted 1536 or whatever width on a 1920 display?

    Kinda takes planning graphics OUT OF THE PICTURE – so to speak. Graphics that look great on ANY OTHER BROWSER including regular Firefox, look like hell in default ‘browser’ resolution.

    The responsive tool do nothing to help. Zooming back out two steps, restores the 1920. WHY? WHY are you screwing with crap like that?

    November 11th, 2014 at 20:30

  11. Userbard

    Trying to make the jump from google chrome/chromium since I really want to support Mozilla.

    Couple of issues hangups so far, but I am finding the new Developer browser reasonably comfortable to work with. – (Unix – Elementary OS)

    1) Inspect element currently does not inspect the element. It only opens the inspector I have to then use the ‘PIck and element from the page’ look to actually inspect the element I want.

    2) Would be great if I could drag an element to a different place in the inspector. eg: Move an element that is inside a div outside of that div by dragging it.

    3) Its a pain having to edit html when I want to add a class/id/data attribute to an element on the page. Can there be a ‘Add Attribute’ option added to the inspector right click?

    November 12th, 2014 at 14:45

    1. Brian Grinstead

      Userbard, thanks for trying it out and sending over the feedback!

      1) Sorry about that, it’s a known bug that has a fix but may take a couple of days to get uplifted to DevEdition https://bugzilla.mozilla.org/show_bug.cgi?id=1091706
      2) There is a bug opened that has some recent activity for drag/dropping nodes in the inspector: https://bugzilla.mozilla.org/show_bug.cgi?id=858038. Hope we will be seeing this soon also.
      3) You can click on the closing bracket of the open tag which will create a space to add a blank attribute by pressing enter or double clicking on it. Alternatively, start editing an existing selector and just add the new attribute at the end of it.

      Definitely keep in touch with other issues that you bump into as you make the jump. The best way would be to contact @FirefoxDevTools on twitter or ask in the #devtools channel on mozilla IRC.

      November 12th, 2014 at 15:08

  12. Mark

    Great work. I have been using developer version since it came out. I like the new flat theme and that you gave users a choice of light or dark theme. quite spiffy. I find the network tab very helpful.

    November 12th, 2014 at 16:00

  13. Hiram

    Loving the interface so far! Noticed the inspect element issue and glad a fix is being worked on.

    The main issue for me (that is ultimately making the decision to consider actively using it very hard) is performance. Getting a lot of cpu spikes pushing over 100%. Mostly when using the developer tools, or viewing a website using any kind of CSS animation.

    November 12th, 2014 at 16:14

  14. mark bokil

    Just want to remind folks if you are not into the dark theme you can change it to light theme under Toolbox Options (panel with the console).

    November 13th, 2014 at 08:53

  15. krastley

    Like it, use it, work with it. Thank you, Mozilla! Love dark look and feel. Just beside mentioned bug with DOM inspector, I have another one with eyedropper: Whenever I try to use it, coursor becomes invisible. Tool itself works, I was able to click on something blindly and paste grabbed value. But that’s far from being usable :) I’m using linux with Xfce.

    November 13th, 2014 at 09:29

    1. Brian Grinstead

      krastley, thanks for the kind words. Regarding your issue with the eyedropper, I’m guessing that is the same as https://bugzilla.mozilla.org/show_bug.cgi?id=1042863, which seems to be some underlying issue with the XUL panels. If you think that’s the same thing you are seeing would you mind commenting in that bug with your platform details including the window manager you are using?

      November 13th, 2014 at 16:59

  16. Caryn Merritt

    I would like to know how to keep Firefox for my opening page were his tail swirls around the world and his body.When I connect to Firefox and the internet the Firefox comes on with a swirl. I think that is cute and exciting. How do I keep that? Please let me know. Sincerely, Caryn Merritt email: cemerritt29@yahoo.com

    November 13th, 2014 at 11:22

  17. Maurizio

    I have been using the program for a couple of days and so far it sounds great.
    The dark theme is fantastic, and you have a lot of information and tools for any task at hand!
    Just a single suggestion at a glance: using the element picker tool, it would be nice if the Web developer tools window came back on top after clicking with the mouse on the object to be examined.
    Anyway, a great job. Thank you!

    November 13th, 2014 at 13:56

  18. Retina

    Opera released their version called Opera Emulator in 2012

    November 14th, 2014 at 05:14

  19. Toby Mathews

    Hi there,

    I also think this is a great idea. In addition to the inspect element issue, I’m getting sporadic issues with display, where parts of web pages disappear, or obscured by large blocks of colour. It’s not consistent, but it happens a fair but (it’s actually happening right now, I’m getting intermittent occurrences of blocks of background colour displaying on this white text field I’m typing into!).

    Toby

    November 14th, 2014 at 10:10

  20. Matt McFarland

    This is great. But it’s too bad Inspect element does not work properly. It does not select elements at all, just – tested with my colleagues as well. This glaring bug, wow. Not sure how this passed QA.

    November 14th, 2014 at 14:52

    1. Mark

      Inspect element button has been fixed. I am using Nov. 16th build and it is working fine.

      November 16th, 2014 at 09:49

  21. Arron Bates

    Sitting doing nothing with the network panel open, and it’s chewing 56% CPU on one of the cores. regardless of how long I wait, it doesn’t stop pounding on the CPU. uncool, especially for working on a laptop when every other browser + network monitor (even original FF and httpFox) ticks over at a very low pace.

    November 15th, 2014 at 15:48

  22. Kyl

    Since this is the developer addition…

    One nice feature would be when developing angular apps and the angular errors pop up in the console with a url…those urls are clickable and take you to the webpage (just like chrome does). Right now you can hardly copy the urls.

    November 15th, 2014 at 15:55

  23. Antonio Sánchez

    Awesome!

    November 16th, 2014 at 09:44

  24. Paul

    You can enable the dev theme in at least Nightly (don’t know about the other versions) by settint the about:config option “browser.devedition.theme.enabled” to true.

    November 17th, 2014 at 08:47

    1. Mark

      Or if you are a GUI person you can just open Customize and click the button. :)

      November 17th, 2014 at 14:37

      1. Paul

        Huh. Didn’t see that. And I thought I had found something hidden.

        November 20th, 2014 at 14:02

      2. Paul

        BTW, I was talking about in Nightly, not developer edition.

        November 23rd, 2014 at 18:56

  25. Bang Roy Han

    this COOL job for me, may can add facility like
    – disable / enable block (div) with some setting [not on inspect element, but on like button]
    – force enable right click and force enable keyboard, when site use some javascript or css disable select, right click, disable keyboard.

    November 17th, 2014 at 11:22

  26. Robin

    Really Really excited about it.
    Gave it a go and its really fast too. Will be learning more tips and tricks soon.

    November 17th, 2014 at 15:12

  27. Adam

    The search functionality in inspector doesnt work..

    Im also no sure where to even post bugs for this version..

    Needs a lot of work.. This is ALPHA ?

    November 18th, 2014 at 10:34

  28. Travis

    Could someone at Mozilla please found out what the background track for that teaser trailer was? It’s amazing!

    https://www.youtube.com/watch?v=Ehv5u-5rE8c

    November 18th, 2014 at 20:07

  29. Juan Sebastian Ruiz Casas

    Hello

    My name is Juan Sebastian Ruiz Casas. Im studing desing web with CSS and Javascript de WebApps, incl. móviles FirefoxOS, but dont understand totally.
    I do want understand the desing. Can you help me?

    November 23rd, 2014 at 20:26

  30. MattK

    My main problem with it is an aesthetic one. The Inspector stacks the HTML and CSS windows horizontally when under 700px wide, but automatically jumps them to a side-by-side view once the inspector gets to over 700px wide.

    I can’t find a way to keep the 2 windows stacked one of top of the other. This makes either one or both of the window practically useless to me.

    It looks like I’m staying with regular Firefox with Firebug for the time being.

    November 23rd, 2014 at 21:22

  31. Alex

    I’m new to the developing world, but the Firefox Developers Editions seems to be very user friendly. Glad to start learning with it!

    November 23rd, 2014 at 22:36

  32. Jasa Pembuatan Software

    Im a Programmer at Jogja Software, im try to develop a ads on for Mozilla.

    November 27th, 2014 at 13:12

Comments are closed for this article.