BrowserTricks Logo
All ToolsTricksFeatures
PDF ToolsImage ToolsVideo ToolsSpreadsheetText ToolsData ToolsEncodeCryptoWeb ToolsConvertersCode UtilsNetworkCSS GenSpecialTricks

    Visual CSS Coverage

    Identify exactly which lines of CSS aren't being used on the current page load.

    Power-User Tips

    Curated tricks for Chrome, Edge, Brave, Vivaldi & Opera GX.

    Hidden Features

    Discover experimental flags, DevTools hacks, and productivity boosters.

    Back to Developer Tools

    Visual CSS Coverage

    ChromeEdgeBrave

    Inspection & Analysis • optimization

    What It Does

    Identify exactly which lines of CSS aren't being used on the current page load.

    Quick Summary

    Record a session in the Coverage panel.

    Step-by-Step Instructions

    1. 1

      Press `Cmd+Shift+P` > type 'Coverage' > Select 'Show Coverage'.

    2. 2

      Click the 'Instrumenting coverage' icon (reload circle).

    3. 3

      Red bars in the CSS gutter show unused code that can be stripped for speed.

    More in Inspection & Analysis

    3D Visual Stack (Z-Index) View

    Debug 'hide-and-seek' UI issues by visualizing the DOM stacking in a 3D space.

    Persistent Edits with Local Overrides

    Save CSS and JS changes you make in DevTools permanently to your desk.