StyleSpy — CSS & State Inspector

Description

Inspect CSS of static, hidden and dynamic elements. Freeze hover/focus states, reveal ghost DOM, track mutations. StyleSpy is a CSS and state inspector for developers and QA engineers. One click captures every element on the page — including the ones other tools miss. Unlike single-property pickers, StyleSpy reads the WHOLE page at once and shows each element's computed colour, background, font family/size/weight, line-height, spacing, alignment, and box model — then hands you copy-ready CSS selectors and XPath for Selenium, Playwright, and Cypress. FEATURES • Capture Page — list every element with its computed CSS, exportable to CSV / JSON. • Full table — a wide, sortable, column-toggleable spreadsheet of the whole capture. • Freeze (Ctrl/Cmd+Shift+F) — lock the current hover/focus/active state and hold CSS tooltips and menus on screen so you can inspect them. A 3-second countdown gives you time to open a menu first. • Force State — re-apply a page's own :hover/:focus/:active rules to any selector, no pointer needed. • Ghost DOM — find and reveal elements hidden via display:none, visibility:hidden, opacity:0, or zero-size (closed modals, dropdowns, SR-only text, tracking pixels). • Mutations — a live feed of DOM changes, with break-on-mutation to freeze the instant a popup opens. • Locator health — grades every element's locator strong / class / fragile and shows a "% automatable" score, so you can spot UI that lacks test hooks. • WCAG contrast check with an AA pass/fail flag. PRIVACY StyleSpy runs entirely in your browser. No analytics, no telemetry, no tracking, and no network requests — your data never leaves your device. Requires Chrome 114+ (Side Panel API).

Details & SEO