CSS Class Highlighter

Inspect and highlight CSS classes. Hover to inspect, list classes, and highlight elements.

CSS Class Highlighter helps developers, designers, and QA quickly understand and debug page structure by revealing the CSS behind any element—without opening DevTools. - **What it does** - Turn on Inspect Mode, hover any element, and instantly see its tag, id, classes, and key computed styles with color swatches. - Open the Class List panel to view a searchable inventory of all classes on the page with usage counts. Highlight matching elements on hover, copy selectors, or export the list to JSON. - Customize highlights (outline or overlay), color, thickness, and duration to suit your workflow. - **Why install it** - **Faster debugging**: Identify the right class in seconds and copy a ready-to-use selector. - **Design audits**: See class usage patterns, spot utility class overuse, and export data for reviews. - **QA efficiency**: Highlight all elements with a class to verify styling and state across the page. - **Works everywhere**: Runs on most websites (excludes Chrome internal pages for security). - **Key features** - **Inspect Mode**: Hover to see tag/id/classes, computed styles, color swatches, copy selector, and scroll-to-element. - **Class List panel**: Counts, search, highlight-on-hover, copy `.class`, export JSON. - **Noise reduction**: Optionally hide likely “hashed”/generated classes; tune filter level. - **Per‑site settings**: Positions, auto-open, ignored classes, minimum occurrence threshold; synced via Chrome Sync. - **Quick access**: Toolbar popup, context menu, and keyboard shortcuts. - **Accessible UI**: Keyboard-friendly with ARIA labels and high-contrast styling. - **Keyboard shortcuts** - Toggle Inspect Mode: Ctrl+Shift+I - Toggle last highlight: Ctrl+Shift+H - Open popup: Ctrl+Shift+U - **Privacy and permissions** - No tracking or analytics. Settings are stored locally or in Chrome Sync for your account. - Minimal permissions: `activeTab`, `storage`, and `contextMenus`. Content scripts run on the sites you visit to enable highlighting. - **Who is it for** - Frontend engineers, UX/designers, QA, and anyone inspecting CSS on real pages. Tip: Highlighting is unavailable on Chrome internal pages (e.g., chrome://) and the Chrome Web Store.