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
- Inspector
- Debugger
- Style Editor
- Profiler
- Developer Toolbar
- Responsive Design View
- Scratchpad
- Page Source
- Error Console
- Network Monitor
 |
| Firefox Developer Tools at a Glance. Click to view larger. |
1) Web Console: This tool allows you to view all warning logs while loading a web page. You will be able to see warning messages such as “Unknown Property”. These error and warning messages are generated by the webpage’s javascript code. Javascript coders will find this tool helpful to debug their .js files.
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.
3) Debugger: Debugger is a tool for debugging javascript of the page. You will be able to track down errors in the javascript that is running in the browser. You will have the option of selecting a single javascript file if the page has more than one.
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.
5) Profiler: Allows you to start profiling of your javascript. After a certain time you will know how your javascript code takes time to execute. Displays details such as time in seconds.
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.
8) Scratchpad: A simple notepad like tool that allows you to write down javascript and execute them. This tool comes quite in handy.
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.
10) Error Console: Displays the errors and warnings related to javascript and css of the current page. You can view them all in a single display or group them by errors, warnings and messages. An option to clear them from this console is also there.
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.
No Comments