Applications Coding Design

Two more Firefox Dev Tools tips for inactive CSS and tracking changes you make

If you spend a fair amount of your time in your browser’s page inspector examining and tweaking CSS, then you’ll probably find these two sets of features in the Firefox Page Inspector to be really helpful.

Track changes you make

Firefox Developer Tools offers a great way to track CSS changes we make while testing CSS solutions for users. Here’s a terrific video that explains how to use this awesome tool:

You can also find information about this in the MDN documentation, here.

Identify and understand inactive CSS

I came across another useful feature of the Firefox Page Inspector. From Firefox 70 (launched in the last few days), you can now see not only which CSS code is inactive, but also why 😲. Here’s an example:

I haven’t encountered this in practice just yet, but I can already see the explanations to be enormously useful. The links in the pop-ups will take you to the excellent MDN web docs for more information.

You may also want to watch this video explanation too:

Both of these sets of features are really useful!

By Paul

Enthusiast, writer, Happiness Engineer at Automattic. I take photos too. Passionate about my wife, Gina and #proudDad.

One reply on “Two more Firefox Dev Tools tips for inactive CSS and tracking changes you make”

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.