November 17, 2014 7:00 am

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.

Web development has been never easier with Mozilla introducing the Firefox Developer Edition

New Theme

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

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.

Valence

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.

Page Inspector

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.

Web Console

The Web Console has two main functions. The first one is 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. The second one is enabling you to interact with a web page by executing JavaScript expressions in the context of the page.

JavaScript Debugger

It enables you to dive in the JavaScript code to inspect it or modify it. It’s adapted for both develping on local machines as well as remote development.

Network Monitor

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.

Style Editor

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/.

Author Amr Abdou

A full-stack web developer, Linux enthusiast, freelance tech writer & open-source supporter. Loves finding quit corners in public places or cafes accompanied by his laptop to try changing the world from there. You can check his latest works at social-evolvea.com or follow him on facebook, twitter, Linkedin or Google+


Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *