Quick overview of Mozilla’s new Firefox Developer Edition

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.

WebIDE

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.

Valence

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.

Page Inspector

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.

Web Console

This one has two main functions. First, logging information associated with a web page like any network requests, JavaScript, CSS, and security errors and warnings, in addition to error, warning, and informational messages explicitly logged by JavaScript code running in the page context. Second, enabling you to interact with the web page that you are viewing by executing JavaScript expressions in the context of the page.

JavaScript Debugger

It enables you to dive in the JavaScript code to inspect or modify it. It can be used for both developing on local machines as well as remote development.

Network Monitor

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.

Style Editor

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.