Explore Firefox developer tools

Being a “developers friendly” browsers. Firefox aims to provide as many tools as possible to make life healthier for developers file. Healthier in the sense that developers get to do their job effectively and deliver the product on time. Freeing up more time to do stuffs like exercising, spending time with family or planting trees.

This article will explore the developer tools available in the Firefox standard browser. The developer tools are there to assist web developer to examine, edit and debug HTML, CSS and JavaScript. If you need more advance tools and features, do check out Firefox Developer Edition Browser.

Accessing the developer tools.

Let's face it, we developers just want to get things done fast and usually the most common developer tool that we use is the “Inspect Element” tool.

However, Firefox do offer a variety of developer friendly tools that can do magic such as :

1. Execute JavaScript

There are times when we just want to write and test a line or two of JavaScript and see how it executes on a page. Firefox's Scatchpad allows you do to just that. Click the ☰ icon on the top-right corner, then click Developer and scroll down to Scratchpad or use the keyboard shortcut Shift + F4 to access Scratchpad.

2. See how webpage behaves in different screen sizes

Gone all the days when web developers only need to worry about fitting their web page to a single display resolution. Web pages need to be responsive to different screen sizes and you can test a web page responsiveness by using the Responsive Design View tool. Click ☰ > Developer > Responsive Design View or with the keyboard shortcut : Ctrl + Shift + M.

Toggle the screen resolution to view how the web page response.

3. Check security setting of web page content

There are times when you want to know encryption protocol that the elements on the web page are encrypted with or which elements caused the page HTTPS to load insecure content . There is a Security tab under the ☰ > Developer > Network or with the keyboard shortcut : Ctrl + Shift + Q that allow you to do just that. The secure content are marked with green locks and insecure content are marked with lock with red stripe.

4. Disable JavaScript

Want to see how a web page looks like without JavaScript? Firefox allows you to disable JavaScript for the current session. To disable JavaScript, click "Toolbox Options", look under "Advanced settings" and tick the "Disable JavaScript*" checkbox.

5. View a webpage in 3D mode

One of my favourite developer tool is Firefox ability to render a web page in 3D mode. Viewing in 3D mode helps a lot in troubleshooting layout problems. It is not enable by default. To enable it, you need to click "Toolbox Options", look under "Available Toolbox buttons” and tick “3D View”.

6. Pick color HEX code off web page

As web developers, we surf a lot of web pages to get inspirations and there are times we want to take a look at a color HEX code from a webpage with a very unique color scheme. Firefox has the “Eyedropper” tool that will allow web developer to pick up the color HEX (hexadecimal) value off the webpage.

There are more awesome developer tools available on Firefox that are not listed here. You can check out more features at https://developer.mozilla.org/en-US/docs/Tools

Reference :

https://developer.mozilla.org/en-US/docs/Tools