Mozilla introducing the Firefox Developer Edition
Web development has been never easier with Mozilla introducing the Firefox Developer Edition. It has been ten years since the first version of the well known web browser came to light. Now, Mozilla begins a new era introducing its unique Developer Edition. Some of its features are already available as plugins, in addition to new ones exclusively available in this edition.
The first thing that you will notice is the new dark theme which gives a new appearance to this edition. If you don’t feel comfortable with it you can change it to the old light theme from the settings.
WebIDE provides an editing environment to create and develop Firefox OS apps using a tree view of all the files in your app with the ability to edit and save them.
Responsive Design View
To make a responsive design, there is no need to test your website/ web app on different devices anymore. This features adapts your design to different kinds of devices, such as mobile phones or tablets. It makes it easy to see how website/ web app will look on all screen sizes.
This feature was known as Firefox Tools Adapter. It’s an experimental add-on that targets Chrome for Android and Safari for iOS. According to Mozilla, it’s not recommended to use this tool for real development since it’s still in the early stages of development and is available only for preview.
Web Audio Editor
Here is another experimental feature. It’s created for developers who use Web Audio API. It enables the developer to create an audio context then create audio nodes.
It comes with two demos. First, the Voice-change-O-Matic, which can apply various effects to the microphone input and also provides a visualisation of the result. And also the Violent Theremin, which changes the pitch and volume of a sine wave as you move the mouse pointer.
You can open both HTML & CSS panes by choosing the inspector from the developer tools menu or by a right click on the element and choosing inspect element.
This one shows you all the network requests Firefox makes, for example, the AJAX requests done by the page you are surfing. The menu displays 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.
This editor enables you to view and edit the stylesheet files associated with the page, create a new one from scratch or even import one and apply it to the page.
In conclusion, this was a brief introduction to the outstanding Firefox Developer Edition. For more information, tutorials and detailed explanation of each tool, you can check the official page of the release here: https://www.mozilla.org/en-US/firefox/developer/.
Leave a Reply