Exploring Firefox DevTools

2026-02-15 / blinry / CC BY-SA 4.0 / tech

In the beginning of 2026, I spent some time exploring the Firefox Developer Tools!

Because usually, when I open them, I want to do some specific thing very quickly, so I never intentionally tried to learn about all the things the DevTools can do.

It was a fun exercise. Here’s some cool things I found!

Pop out the Toolbox window

First, a really convenient thing: You can “pop out” the Toolbox into a separate window!

To do this, open the Toolbox (using F12), click on the ellipsis menu on the right, and select “Separate Window”.

I like this much better than the default “docked” modes, especially when using a scrolling window manager like niri !

Screenshot of Firefox' DevTools toolbox. I show the described menu.

Summoning the Inspector using a shortcut

Let’s start with the “Inspector”, which shows you the tree of HTML elements.

You can directly summon it, and inspect a specific element on your current site by pressing Ctrl+Shift+C (Cmd+Opt+C on macOS), and then clicking your element.

This is similar to right-clicking the element, and pressing Q, but I like Ctrl+Shift+C a bit better because it will give you a live preview of which node you are picking!

All tree views in the DevTools have pretty good support for keyboard shortcuts!

You can use arrow up & down to highlight different elements, and arrow right & left to unfold/fold the elements.

You can find a full list of keyboard shortcuts in the DevTools documentation.

Visualize flexboxes

All elements with “display: flex” have a little “flex” pill icon next to them. If you click it, it will highlight the structure of the flexbox, and keep it highlighted as you interact with it!

I highlight the leftmost column in the Mastodon UI using that pill.

Force light/dark mode

This is probably common knowledge, but I wasn’t aware of it so far:

The sun & moon icons in the “Rules” tab allow you to quickly force the site into light mode/dark mode! ☀️🌙

I turn Mastodon to dark mode.

Open the Console in a split view

You can open the web console in a split view by pressing Esc!

This is the same console as in the “Console” tab. And this works in any tab, not just the Inspector! Super useful if you wanna see more things at once!

Highlight specific elements

In the CSS pane, there’s this little dashed box icon after CSS rules. Click it to permanently highlight the matching elements on the page!

Here, I highlight a specific <p> element. The colors that are used correspond to the colors in the “Layout” tab, and show you the size of the margin, border, padding, and content area.

That paragraph element is highlighted like I describe.

Highlight all elements matching a CSS rule

If you click on the dashed box after a more general rule, you’ll get all matching elements highlighted.

Here, I highlight all <p> elements of that toot.

All four are now highlighted.

Jump between search results in the Inspector

In the Inspector, Ctrl+F jumps to the search box that allows you to find a tag or some content.

I was always annoyed that F3 doesn’t go to the next result. Turns out that the shortcut for that is:

Enter!

I search for "cool", and show the "Next match" button.

Show changes you’ve made to CSS rules

As you start modifying the CSS rules, and arrive at something you like, you can switch over to the “Changes” tab to find a summary of what you changed!

You can also copy all of that into your clipboard, and then integrate it into the original CSS that you’re working on!

Until now, I always made changes in my source CSS files directly, and used some auto-refresh tool to preview it. But this workflow of modifying it directly, and copying out the required changes might be a bit smoother!

I've changed the font of Mastodon toots to a fancy handwritten one, and one color go a green. The Changes tab summarizes that.

Quickly query elements in the Console

Next, I looked at the Console.

I learned that it has some predefined helper functions! You can use $(selector) as an abbreviation for document.querySelector(selector).

Similarly, $$(selector) is short for document.querySelectorAll(selector)!

Even though this reeks of jQuery, I think these are fantastic in this context and I might use them a lot!

I run $$("p") to output all <p> elements on the page.

Refer to the last expression, or to the inspected element

There are more “Console Helpers” in firefox :

$_ is a shortcut to the result of the last expression you executed, allowing you to do some neat step-by-step exploration.

And $0 refers to the currently-inspected element on the page.

I first get all <p> elements, then append exclamation marks to all of them using $_. Then, I add question marks to one specific <p> element using $0.

Copy text to your clipboard, or show an object’s keys

There’s a couple more, like copy(), which copies its argument to your clipboard, or keys(), an abbreviation for Object.keys().

If you ever forget these console helpers, you can run :help to open the page of the documentation that explains them!

I run :help, and the documentation of :help says it's a "delightful example of recursion".

Edit multiple lines of JavaScript in the Console

There’s a built-in multi-line editing mode! Press Ctrl+B to turn it on. Seems useful to write longer expressions.

This mode shares its history with the regular one-line mode.

I've written a longer piece of JavaScript to rotate all toots by a random amount, and run it in the multi-line editor.

But also, I learned that the one-line mode tries to guess whether your command is incomplete when you press Enter, and then allows you to type a second line.

You can force a new line using Shift+Enter.

I started writing an arrow function. Now my cursor is on the "second line".

Visualize CSS transforms

Ohh, the CSS pane helps you debug values of the “transform” property by showing you the box before and after the transformation!

I made a box be scaled up and translated to the side. The visualization shows both things.

Closing

That’s all cool things I found in the Firefox DevTools that day! Looking forward to check out the other tabs some other time.

It’s kind of eye-opening for me how many convenient things a tool like that has. So far, when I opened the Toolbox, I usually quickly wanted to get something specific done, and didn’t take the time to wander & explore…

This post has been adapted from this Mastodon thread.

Comments

You can add your comment to this post in the Fediverse! Alternatively, drop me a mail at mail@blinry.org.