Mozilla recently announced a new browser version for developers on the 10th anniversary of the Firefox browser. The Usersnap team and I took a look at whether it works well for the web development process, offers developers a variety of possible applications, and if it keeps up with the Google Chrome dev tools.
New theme
The Firefox Developer Edition can operate separately from other installed Firefox browsers you may be running. One of the first things you’ll recognize after opening the new developer edition is the theme. The browser has basically the same styles and colors as the developer tools which should give you quicker access to them.
New features
Mozilla added new tools like WebIDE, and 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. For us, it also works perfectly with our Usersnap Firefox add-on that enables you to report and track bugs directly in your Firefox browser. With the Usersnap widget you can also 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
The style editor lets you view and edit CSS styles associated with a page. Also, you can create new ones and apply existing CSS stylesheets to any page.
Firefox Developer Edition or Google Chrome DevTools?
We compared the built-in Firefox developer features to the existing Chrome dev tools. We found that the new Firefox developer edition does not offer many new improvements to our workflow and still love Google Chrome for it’s easy to use dev tools.
Similar to the Responsive Design View mode in the new Firefox browser for developers, Chrome offers a pre-configured set of devices allowing you can play around with screen sizes on different devices. Also, 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 does not offer this kind of network throttling.
Moreover, Google Chrome allows you to 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 better because it shows you the necessary information in a more simplified way.
The perfect fit for developers?
To sum things up, we are excited to see Mozilla’s latest release of this stand-alone developer browser to help celebrate their 10th anniversary. It’s comfortable to have a one-stop tool kit for your browser, although we’re missing some features, such as network throttling. It remains to be seen if other developers choose Firefox over Chrome.
What’s your opinion on the new Firefox browser?
Originally posted on the Usersnap blog. Reposted with permission and under Creative Commons.
1 Comment