CSS Inspector

Tracking since Apr 4, 2026.

Changelog

• May 2, 2026
  description

  ▎ English:
  
    ▎ CSS Inspector is a Chrome extension for designers and developers who need to quickly verify CSS implementation against design specs.
  
    ▎ Why install CSS Inspector?
  
    ▎ - Instantly inspect any element's CSS properties with a visual box model overlay showing margin, padding, border, and content areas
    ▎ - Match CSS values to your team's design tokens — import your design system JSON and see token names like "color.primary" instead of raw hex codes
    ▎ - Take QA notes directly on the page — click any element, leave feedback, and export all notes as Markdown for easy handoff
    ▎ - Supports light and dark themes, resizable and draggable panel, keyboard shortcuts for fast navigation
    ▎ - No developer tools knowledge required — designed for designers to perform design QA independently
  
    ▎ Perfect for design QA workflows where designers need to verify that implemented UI matches the intended design system tokens and spacing.
  
    ▎ 한국어:
  
    ▎ CSS Inspector는 디자이너와 개발자가 CSS 구현을 디자인 스펙과 빠르게 비교 검증할 수 있는 Chrome 확장 프로그램입니다.
  
    ▎ 왜 CSS Inspector를 설치해야 하나요?
  
    ▎ - 요소에 마우스를 올리면 margin, padding, border, content 영역이 즉시 시각화됩니다
    ▎ - 팀의 디자인 토큰 JSON을 import하면, hex 코드 대신 "color.primary" 같은 토큰 이름으로 바로 확인할 수 있습니다
    ▎ - 페이지 위에서 직접 QA 노트를 작성하고, Markdown으로 내보내 개발자에게 전달할 수 있습니다
    ▎ - 라이트/다크 테마, 리사이즈, 드래그 이동, 키보드 단축키를 지원합니다
    ▎ - 개발자 도구 지식 없이도 디자이너가 독립적으로 디자인 QA를 수행할 수 있습니다
  
    ▎ 구현된 UI가 의도한 디자인 시스템 토큰과 간격에 맞는지 검증해야 하는 디자인 QA 워크플로우에 최적화되어 있습니다.

  Inspect any element. See the design token behind it — not just raw CSS values.
  
  CSS Inspector is a lightweight browser tool for designers and developers who work with design systems. Upload your team's token JSON once, and every CSS property is instantly mapped to its token name.
  
  Why CSS Inspector?
  
  ✅ One-click inspection — Hover any element to see its layer hierarchy and DOM structure. Click to view all CSS properties, grouped by category.
  
  ✅  Design token mapping — Upload your design system JSON and CSS variables are automatically resolved to token names. No more guessing which token a color or spacing value belongs to.
  
  ✅  10 CSS categories — Colors, Typography, Spacing, Border Radius, Borders, Shadows, Layout, Size, Effects, Scroll — all grouped and searchable.
  
  ✅  QA notes on elements — Click any element to pin a note directly on it. Markers stay visible while the panel is open. Add follow-up replies to keep context.
  
  Get Started for Free
  All features are available at no cost. Install, click the toolbar icon, and start inspecting.
  Whether you're reviewing a design handoff, auditing token adoption, or leaving QA feedback — CSS Inspector keeps everything in one place, right in the browser.

• May 2, 2026
  host_permissions

  https://script.google.com/

  https://script.google.com/*, https://script.googleusercontent.com/*

Permissions & access

Permissions

activeTabstorage

Host access

https://script.google.com/*, https://script.googleusercontent.com/*

Screenshots