Firefox Developer Edition – Great Features for Web Developers – Take a Look
If you are a web developer, there is a great news from Firefox as Firefox has launched a new browser especially for web developers called Firefox Developer Edition.
There are many additional features have been added in this browser as debugger, style editor, web IDE, Eyedropper, Scratchpad etc.
Lets have a look on the first impression and look along with the features added with Firefox Developer Edition.
First look on the page once browsers opens :
Toolbar color have been changed to blue and developer tools and Web IDE have been added on the top right corner.
Interface looks different from regular Firefox browser and on top it shows Firefox Developer Edition that indicate this browser is for developers with additions features.
Tools on the top makes easy for developers to utilize on easy way and could be viewed on single look.
This new Developer Edition is completely customized and have kept in mind how to save the accessing time for the developers with ease of use of the tools. In regular Firefox browser also have all these features but to access all developer tools you might need to spend some time to find it. So the main difference in regular Firefox and Firefox Developer Edition is the view and ease of accessing of tools.
Lets have a look on other interfaces and features that might could help you ease your development work :
If you have installed Firefox version 34 you might be noticed that WebIDE feature have been added that you can find in Firefox Developer Edition on top right corner. App Manager have been replaced with WebIDE. With help of WebIDE you can debug Firefox OS applications.
If you have already used developer tools in regular Firefox its really easy for you to understand each feature.
You can start developer tool by right click inspect element of by clicking on the developer tools shown on top right corner.
Select inspect element will open developer tool that can be shown at the bottom:
It also really cool to inspect any element by selecting or picking the exact element and now you can see the change it shows dimension view of the page that makes easy to select the element.
The feature that is super helpful to edit any element’s content or property if you double click on any element while inspecting.
The dimension view makes easy to find the element which is overlapped by other element and double click makes the property highlighted of that particular element that you can easily edit or get the property information.
Move to next feature that is Console which will provide you the information about Network (Net), CSS, Java Script (JS), Security, Log information (Logging). This makes you work easy and also easy to find if any error occurs when page loads.
The next feature that is Debugger which allows you to debug the information more deeply and also if any error on code level.
Click before the number will allow you to select the debugging point and will give you more detailed information.
So select the debugging point and reload the page.
Once of the most and very useful feature is style editor that allows you to edit any element, for example element color, element style, element font, margins, padding etc. and you can see the change view immediately till the page reload.
Performance tools is added in Firefox version 34 and in Firefox Developer Edition also you can view this tool that allows you to record and check the performance. It also allows you to save the report.
The new feature that I can say in Firefox Developer Edition is Timeline that will allow you to record the performance time of the webpage.
Finally the network layout have been changed and now you can get the response in more clear view with status code specified on left side and timings to load of the page and page elements on right side.
Apart from these it’s a great feature that you can view the performance analysis by right click on the link and selecting the “Start performance analysis” option that will display the pie charts that will help you to analyze Primed cache and Empty cache.
On mouse over on the chart will highlight the particular report.
Last but not the least, The Responsive design mode allows you to view your website in different design mode and sizes.
You can enable Responsive design mode by clicking on the icon shown in below image –
You can select the size of the window by selecting options shown on top left corner.
There is no doubt these features are really going to help to the web developer by making their development work easy with the additional features.
To download and for more information about Firefox Developer Edition please visit on website:
Leave a Reply