After ten years since the first release of the famous Firefox browser, Mozilla introduces the new Developer Edition. Some of the tools are already available in the standard Firefox developer tools and as add-ons, in addition to newly introduced tools exclusively available in this edition. In this article we will be giving a quick overview for each featured tool in this newly released edition.
Firefox goes dark
The first thing to notice is the dark theme which gives a new appearance to this edition. If you feel less comfortable with the new color you can change it to the light theme from the settings.
The WebIDE is for Firefox OS apps developers. It provides an editing environment to create, manage your apps though a tree view of all the files in your apps with the ability to edit and save them.
Responsive Design View
Testing your responsive website/ web app design on different devices has been an annoying task for a while but not anymore. This features adapts your design to different kinds of devices, such as mobile phones or tablets. It makes it smooth and quick to see how website/ web app will look on all screen sizes.
It was formerly known as Firefox Tools Adapter. Beware that, according to Mozilla, it’s still an experimental add-on that targets Chrome for Android and Safari for iOS. Again, it’s not recommended to use this tool for development since it’s in the early stages of development and is available just for trying.
Web Audio Editor
Another experimental feature comes alive. It can be used by developers who use Web Audio API.It enables the developer to create an audio context then create audio nodes.
After downloading the Edition, you can check its two demos. The first one is the Voice-change-O-Matic, which enables apply various effects to the microphone input and also provides a visualization of the result. And the second one is the Violent Theremin, which changes the pitch and volume of a sine wave as you move the mouse pointer.
It’s a tool that you might have used before. It provides HTML & CSS panes for the full page or the element that you want to inspect. You can open them by choosing the inspector from the developer tools menu or by a right click on the element and choosing inspect element.
The Network monitor displays all the network requests that Firefox make, for example, the AJAX requests done by the opened page. This menu views all the network requests done by the page with the HTTP code returned, size, method, type of the content returned, the request’s file name and the domain of the path.
The Style Editor can be used to view and edit the stylesheet files associated with the page, create a new one from scratch or import a stylesheet file and associate it twith the page.
In conclusion, this was a quick introduction to the newly released Firefox Developer Edition. For more information, tutorials and detailed explanation for each tool, you can check the official page of the release.
Join the Newsletter
Sign up for our personalized daily newsletter