A Closer Look at Mozilla Firefox Developer Edition
Just in time for Mozilla’s 10th anniversary of Firefox, comes a series of new projects such as Polaris, Interest Dashboard and the one that’s been talked about for quite some time – Firefox Developer Edition.
Although there are a lot of developer tool add-ons that can be integrated in the existing Mozilla Firefox browser, this new version of Firefox is design specifically for web developers.
This means most of the tools that you will see in this version of Firefox are web development related tools which come with a series of built-in applications for different development purposes to speed up the developer’s workflow.
With Firefox Developer Edition, you don’t need to install tools or plug-ins to debug apps for desktop or mobile devices. Everything is already set up so that you can focus on development.
What’s Inside?
The Theme
If you’ve used previous versions of Mozilla Firefox, you’ll be disappointed if you were expecting a brand new design. Once you have launched Mozilla Firefox Developer Edition, you’ll notice a new dark theme with square tabs instead of curved ones which are similar to the old version. That’s being said, this version gives you quicker access to developer tools
Default Tools
When you launch Mozilla Firefox Developer Edition for the first time, you’ll notice that there are six available tools (aside from the settings menu) by default:
With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
Try FreeOther Products- Web Developer Tools – Contains developer tools
- Bookmark/Show your Bookmark – Allows you to add, edit, delete or show bookmarks
- Download Manager – Contains all download information
- Firefox Developer Edition Start Page – Displays the start-up page of Mozilla Firefox with Google as the default search engine
- Start a conversation – Simple messenger for Mozilla Firefox account
- Open WebIDE – Offers a built-in editor for working with Firefox OS apps in simulators or Firefox OS devices as well as Firefox for android
The settings menu offers basic functions which are also available in the previous versions of Firefox. The following are setting options you can see from the menu:
- Cut – Allows users to cut text
- Copy – Allows users to copy text
- Paste – Allows users to paste text
- New Window – Allows users to open a new window
- New Private Window – Allows users to open a new private/secured window
- Save Page – Allows users to save the webpage in HTML format
- Print – Allows users to print web pages
- History – Contains browsing information
- Full Screen – Allows users to put the browser in full-screen mode
- Find – Allows users to search by keyword on a web page
- Options – Allows users to create a different profile out of the box without affecting an existing profile on ordinary Firefox
- Add-ons – Contains all add-ons information
- Sync – Allows users to store Firefox data to Mozilla servers
- Customize – Allows users to switch from the standard Firefox theme, and has additional tools and features such as open file, sidebars, share this page, subscribe, character encoding, email link, apps, forget and sync
Web Developer Tools
Firefox Developer Edition consists of all common tools for web development process.
Responsive Design View
Responsive Design View is a new feature that lets you resize your screen to check the look of your site on different viewports. See the video below to see how it works.
Page Inspector
This feature helps you see HTML and CSS that was used on web pages to easily customize the structure or format of a page. See tutorial video below.
Web Console
One great thing about JavaScript is that it allows you to interact with the browser. This feature of Firefox Developer Edition allows you to see logged information associated with the web page you are working on and interact with the browser. Check out the video below to see how it works.
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
Try Startup App Try Slides AppOther ProductsJavaScript Debugger
This feature of Firefox Developer Edition will help you check JavaScript code and carefully inspect, test or customize the state of code for easy debugging. See video below.
Network Monitor
Another great feature of the new Mozilla browser is functionality to see network request information in-browser. This feature will definitely help you track down the details of each request. Check out the video below on how it works.
Style Editor
The stylesheet of a site has a great role on overall design. That’s why this feature of Firefox Developer Edition is helpful in viewing and editing CSS. You can add a new stylesheet and apply it to web pages. See instructional video below.
Web Audio Editor
If you are developing HTML5 games using web audio, this feature will help you in visualizing or customizing audio nodes within the web AudioContext. Check out the video below to see how it works.
New Features
Firefox Developer Edition has two powerful new features: Valence and WebIDE. These features will definitely help you speed up development process as well as help to easily debug code.
Valence
This is the Firefox Tools Adapter which is an available add-on tool previously on the older versions. This allows you create and debug apps on different platforms and devices by connecting to Firefox dev tools. This feature supports multiple browsers across mobile OS. For more information, check out the video below.
WebIDE
Another great feature is the WebIDE. With this tool you can create, edit or debug apps using the built-in browser editor or on a Firefox OS device. This feature allows you to access files, make changes and run them in a simulator available inside this tool. See video below.
Additional Features
Aside from these two new features inside Firefox Developer Edition, there are also another two new features that will surely help you to have a safe browsing experience.
DuckDuckGo
This is the standard search option, along with other search engines. It was included on this version as a Mozilla’s complement to its private browsing pitch to users by not tracking the user’s search queries as well IP addresses.
Forget
Another helpful private browsing mode feature is the forget button. It lets the user control recent history and cookies within the last 5 minutes, 2 hours or 24 hours of browsing activity. As of the moment, there are no custom options to change the duration of time you prefer for the browser to forget browsing information.
Mozilla Firefox Developer Edition vs. Google Chrome Developer Tools
Now that Mozilla has released a web developer dedicated browser, there will be some argument on which is the best developer tool to use. Although Chrome DevTools has been on the web since 2009, it serves its purpose well. It’s safe to say that Chrome DevTools is still the best to use and is faster and more stable than Firefox Developer Edition.
In some cases, Mozilla has done a great job building a browser dedicated to the web development community. While a lot of developers might say that it doesn’t have all what they need yet, the advantage is still on Firefox since it is a open-source product. Being an independent proprietary browser, there’s a lot of space for improvement.
Wrapping Up
Mozilla Firefox Developer Edition is a great experimental tool for web developers who are trying to improve workflow. If you’ve used Firefox’s Aurora, a pre-Beta build of Firefox, note that it became the Firefox Developer Edition in the release.
There might be more improvement in the future, but this is a good start for a better web development experience. You can download the new version directly on Firefox’s official website.
Have you used this new version yet? If so how do you feel about it? Share your experiences and thoughts in the comment section!
