Firefox Dev Tools 3 Panel Web Inspector – HTML + CSS + Extra options

Beginner friendly guide to Firefox Dev Tools

I want to show you two really quick things about the Firefox Dev Tools that are little tiny icons that you might not notice, but you definitely want to know about.

I’m here, on a random web page, working on the CSS, HTML and right there, you’ll see that there’s this little icon, that you can click, that toggles the Firefox Dev Tools to switch from having two panels to having three panels.

Toggle on 3 pane inspector

Now there’s a good chance when you downloaded Firefox, and you opened it for the first time, it will open with three panels, but in case if it didn’t, or in case you switched back to two and you didn’t realize it, this is where the button is.

You click this little button, and it goes from having HTML and CSS to having HTML and CSS and other options.

And these other options include layout tools, a panel that gives you the computed values for everything in CSS, the changes tab lets you know when things have changed or keeps track of your changes, the Font inspector gives you a way to adjust and change fonts and mess around with variable fonts, (if you’re using a variable font) and the Animations inspector (if you have animations on the page) is a place where you can see exactly what’s going on with animations.

I think it’s really handy to be able to see the HTML in one panel, CSS in another panel and to see other things about CSS in the third panel.

The other thing I wanted to make sure you know about is a little button for messing around with print style sheets.

Toggle print media simulation for page

You can see in the above image , there’s a little icon, that looks like a piece of paper and it makes the browser think that it’s about to print a piece of paper.

It will turn on any media queries that you have set for Print, it will activate the kind of rendering engine behavior that gets activated whenever someone goes to actually print the page.

So it’s a quick way, if you’re styling print style sheets, you can check print media simulation of the page, and not have to actually find a printer and print it out.

Highlighted buttons, navigation links will be removed after clicking on print media simulation

You can see in above image which displays a MDN CSS grid layout webpage, the buttons, navigation links (highlighted in the image above) is not needed when you’re printing it out.
Because None of these buttons will actually do anything on a piece of paper.
Below image displays the webpage after clicking on tiny button to toggle print media simulation

Result after clicking on print media simulation

That’s one of the things you want to do, when you have to print style sheets, is to remove things that you don’t necessarily need.

If this post was helpful, please like and share below to show your support !