Review of the new Firefox browser: the Firefox Developer Edition

For the 10th anniversary of the Firefox browser, Mozilla announced a new Firefox developer edition. This browser version explicitly for developers. We at Usersnap took a closer look at the new browser version. Read what we think about the new Firefox browser and if it keeps up with the Google Chrome dev tools.

Only for developers

Mozilla developed this new browser explicitly for developers which means it was built to fit in the web development process and offers developers a variety of possible applications.

New theme

The Firefox Developer Edition can also be run separately from the other installed Firefox browser. One of the first things you’ll recognize after opening the new developer edition is the new theme. The browser basically got the same styles and colors as the developer tools which should give you a quicker access to the developer tools.

New features: Valence add-on & WebIDE

Mozilla also added new tools in the Firefox Developer Edition – such as the Valence add-on, which allows you to connect the Firefox developer tools to other browsers (for example Safari on iOS).

Responsive Design View

From our point of view, the Responsive Design View is an interesting new feature, which lets you play with the different screen sizes without changing the size of your browser window. Watch the video below to see how it works in detail:

The Responsive Design View also works perfectly together with our Usersnap Firefox add-on. The add-on enables you to report and track bugs directly in your Firefox browser. With the Usersnap widget you can create screenshots with annotations.

At first you have to activate the Responsive Design View in your Firefox browser in order to play around with the screen size. Having the Usersnap add-on installed you can now report bugs or collect feedback. Just click on the Usersnap add-on in your Firefox browser.

The screenshot will be saved in the Usersnap dashboard or in your installed project management tool. It is also possible to send the annotated screenshots directly via email.

The Style Editor in Firefox Developer Edition

The style editor lets you view and edit CSS styles associated with a page. Further on you can create new ones and apply existing CSS stylesheets to any page.

Firefox Developer Edition or Google Chrome DevTools?

Having had a closer look at the new Firefox Developer Edition we compared the built-in Firefox developer features to the existing Chrome dev tools. Especially compared to the Chrome browser the new Firefox developer Edition doesn’t offer that much improvements for our work efficiency.

We still love the Google Chrome for it’s easy to use dev tools. Similar to the Responsive Design View mode in the new Firefox, Chrome offers a pre-set of devices where you can play around with screen sizes of different devices. Further on, you can adjust the network speed in your Chrome browser to analyze your site behavior with different networks (such as EDGE, 3G, etc.). In contrast, the Firefox Developer Edition doesn’t offer such network throttling.

Moreover Google Chrome lets you display the media queries in the dev tools. Compared to the Style Editor in the Firefox Developer Edition, we like the visual display of the media queries in Chrome. It shows you the needed information in a more simplified way.

Firefox Developer Edition: the perfect fit for devs?

To sum things up, we are excited to see Mozilla’s latest release of this stand-alone developer browser for its 10th anniversary. It’s comfortable to have a one-stop tool kit for your browser, although we’re still missing some nice features in the new Firefox (such as network throttling).

It remains to be seen if a lot of developers turn their back on Chrome and head back to Firefox. For the time being we go with the well-known Firefox developer tools and the Google Chrome DevTools.

What’s your opinion on the new Firefox browser?

This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project.