10 Tips about the Firefox Page Inspector
Tags: firefox, webdev, css, beginners
Published: 2020-05-03 21:42:59

---
description: A look at some features you might not know about the Firefox Page Inspector tool
---

Firefox is my browser of choice for anything involving web development. The developer edition comes with a plethora of tools and niceties which make working, with CSS especially, a breeze.

While everyone raves about tools like the fantastic Grid and Flex Inspectors, or the fonts and changes panels, I felt like there was a gap in my knowledge of the browser to use it to its full potential. So I embarked on a journey of reading all the entries about Firefox on MDN and found cool features which could enhance your development experience.

This is the first part of a series where we will take a look at each of the tools within Firefox.

For now we will focus on the Inspector tool, a best friend of mine.

## Shift-Click on the color swatch to change the displayed format

Color formats can be tricky to work with when making small changes for accessibility in particular. An HEX value doesn't tell us much about a specific color besides its hue, thankfully we can toggle between different formats right in the browser.

{% youtube UwA-GzLacL8 %}

If the color in question is used as a foreground color, the color picker menu also provides the contrast rating based on [WAI-ARIA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).

![Checking accessibility with the color picker](https://res.cloudinary.com/dannmyv80/image/upload/v1588540940/firefox_color-swatch--accesibility_auiqqy.gif)

## Move the location of Absolutely positioned elements

The joke about centering an element being difficult in CSS might not be longer true with all the introduction of flex and grid properties, but absolutely positioned elements can still be tricky to work with. 

You can go about nudging numbers, but why not do it optically? Clicking the target icon in the layout panel allows you to do just that.

{% youtube 0lpE99U0Hl8 %}

Talking about nudging numbers, you can use `Shift` + `Up` / `Down` to increment by a factor of 10, `Alt` + `Up` / `Down` to increment values by 0.1, and `Shift` + `Page up` / `Page down` to increment values by 100.

## Editing filters

Clicking on the gray and white swatch next to a `filter` property in the Rules View will open a filter editor displaying all the effects applied by that filter individually. You can also add, remove, reorder effects, and even *save* some for later using the drop-down menu at the bottom.

{% youtube nn494X0y-JI %}

[Grayscale Filter](https://codepen.io/grayghostvisuals/full/cgFGm)

## Editing timing functions

When defining an animation or a transition, the [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) might need some tweaks. In the past I would have to use a website like [this one](https://cubic-bezier.com) to define a better one and update my code before testing it again within the browser. 

Thankfully there is a tool in Firefox which allows you to set them directly by clicking the cubic Bézier swatch. You can decide to try modify the current curve or try one of the presets as a starting point. Neat, uh?

{% youtube _nt4dbwOD_s %}

## Monitoring animations

The animations panel is really useful when working with complex animations that involve a number of elements and properties.

Clicking on an element will open a bottom panel from which we can analyze the components of the running animation. Animation properties which are optimized through the compositor have a lighting bolt icon next to them while hovering on the animation. If they aren't, a message explaining the cause will appear instead.

If your CSS animations seem to stutter, or lack in smoothness, taking a look there might be a good idea.

{% youtube 6u1xwpC1prQ %}

## Restict matches when searching

It is sometimes helpful to search for a particular property name or rule in the Rules view to filter styles. By default, the search will highlight all the items containing the query. For example, if you wanted to look for the `flex` keyword, you'd obtain all results including `flex-direction` or `flex-flow`.

But what if you only wanted to highlight the `flex` shorthand property instead. You can surround the query with *backticks* to restrict the match. *Et voilà!*

## Toggling classes

Classes that have been assigned to an element can be quickly toggled using the `.cls` selector on top of the Rules view. It's so useful and easy to access, I don't know why I don't see it used often enough.

{% youtube -7owTWyWN_8 %}

## Manipulating Shapes

This feature is so awesome and complex that it would need an entire article to cover it. But it is just too good not to mention. 

Using the Shape Path Editor when using either the `shape-outside` or `clip-path` properties allows for easy creation of simple to complex shapes within your CSS.

{% youtube u9bDe3Bw0sA %}

[8 little videos about the Firefox shape path editor](https://blog.bitsrc.io/8-little-videos-about-the-firefox-shape-path-editor-96a12c7cd3b6)

## Quick referencing

I don't know about you but I only go to the computed panel when something is going very wrong in the cascade. Well, selecting an element in the Computed panel and pressing `F1` will open its reference page in MDN. How cool is that?

{% youtube f7PL9F1EDFE %}

## Re-using the element picker

Using the element picker `Shift + Cmd + C`, the default behavior exits the tool right after a single selection. 

{% youtube pzhEqnsUxB8 %}

It is possible to continue selecting elments by holding the Shift key. The tool will return to its default behavior once you let go of the key.

{% youtube s2rySZZPO8A %}

---

And that's it for today. Next, we'll talk about my other best friend, the console panel. 

I hope you found something useful, what's your favorite thing about the inspector tool that I haven't mentioned?