Firefox Developer Tools for Webmasters
Firefox provides a set of tools known as “Developer Tools” which come inbuilt with the browser itself. I think this is the single most reason why I use Firefox I have to develop and test websites and while doing so, I prefer to use Firefox.
You can find the developer tools in your firefox menu bar, under Tools > Web Developer. These tools will run under or in side of a loaded webpage.
There you will find a set of tools which are titled as:
- Web Console
- Style Editor
- Developer Toolbar
- Responsive Design View
- Page Source
- Error Console
- Network Monitor
|Firefox Developer Tools at a Glance. Click to view larger.|
2) Inspector: Also known as “Page Inspector” this tool will allow you to view the source of the page while pointing which part of the page that source is from. According to me, this is the most useful tool in the developer tool set. After loading this tool, you can easily point your mouse to a part of the webpage. The source code of that part of the webpage will be shown and highlighted in by inspector. You can easily move between elements of the page using this tool. The CSS rules for that part will also be shown in the right side. You can edit the style sheet directly, which shows the respective changes in the webpage immediately.
I find this tool quite handy for editing a website layout. I can easily see what my changes on width for example will do to the layout. The CSS part of this tool also generate Computed CSS, Fonts and a box model of the currently selected element.
4) Style Editor: This tool shows the entire CSS style of the current page and all0ws you to select one style if there are more than one. You will be able to edit the styles directly on the page. You can also create new style sheets and add styles to it. This is a useful tool if you are looking to create a stylesheet for your webpage while editing the webpage live.
6) Developer Toolbar: For advanced users this is the command line interface for performing different actions of the developer tools. For example you can type a command to edit a certain resource.
7) Responsive Design View: Allows you to view a webpage in different browser resolutions. You will be able to directly choose the browser width and height such as 768X1024, 1920X900. Allows to see how your webpage would behave if the page width and height increases or decreases.
9) Page Source: Allows you to see the entire source of the page. In the page source there will be clickable elements like the css files. If you click on those, their sources will also be displayed. I prefer to use Ctrl+U for viewing this part quickly.
11) Network Monitor: This is a new tool added with the upgrade of Firefox to version number 23. You can view the network activity on a site in a neat water fall view with this tool. Details of elements of a page such as their size and load time in milliseconds are shown. This allows developers to improve the sites connection and loading times.
One more interesting tool:
11) 3D View: A cool tool that allows you to view the webpage in 3D. Allows you to rotate the webpage as you drag the mouse along the browser display area. The elements are shown as 3d and placed on top of each other. A parent element is shown in the back while its child elements are shown on top of it. All of this are shown in 3D which allows you to separate the elements easily.