StyleSpy — CSS & State Inspector

About

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).