Search code examples
firefoxdeveloper-toolsfirefox-developer-tools

How can I change the highlighting Firefox Dev Tools uses to show spacing around an element?

Firefox developer tools shows spacing on a web page (e.g. padding/margin) to be a coloured outline. I find this really hard to actually see and wonder if it is possible to revert to the "block style" that Firefox developer tools used to use?

I know Chrome uses this "block style" but I would prefer to continue developing in Firefox.

Firefox developer tools: enter image description here

Chrome developer tools: enter image description here

Solution

  • The display of the "block style" aka the box model highlighter is controlled via the prefers-reduced-motion media query since Firefox 111.

    That means, if you have your OS settings set to reduce or avoid motions, the highlighter is only shown as an outline around the element.

    E.g. in Windows 11, you can change that setting by going to Settings > Accessibility > Visual effects and toggle the setting Animation effects.

    Further note, that in Firefox 113 the normal box model highlighters were brought back and an option "Use simpler highlighters with prefers-reduced-motion" was introduced in the Settings panel (accessible via F1 or the DevTools main menu > Settings) to toggle between the two highlighter versions.

    Option "Use simpler highlighters with prefers-reduced-motion" within the Settings panel