bing code

January 15, 2016

Firefox Developer Edition – A Browser Designed for Web Developers

Author: Kristen Bachmeier

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.

Eyedropper

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

Kristen Bachmeier

Kristen Bachmeier is Atilus' Director of Operations and helps to oversee all client accounts and day-to-day operations. Kristen also has a background in digital marketing, and has been working in the digital marketing space since 2012.

Similar Posts

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
Blog image Custom Website vs. WordPress Templates: Part II
Once you’ve decided to move forward with creating a website, it’s time to make the choice between a custom or template site. We previously wrote about the differences between the...
Read More Custom Website vs. WordPress Templates: Part II
Blog image Tips for Vetting & Hiring a Good Florida Web Design Company
2021 is upon us and a new year often brings about the idea that it's time for a fresh start. And given the emphasis that has been placed on virtual...
Read More Tips for Vetting & Hiring a Good Florida Web Design Company