Nowadays, web-based application is becoming more powerful and robust. The browser is the most important main entry point to access that application. So the browser is the place to be our home. When we develop, design or browsing, it is the most accessible thing for us. Firefox is one of the best browsers by Mozilla. They have lots of developer tools and a dedicated developer edition browser with a lot of features and tools for the developer. We do believe you may like the following handy Firefox Developer Tools, those are really awesome just take a deep look.
To view the settings pane of the Developer tools, open any of the developer tools then click on the Settings button, see the below image –
You can also get it via pressing the F1 key or press Ctrl+Shift+O, for Mac OSX use Cmd button instead of Ctrl. The settings pane looks like the below image –
Grab Your Screenshots with CSS Selectors
Using CSS selectors you can take screenshots of individual elements. Just press the menu button and navigate to Developer Toolbar via Developer option or menu items. Shortcut key Shift + F2. The toolbar will be appearing at the bottom of the page. Just type the following keyword and press Enter to take your screenshots of individual elements.
screenshot --selector #your_css_id_or_class_name_with_a_hash_or_dot
Click the Toolbox Options and check the Take a full-page screenshots checkbox under the Advanced settings to make it appear on your developer tools window.
View Rulers – Horizontal and Vertical
The most useful tool is a ruler, Firefox has a ruler to display both directions. To view the ruler just press the menu button and navigate to Developer Toolbar via Developer option or menu items. Shortcut key Shift + F2. The toolbar will be appearing at the bottom of the page. Just type rulers keywords and press Enter to enjoy the ruler functionality with pixel units on the page.
Click the Toolbox Options and check the Toggle rulers for the page checkbox under the Available Toolbox Buttons to make it appear on your developer tools window.
Select and Use Colors From the Page
The built-in color picker called Eyedropper to get the color code you want from the page. Just navigate to Eyedropper via Developer option or menu items to enjoy this functionality.
Pick the Colors From the Page using Firefox Developer Tools. Just navigate the Tools menu and hover the Web Developer option, a drop-down menu will appear, then you just click on the Eyedropper.
Browser Style Viewer
You can access the Browser Styles by navigating the Inspector via Developer option or click the menu icon and then click the Computed tab in the right section. Also, have to check the checkbox called Browser Styles.
Inspector tab will also be accessible through the shortcut Ctrl + Shift + C.
CSS Style Hiding
Style Editor will also be accessible through the shortcut Shift + F7.
Test Your Web Page in Various Screen Size
For testing you page, Responsive Design View is the most important tools to test your page responsiveness. Just navigate to Responsive Design Mode via Developer option or click by menu > Web Developer > Responsive Design Mode.
Responsive Design View will also be accessible through the shortcut Ctrl + Shift + M.
Request Response Preview for HTML Content
The developer tools have an option to preview your HTML content response to a request. This is a great tool for the developer and helps to preview the 302 redirections and check any sensitive information has been rendered or not. Just navigate to Network via Web Developer option or click Menu Icon > Web Developer > Network and reload the page and click the Response tab for the specific request you want to show.
The Network Tool will also be accessible through the shortcut Ctrl + Shift + E.
Scratchpad will also be accessible through the shortcut Shift + F4.
Click the Toolbox Options and check the Scratchpad checkbox under the Default Developer Tools to make it appear on your developer tools window.
Firefox developer edition is most powerful browser and it has so many developer tools for the developer. We just cover some of them for you in this article. You can find more and more from its official site.
Thanks for being with the cssanimation.io team.