Firefox DevTools

A curated selection of the Firefox DevTools documentation.
Tags:
Categories:

  2 minute read  

Overview

Most browsers (Firefox, and the lessers too) have some built-in tools to support web developers. Firefox’s are called “DevTools” and they’re pretty great. The most comprehensive documentation for Firefox’s DevTools is in the MDN’s What are browser developer tools?.

Configuring DevTools

The default settings are pretty good, but you may want to make a few of the changes I use.

screenshot showing where to find the devtools settings
to find the devtools settings, have the devtools open (e.g. via right clicking in the browser and choosing Inspect), and then click the ellipsis (`...`), and then choose Settings

Rulers

Sometimes it can be helpful to see the dimensions of the viewport.

screenshot of the devtools settings for rulers
I configure the devtools to have a button so that I can easily toggle these rulers on and off (annoyingly, they don't remember to stay on if the page refreshes as it might if I'm developing locally and using e.g. the Live Server extension).

HTTP Cache

Some of the code we write in developing for the clientside could be cached by the browser. Generally, that’s great, but when we’re actively working on a page and the browser stops showing us the most up-to-date view of it, it can be confounding.

screenshot of the devtools settings for disabling caching
Tell the DevTools to disable caching when they're open.

Responsive Design Mode

Firefox’s DevTools have a great Responsive Design Mode that facilitates you in testing how your page will look on different devices (e.g. with different known viewport sizes, network speeds, etc.).