To access "Style Editor" through menu go to ☰ > Developer > Style Editor (shortcut: Shift + F7.
To remove any CSS style (inline, internal or external) applied on a webpage, just click on the eye symbol of the listed stylesheets in the "Style Editor" tab. Click it again to revert to the original view.
1. View horizontal and vertical rulers
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.
Firefox has a built-in color picker tool by the name of "Eyedropper". To access the "Eyedropper" tool through menu go to ☰ > Developer > Eyedropper.
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).
2. Take screenshots using CSS selectors
For this post, I’ve listed 10 handy tools you might like from its developer tools collection. I’ve also demonstrated what these tools can do with GIFs plus how to access them for quick reference.
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.
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.
3. Pick colors from web pages
To test a webpage for its responsiveness use the "Responsive Design View", which can be accessed by ☰ > Developer > Responsive Design View or with the shortcut: Ctrl +Shift + M.
4. View page layout in 3D
To make this appear on the developer tools window: click "Toolbox Options" and under "Available Toolbox Buttons" section, check "Take a fullpage screenshot" checkbox.
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.
5. View browser style
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.
You can also open the "Inspector" tab through the shortcut Ctrl +Shift + C and then accessing "Browser styles".
To make the "Scratchpad" tool button appear on the developer tools window for quick use: click "Toolbox Options" and under the "Available Toolbox Buttons" section check the "Scratchpad" checkbox.
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.
To make the "Responsive Design Mode" tool button appear, click "Toolbox Options" and under the "Available Toolbox Buttons" section, check "Responsive Design Mode" checkbox.
7. Hide CSS style from the page
To access "Preview" through menu go to ☰ > Developer > Network (shortcut: Ctrl +Shift + Q. Then open the webpage of your choice or reload the current page, click on the desired request (with HTML response) from the list of requests and click the "Preview" tab in the right section.
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.
8. Preview the HTML content response to a request
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.
9. Preview webpage in different screen sizes
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 .
Firefox developer tools has an option to preview the HTML content type responses. This helps the developer to preview any 302 redirects and check whether any sensitive information has been rendered or not in the response.
To make this appear on the developer tools window, click "Toolbox Options" and under "Available Toolbox Buttons" section check the"3D View" checkbox.