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 across 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 that 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 that 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 site’s responsive design. Finding the errors is 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 make 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 development, but what’s great about the new Eyedropper for Firefox Developer Edition is that 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 exciting. Interested to find out more, give it a try!
Similar Posts
