Useful Firefox Developer Tools

0

Firefox being “developer’s browser” has many great tools to help make our work easier. You can find more on its tool collection on the Firefox Developer Tools webpage and can also try their Developer Edition Browser which has more features and tools that are being tested.

For this post, I’ve listed 10 handy tools you might like from its developer tools collection.

1. View horizontal and vertical rulers

Firefox has a ruler tool that displays both horizontal and vertical rulers with pixel units on the page. The tool is useful for arranging your elements across the page.

wikiwind

To access rulers through the menu, go to: ☰ > Developer > Developer Toolbar (shortcut: Shift + F2). Once the toolbar appears at the bottom of the page, type rulers and press Enter.

To make this appear on the developer tools window, Go to “Toolbox Options”. Under the “Available Toolbox Buttons” section, check the “Toggle rulers for the page” checkbox.

2. Take screenshots using CSS selectors

Although the Firefox toolbar lets you take screenshots of the full page or visible portions, in my opinion the CSS selector method is more useful for capturing screenshots of individual elements as well as for elements that are visible on mouse-hover only (like menus).

WIKI

To take screenshots through the menu, go to ☰ > Developer > Developer Toolbar (shortcutShift + F2). Once the toolbar appears at the bottom of the page, type screenshot --selector any_unique_css_selector and press enter.

To make this appear on the developer tools window: click “Toolbox Options” and under “Available Toolbox Buttons” section, check “Take a fullpage screenshot” checkbox.

3. Pick colors from web pages

Firefox has a built-in color picker tool by the name of “Eyedropper”. To access the “Eyedropper” tool through menu go to ☰ > Developer > Eyedropper.

colors

To make this appear on the developer tools window: click “Toolbox Options” and under “Available Toolbox Buttons” section check “Grab a color from the page” checkbox.

4. View page layout in 3D

Viewing webpages in 3D helps with layout problems. You’ll be able to see the different layered elements much more clearly in 3D view. To view the webpage in 3D, click the “3D View” tool button.

modernized

To make this appear on the developer tools window, click “Toolbox Options” and under “Available Toolbox Buttons” section check the”3D View” checkbox.

5. View browser style

Browser Styles consist of two types: the default style a browser assigns for every element, and the browser-specific styles (the ones with the browser prefix). By taking a look at the browser styles you’ll be able to diagnose any override issues in your stylesheet and also come to know of any existing browser specific styles .

ff-browser-style

To access “Browser styles” through menu, go to ☰ > Developer > Inspector. Then click the “Computed” tab in the right section and check the “Browser styles” checkbox.

You can also open the “Inspector” tab through the shortcut Ctrl +Shift + C and then accessing “Browser styles”.

6. Disable JavaScript for current session

For best practice and screen reader compatibility it is always advised to code any website in such a way that its functionality is not hindered in a javascript-disabled environment. To test for such environments, you can disable the JavaScript for the session you’re working in.

JavaScript

To disable JavaScript for current session click “Toolbox Options” and under “Advanced settings” section check the “Disable JavaScript*” checkbox.