Back in November Mozilla’s Firefox browser celebrated its 10th birthday, and we were gifted a series of new features, along with a developer-centric browser (but sadly no cake). That browser, nicknamed Firefox Developer Edition, was created to provide a better resource for web developers looking to test, scale, and do more development from one location.
The new browser includes all the developer tools that you’ve come to know and love from the consumer version of Firefox, including the Page Inspector, Console, Debugger, etc., alongside new features such as WebIDE, Responsive Design View, Valence, and more.
So how is it? Is Firefox Developer Edition worth the download? It’s time to get off your internet surf board, and grab your scuba gear, because it is time for a deep dive to find out!
The Look
When you imagine a Hollywood portrayal of computer programmers, developers, and hackers, what image comes to mind? Dark black trench coats with slick black sunglasses a la The Matrix? Neon lights, skintight jumpsuits, and riding lightcycles a la Tron?
How the average person views techies:
The Dev Tools
Responsive Design View
One of the hottest trends in web development involvesresponsive design – a design philosophy that focuses on creating a single, fluid website experience on any screen size or platform, without the need for multiple website iterations. In theory responsive design makes it easier to use a website, as well as maintain it.
Firefox Developer Edition offers an all-new Responsive Design View function that makes it easier to see how your website will appear within different screen sizes. It enables you to select a screen size, layout orientation (vertical or horizontal), see how the page will react to touch interaction, and take screenshots. The function to yell “Enhance” to the theme song of CSI is sadly not included.
Page Inspector
Love Firefox’s ‘Firebug’ extension? Page Inspector will feel very familiar – it empowers you to touch loaded HTML and CSS on any given webpage so that you can test modifications to the page structure, and style. You can think of it as a way of Agent Smith’ing into a webpage whenever you want.
Web Console
If you are looking to see a list of page logs generated when Firefox (or any given browser) loads up your page, the Web Console is for you. It is a simple way to identify errors, network requests, JavaScript, CSS, security warnings, and other messages, while offering you a way to interact with a page using JavaScript.
JavaScript Debugger
The Firefox Developer Edition JavaScript Debugger (say that five times fast) makes it easy to see how any given JavaScript action on a page will react when given a variable. It displays the action step-by-step, giving you more insight into how your scripts are working, and allowing you debug without endlessly messing with live website files.
Style Editor
The Style Editor is kind of a more hands-on extension to the Page Inspector tool. It can be used to not only view and edit existing stylesheets, but create and apply new ones to any given page, and be able to see the result. We suggest testing this tool out by (temporarily) replacing any given site’s typeface with Comic-Sans.
Valence
Multi-browser app testing within Firefox has been on many developers’ wish lists for quite some time, and it is finally here in the form of Valence preview. Sort of.
Valence is a built-in function designed to help developers debug a variety of browsers, including: Firefox, Firefox for Android, Firefox OS, Chrome on Android, and Safari on iOS. But as it is still in preview mode, Mozilla is suggesting that users not rely on using the tool for day-to-day work at this stage.
Unfortunately we were unable to properly test Valence, but we love the idea.
WebIDE
If you’re looking to get into Firefox OS development, this tool is for you. It helps you develop, deploy, and test your apps in-browser or on a Firefox OS device. You can think of it as Firefox OS’ version of the standalone app development tools that you get with iOS, Android, or Windows Phone.
While we didn’t go hands on with this particular tool, it seems surprisingly well supported for an operating system only available in a small number of countries.
Opinions
Firefox Developer Edition is a great browser that seems to run a lot quicker than the standalone Firefox with Firebug, and other developer extensions. The new features, Responsive Design View, Valence, and WebIDE show a lot of promise and hint at the direction that Mozilla will be going when it comes to keeping up with Google’s Chrome developer tools.
While it remains to be seen whether the new developer tool features will keep up or even surpass Chrome, we found Firefox Developer Addition to be a worthy alternative if you’re looking to shy away from Google. But right now it looks like it isn’t as heavy a choice as Neo deciding between the blue and red pills.
Have you been playing around with Firefox Developer Edition? Tell us about your experience by tweeting @UptrendsMonitor!
Whoa. Flynn Lives! Firefox Developer Edition brings you the best of both worlds with a simple, but modern, blue/grey slate custom theme. Don’t like sci-fi? Don’t worry, you can still customize your browser theme if you prefer something less sci-fi (and awesome) in appearance!
Leave a Reply