Good Morning to all,
Today I share topic related to Top 10 Useful Firefox Developer Tools. Firefox is one of the large used web browser. There are many tools and features are available in firefox. The users will have convenient moments while surfing the net. In here there are 10 useful Firefox developer tools are described below. They are:
- Scratchpad
- Preview
- Vertical and Horizontal Rulers
- Responsive Design Mod
- CSS Selectors
- Style Editor
- Eyedropper
- Disable JavaScript
- Browser Styles
- 3D View
1.Scratchpad
Scratchpad provides an environment for experimenting with JavaScript code. You can examine the result of code, the process like write, run and then examine.
Keyboard shortcuts
| Command | Windows | OS X | Linux |
|---|---|---|---|
| Run Scratchpad code | Ctrl + R | Cmd + R | Ctrl + R |
| Show inline documentation | Ctrl + Shift + Space | Ctrl + Shift + Space | Ctrl + Shift + Space |
| Open the Scratchpad | Shift + F4 | Shift + F4 | Shift + F4 |
| Show autocomplete suggestions | Ctrl + Space | Ctrl + Space | Ctrl + Space |
| Run Scratchpad code, display the result in the object inspector | Ctrl + I | Cmd + I | Ctrl + I |
| Run Scratchpad code, insert the result as a comment | Ctrl + L | Cmd + L | Ctrl + L |
| Pretty print the code in Scratchpad | Ctrl + P | Cmd + P | Ctrl + P |
| Close Scratchpad | Ctrl + W | Cmd + W | Ctrl + W |
| Re-evaluate current function | Ctrl + E | Cmd + E | Ctrl + E |
| Create a new pad | Ctrl + N | Cmd + N | Ctrl + N |
| Reload the current page, then run Scratchpad code | Ctrl + Shift + R | Cmd + Shift + R | Ctrl + Shift + R |
| Open an existing pad | Ctrl + O | Cmd + O | Ctrl + O |
| Save the pad | Ctrl + S | Cmd + S | Ctrl + S |
2. Preview
Preview is another useful firefox developing tools. Using this tools, you can be able to preview all the HTML contents that you need.
3.Vertical and Horizontal Rulers
This is the very first one on the list of Firefox developer tools. This tool comes with pixel units displayed on the page. When you are arranging your elements on the page, this tool would be extremely helpful. In order to access this helpful Firefox tool, what you need to do is enter to the “Toolbox Options”. From there, you can see the “Available Toolbox Buttons”. Under it, you can find “Toggle rulers for the page”, and this is where you can find the vertical and horizontal rulers.
4. Responsive Design Mode
Any website should have great responsiveness, so that the desired web traffic can be achieved. Who would want to visit a site that will take you forever before it responses by the way? Hence, in order to check the responsiveness of a certain website, using the Responsive Design Mode in the Firefox developer tool would be very helpful.
5.CSS Selectors
The truth is, Firefox toolbox will always allow you to take screenshots on the entire page or on the visible portions. Even so, what makes this Firefox developer tool is the fact that you can use it in taking screenshots on an specific element, or those elements that are only visible when you use the computer mouse.
6. Style Editor
In order to make sure that the website can be accessed by any user without experiencing some issues, it should be developed well to the extent that it will still be readable and accessible even without the presence of styles. You can actually see the appearance of a website that has no style being used by disabling the styles that can be found on the developer tools. This is where Style Editor tool extremely helpful.
7.Eyedropper
This Firefox developer tool is actually a color picker tool that is built in on the Firefox browser. In accessing this useful tool, the only thing you need to do is click the “Toolbox Options”. After clicking it, you will then see the “Available Toolbox Buttons” option. Under that section is the “grab a color from the page” checkbox where you can see the Eyedropper tool.
8.Disable JavaScript
Coding a website is always a great practice in order to have good screen reader compatibility. The javascript-disabled environment must not hinder the functionality of the website. Hence, in order for you to know that the site is in excellent functionality, the Disable JavaScript tool from Firefox can be very helpful for you to use. You will know if your current session can be affected.
9.Browser Styles
This Firefox developer tool comes in two kinds. This is the default browser style and the browser-specific style. The former is the one that is assigned to every single element, while the latter is the one that has browser prefix. If your stylesheet has override issues, these can be easily detected by just looking at your browser styles. If there is an existing browser specific style, you can also notice it easily through this tool.
10. 3D View
Layout problems may come your way, especially if you are making a layout of your specific layout. This may not be that serious problem, but there should be a good solution for this. This is actually where 3D View Firefox developer tool comes into play. You can surely see the webpages in a 3D view through this tool.
Controlling the 3D view
| Function | Keyboard | Mouse |
|---|---|---|
| Zoom in/out | + / – | Scroll wheel up/downM |
| Rotate left/right | a / d | Mouse left/right |
| Rotate up/down | w / s | Mouse up/down |
| Pan left/right | ← / → | Mouse left/right |
| Pan up/down | ↑ / ↓ | Mouse up/down |
| Reset zoom level | 0 | Resets the zoom level to the default |
| Focus on selected node | f | Makes sure the currently selected node is visible |
| Reset view | r | Resets zoom, rotation, and panning to the default |
| Hide current node | x | Makes the currently selected node invisible; this can be helpful if you need to get at a node that’s obscured |
If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.