integration code

January 15, 2016

Firefox Developer Edition – A Browser Designed for Web Developers

Author: Valerie Baker

Mozilla 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

Valerie Baker

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

Similar Posts

Blog image Why Every Roofing Company Needs a Strong Online Presence
Imagine waking up to a leaking roof after a heavy storm. What's the first thing most people do? They grab their phone and search online for a roofing company nearby....
Read More Why Every Roofing Company Needs a Strong Online Presence
Blog image Ashmore Design Launches New Website Crafted by Atilus
Atilus is excited to announce the launch of a newly redesigned website for Ashmore Design, a leading architectural design firm based in Bonita Springs, Florida. This sleek, user-friendly platform offers...
Read More Ashmore Design Launches New Website Crafted by Atilus
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