On the occasion of the tenth anniversary of the well-known Firefox web browser, the Mozilla developers have decided to release a version of this browser dedicated to web developers, namely Firefox Developer Edition (now in version 46). Last year the 64-bit version was also made available for Windows, Linux, and Mac OS X. This version of Mozilla’s browser is intended as a tool for development, offering extremely useful functions to those involved in web interfaces at the level professional, with very sophisticated tools to create animations, responsive layouts, scripts and so on.
In this article, we will look at some of the main features of this browser, and the features it offers to simplify the lives of developers and web designers. Anyone interested can download this browser from the official site.
WebIDE
The first interesting feature that Firefox Developer Edition offers us is the WebIDE. It is a tool designed to verify the proper functioning of a web app, which is a web application designed to be entirely contained and displayed on a mobile app. With WebIDE you can open a Firefox OS simulator, within which we can install both our app, both mobile browsers Firefox (for Android), Safari ( iOS ) and Chrome ( Android ), resulting in a multi-platform testing tool.
To access WebIDE, simply click on the icon 
on the right of the Firefox Developer Edition address bar.
Responsive Design View
Another very useful and powerful tool offered by Firefox Developer Edition is the Responsive Design View mode, through which we can easily change the page size, thus verifying the correct operation of our responsive layouts. To switch to this mode simply use the CTRL + SHIFT + M key combination, and the window will change as shown in the following image:
In this mode, we can quickly change the viewport size, either by choosing one of the predefined resolutions or by specifying the dimensions in a customized way. Furthermore, we can simulate the rotation of the device (key 
) as well as enable the touch events (key 
).
Color picking
Another useful tool (especially for those involved in web design) is the ” color collection ” ( eyedropper in the English version). The operation is absolutely identical to the similar tools present on graphics software such as GIMP or Photoshop (and generally characterized by an icon in the form of an eyedropper): going to the icon 
Development Tools, and then on Color Picker, we will be able to get the hexadecimal code corresponding to the color. By clicking with the left mouse button on any point of the page, we will also copy this hexadecimal code in the notes of our operating system, ready to be pasted on a CSS sheet or any other component of our web project.
3D visualization
On Firefox Developer Edition (but recently also on the main version of Firefox) is enabled the ability to view the elements of the page in an interesting 3D visualization, alternative to the classic one. In this visualization the DOM elements can be considered as the projections on the 2D plane of the screen of three-dimensional elements: thus modifying the point of view (through appropriate rotations) it is possible to better understand, for example, how the elements of the page are superimposed (and this can often come in handy).
To access this display mode, you need to open the developer tools panel ( CTRL + SHIFT + I ), and then click on the icon Development Tools. Unfortunately, due to the development of new versions of Firefox in multiprocess mode (which should ensure greater performance on modern systems), or due to the incomplete support of some video drivers, 3D viewing may not be available on new editions of this browser. It is however desirable and plausible that it will return to being included among the development tools with the next releases.
Working with animations and CSS filters
In one of the recent releases of Firefox Developer Edition, many features related to the development of animations have been added, and many of them are accessible via the Animations panel of the development tools.
Through the animation panel you can stop the animations related to each of the elements of the page, as well as perform them again or modify them. Among the possibilities offered there is also that of choosing (and possibly personalizing) the Bezier curve that governs the evolution of each of the animations. All this in real time, by selecting the icon Bezierthat appears in the panel dedicated to the CSS rules, next to animation-timing-function.
Similarly, CSS filters can be edited , displaying changes directly on the page. In this case it is sufficient to click on the icon 
(shown next to the reserved word filter, among the CSS rules) to access this feature.
With the release of version 44 of Firefox Developer Edition, the developers have made available to users a web page that acts as a real tutorial to show the use of development tools, placing particular emphasis on the functionality related to the animations.
Other features
Those described so far are, of course, only the main features of Firefox Developer Edition. To them are added many others, some also very interesting (such as the ability to debug the WebSocket, an interesting component introduced with HTML5). Among the features not mentioned, another one concerns memory management, which can be controlled through the appropriate panel available among the development tools.
If you want updates on Firefox Developer Edition: the web development browser enter your e-mail in the box below:
