Search code examples
firefoxfirefox-developer-tools

Where is the "Paint Flashing Tool" in Firefox ~84?

Many older blog posts and the MDN documentation mention that Firefox has a debug tool to highlight painted areas.

I'm running Firefox version 84, and I cannot find this brush symbol anywhere:

enter image description here

Am I overlooking something, or does the tool no longer exist in recent Firefox versions?

Solution

  • For more recent versions of Firefox (~96), see this answer. TL;DR - Paint flashing is gone since the move to WebRender, where paint layers is not a concept.

    The rest of this answer is true for Firefox ~84, as asked in this question.

    It still exists but you first have to enable it via the settings. Inside the DevTools press F1 or click the three dots at the right side of the tools and click Settings.

    Enabling the toolbar button for the paint flashing tool

    Once you've enabled it, a new toolbar button with a stylized paint brush icon will appear in the toolbar. Clicking it, enables the paint flashing tool.

    Though note that this tool doesn't seem to work when WebRender is enabled (new rendering engine in Firefox), see bug 1612922.