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.

Firefox developer tools screenshot

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.

inspect element with Firefox

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.

Firefox scratchpad in action

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.

test web page responsiveness

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.

firefox inspect HTTPS/SSL element

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.

steps to disable JavaScript on Firefox current session

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”.

enable 3D viewing on firefox

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.

Firefox eyedropper in action

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 :


By AdamNg

IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.