A Closer Look at Mozilla Firefox Developer Edition

CodingSam Norton • November 17, 2014 • 5 minutes READ

Just in time for Mozilla’s 10th anniversary of Firefox, comes a series of new projects such as Polaris, Interest Dashboard and the one that’s been talked about for quite some time – Firefox Developer Edition.

Although there are a lot of developer tool add-ons that can be integrated in the existing Mozilla Firefox browser, this new version of Firefox is design specifically for web developers.

This means most of the tools that you will see in this version of Firefox are web development related tools which come with a series of built-in applications for different development purposes to speed up the developer’s workflow.

With Firefox Developer Edition, you don’t need to install tools or plug-ins to debug apps for desktop or mobile devices. Everything is already set up so that you can focus on development.

What’s Inside?

The Theme

If you’ve used previous versions of Mozilla Firefox, you’ll be disappointed if you were expecting a brand new design. Once you have launched Mozilla Firefox Developer Edition, you’ll notice a new dark theme with square tabs instead of curved ones which are similar to the old version. That’s being said, this version gives you quicker access to developer tools

Default Tools

When you launch Mozilla Firefox Developer Edition for the first time, you’ll notice that there are six available tools (aside from the settings menu) by default:

1. Web Developer Tools – Contains developer tools
2. Bookmark/Show your Bookmark – Allows you to add, edit, delete or show bookmarks
3. Download Manager – Contains all download information
4. Firefox Developer Edition Start Page – Displays the start-up page of Mozilla Firefox with Google as the default search engine
5. Start a conversation – Simple messenger for Mozilla Firefox account
6. Open WebIDE – Offers a built-in editor for working with Firefox OS apps in simulators or Firefox OS devices as well as Firefox for android

Settings/Open Menu

The settings menu offers basic functions which are also available in the previous versions of Firefox. The following are setting options you can see from the menu:

• Cut – Allows users to cut text
• Copy – Allows users to copy text
• Paste – Allows users to paste text
• New Window – Allows users to open a new window
• New Private Window – Allows users to open a new private/secured window
• Save Page – Allows users to save the webpage in HTML format
• Print – Allows users to print web pages
• History – Contains browsing information
• Full Screen – Allows users to put the browser in full-screen mode
• Find – Allows users to search by keyword on a web page
• Options – Allows users to create a different profile out of the box without affecting an existing profile on ordinary Firefox
• Add-ons – Contains all add-ons information
• Sync – Allows users to store Firefox data to Mozilla servers
• Customize – Allows users to switch from the standard Firefox theme, and has additional tools and features such as open file, sidebars, share this page, subscribe, character encoding, email link, apps, forget and sync

Web Developer Tools

Firefox Developer Edition consists of all common tools for web development process.

Responsive Design View

Responsive Design View is a new feature that lets you resize your screen to check the look of your site on different viewports. See the video below to see how it works.

Page Inspector

This feature helps you see HTML and CSS that was used on web pages to easily customize the structure or format of a page. See tutorial video below.

Web Console

One great thing about JavaScript is that it allows you to interact with the browser. This feature of Firefox Developer Edition allows you to see logged information associated with the web page you are working on and interact with the browser. Check out the video below to see how it works.

JavaScript Debugger

This feature of Firefox Developer Edition will help you check JavaScript code and carefully inspect, test or customize the state of code for easy debugging. See video below.

Network Monitor

Another great feature of the new Mozilla browser is functionality to see network request information in-browser. This feature will definitely help you track down the details of each request. Check out the video below on how it works.

Style Editor

The stylesheet of a site has a great role on overall design. That’s why this feature of Firefox Developer Edition is helpful in viewing and editing CSS. You can add a new stylesheet and apply it to web pages. See instructional video below.

Web Audio Editor

If you are developing HTML5 games using web audio, this feature will help you in visualizing or customizing audio nodes within the web AudioContext. Check out the video below to see how it works.

New Features

Firefox Developer Edition has two powerful new features: Valence and WebIDE. These features will definitely help you speed up development process as well as help to easily debug code.

Valence

This is the Firefox Tools Adapter which is an available add-on tool previously on the older versions. This allows you create and debug apps on different platforms and devices by connecting to Firefox dev tools. This feature supports multiple browsers across mobile OS. For more information, check out the video below.

WebIDE

Another great feature is the WebIDE. With this tool you can create, edit or debug apps using the built-in browser editor or on a Firefox OS device. This feature allows you to access files, make changes and run them in a simulator available inside this tool. See video below.

Additional Features

Aside from these two new features inside Firefox Developer Edition, there are also another two new features that will surely help you to have a safe browsing experience.

DuckDuckGo

This is the standard search option, along with other search engines. It was included on this version as a Mozilla’s complement to its private browsing pitch to users by not tracking the user’s search queries as well IP addresses.

Forget

Another helpful private browsing mode feature is the forget button. It lets the user control recent history and cookies within the last 5 minutes, 2 hours or 24 hours of browsing activity. As of the moment, there are no custom options to change the duration of time you prefer for the browser to forget browsing information.

Mozilla Firefox Developer Edition vs. Google Chrome Developer Tools

Now that Mozilla has released a web developer dedicated browser, there will be some argument on which is the best developer tool to use. Although Chrome DevTools has been on the web since 2009, it serves its purpose well. It’s safe to say that Chrome DevTools is still the best to use and is faster and more stable than Firefox Developer Edition.

In some cases, Mozilla has done a great job building a browser dedicated to the web development community. While a lot of developers might say that it doesn’t have all what they need yet, the advantage is still on Firefox since it is a open-source product. Being an independent proprietary browser, there’s a lot of space for improvement.

Wrapping Up

Mozilla Firefox Developer Edition is a great experimental tool for web developers who are trying to improve workflow. If you’ve used Firefox’s Aurora, a pre-Beta build of Firefox, note that it became the Firefox Developer Edition in the release.

There might be more improvement in the future, but this is a good start for a better web development experience. You can download the new version directly on Firefox’s official website.

Have you used this new version yet? If so how do you feel about it? Share your experiences and thoughts in the comment section!