post-promotion-placement#checkSidebarAdDisplayCondition" data-controller="scroll-position sticky-ad post-promotion-placement ">
Tanay Pant Jun 6, 2015
What You"ll Be Creating

Firefox Developer Edition was released by Mozilla during the tenth anniversary celebration of Firefox last year. Recently, 64-bit builds of Firefox Developer Edition have also been made available for Windows, Linux & Mac OS X. Firefox Developer Edition provides easy accessibility for a wide array of developer tools which help in making debugging easy and help in faster & more professional development. You can download the latest version of the Firefox Developer Edition from here. Let us have a look at some of the great features of the Firefox Developer Edition.

Bạn đang xem: Firefox developer edition là gì



With WebIDE, you can create, edit, demo or debug web apps by running them on the Firefox OS simulator. If you are creating a new web app, it also creates a basic ứng dụng boilerplate or a more complete boiler plate for you along with a proper directory structure. WebIDE also allows you khổng lồ connect Firefox Devtools to lớn many other website browsers such as Safari (iOS), Firefox (Android) and Chrome (Android).

Responsive kiến thiết View


Responsive design View in Firefox can be invoked by pressing Ctrl + Shift + M. You can check the responsiveness of your web application with the help of this utility. It offers a number of options such as setting the kích cỡ of the device that you want to emulate, rotating the screen (shift from portrait to landscape mode), simulate cảm ứng events and taking screenshot of the webpage in the responsive mode.

Xem thêm: Kiếm Tiền Qua Mạng Tại Nhà Tốt Nhất, Top 10 Cách Kiếm Tiền Online Tại Nhà Tốt Nhất

Eyedropper Tool


The Eyedropper Tool is a really awesome tool which helps you khổng lồ know the hexadecimal value of any màu sắc in a webpage (just lượt thích the eyedropper tool in Photoshop). This helps in finding the màu sắc of any element or image which having lớn browse through it"s via Element Inspector. Clicking on the color copies it"s value lớn your clipboard!

Browser Inspector


We all have worked with the Element Inspector, now what the hell is Browser Inspector? Well, Browser Inspector is used for debugging the Firefox Browser itself. If you want to change the màu sắc of the URL bar or for instance change the curve of the tabs with non-persistent results, then you can vì that through the Browser Inspector. Although the same result can be achieved through Scratchpad, Browser Inspector is great if you are not a Firefox Developer or if you just want to test out your changes!

3D View


Now this, I feel is the most awesome feature of Firefox Developer Tools. You can look at the 3 chiều rendering of any website, where each elevation block represents an element, in order of their nesting in the trang web This helps you to lớn know which elements are nested in which element.You can access the 3d View by pressing Ctrl + Shift + C và then selecting the box shaped icon on the right hand side of the newly opened panel.



You can open the Scratchpad by pressing Shift + F4. Scratchpad can be used to run clusters of javascript and edit, run và examine the results. The way it differs from the Browser Console is that Browser Console, is designed for interpreting a single line of at a time, but with Scratchpad you can work with larger chunks of executing it in various ways depending on how you want to use the output.


The Firefox Developer Edition provides a wide array of tools for creating, debugging, performance monitoring, debugging the browser & extending the DevTools themselves. Explaining all the tools is beyond the scope of this article. However, you can have a look at the complete danh sách of tools here. We hope that the introduction to lớn the above mentioned tools help you in your daily website development chores.