bing code

January 15, 2016

Firefox Developer Edition – A Browser Designed for Web Developers

Author: Valerie Baker

Built for those who build the WebMozilla Firefox released a new browser this time last year. For the last year we’ve been using Firefox Developer Edition and if you’re a web designer – or just someone passionate about the web, we have to say, it’s amazing. It was built to bring together all core development tools to work in one place off multiple platforms. Since the release, I have been using the new browser on a regular basis to discover the differences and benefits it can provide developers compared to the generic Firefox.

While comparing the two browsers, I found that both have the same capabilities, except the Developer Edition has the tools pre-installed. Instead of downloading additional extensions for editing, troubleshooting and debugging, you can get it all in one simple download. If you’re already working off Firefox, it may seem like a waste of time to switch and learn something new since they both can get you the same results. What you don’t know is the new features can improve your workflow.

New Features

Two new features this browser offers are WebIDE and Valence. Here’s a short list of other features that are included:

  • Creating- Scratchpad, Style Editor, Shader Editor, Web Audio Editor
  • Debugging- Web Console, Page Inspector, JavaScript Debugger, Storage Inspector, Developer Toolbar
  • Mobile- App Manager, Responsive Design View, Debugging for Android
  • Performance- JavaScript Profiler, Paint Flashing Tool, Reflow Event Logging, Network Performance

To learn more about these features, you can view the Firefox Developer Edition’s list of tools.

Personal Favorites

Responsive Design View

Before I started using Firefox Developer, I would have to resize the browser window to find any CSS errors in a sites responsive design. Finding the errors are easy, but correcting them can be a little tricky. This new tool adjusts the screen size of the content without having to mess with the browser window. The Responsive Design View lets you know the exact resolution that is being viewed, which helps to increase styling accuracy. When viewing a website through the size of a phone screen, the tabs are fully visible and makes other web browsing easier without having to keep adjusting the browser.


When browsing a website, if you come across a color you would like to save, you don’t need to screenshot the site and open it elsewhere just to find the exact hex color. Firefox already has a few different add-ons available as a solution, I was using Colorzilla. This tool is extremely useful when it comes to web developing, but what’s great about the new Eyedropper for Firefox Developer Edition is it zooms in on whatever section you hover over to get the exact color from a pixel.

Interface Look and Feel

The last feature gets me excited, the new interface. Instead of the bland white theme, Firefox Developer Edition has a dark theme with square tabs. This makes the whole experience of using this new browser so much more exiting. Interested to find out more, give it a try!

Download Firefox Developer Edition

Valerie Baker

Valerie is the Senior Account Manager & Project Manager here at Atilus.

Similar Posts

Blog image Master Good Web Design: What Works and Why
In the fast-paced digital world, where attention spans are dwindling, the success of a website hinges upon its ability to captivate and engage visitors. Good web design plays a pivotal...
Read More Master Good Web Design: What Works and Why
Blog image Atilus Launches Website for the Fastest Growing Non-Profit Organization in Southwest Florida
FORT MYERS, FLORIDA, June 26, 2023 – Babcock Ranch Foundation, a non-profit organization dedicated to making a positive difference in the communities of Southwest Florida, has joined forces with Atilus...
Read More Atilus Launches Website for the Fastest Growing Non-Profit Organization in Southwest Florida
Blog image How to Redesign Your Website Without Negatively Impacting SEO
If you're like most business owners, you're always looking for ways to improve your website and grow your business. But you may not want to invest in a complete website...
Read More How to Redesign Your Website Without Negatively Impacting SEO