Firefox DevTools

A curated selection of the Firefox DevTools documentation.

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 dedicated documentation.

Quick Start

To get into the DevTools NOW:

1. All OSes, via the mouse: right-click anything in any tab you have open and choose Inspect.
2. you can also use hotkeys:
   • not macOS: Ctrl+Shift+I
   • macOS: Cmd+Shift+I

Web Console

There are tons of helpful tabs in the DevTools. The first is the Inspector which is often the first part to be useful in CS 343. In addition to changing tabs within the DevTools to show other tools, while you’re in any of the DevTools tabs, you can also press Esc to toggle the Web console into/out of view.

Filtering Output in the Web Console

It can be helpful to reduce the noise in the logs, so the DevTools support excellent filters.

I can’t print!

If you mis-click or forget 🤦‍♂️ that you’ve previously applied a filter on your Web Console output, it can take a minute to realize why “print” (console.log) suddenly stopped working!? Simply remove any category filters and any text filters you may have applied.

Configuring DevTools

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

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.

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.

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