CRX id
kcdnklhjaihnhkolaeclncaeiknocacc
kcdnklhjaihnhkolaeclncaeiknocacc
Description from extension meta
A Chrome extension to inspect and analyze design tokens and hard-coded CSS values on webpages.
Image from store
Description from store
Token Inspector is a Chrome extension designed for developers and designers to inspect and analyze design tokens and hard-coded CSS values on any webpage. It helps ensure design system consistency by identifying violations in real time, with a focus on performance and usability.
Key Features
Detects Hard-Coded CSS Values: Instantly scans webpages for hard-coded colors, typography, spacing, and border values that should use design tokens.
Organized by Category: Groups violations by design system category (Color, Typography, Spacing, Border) for clear review.
Minimal UI: Clean, easy-to-use interface with tabbed navigation and detailed violation information.
Chrome DevTools Panel: Integrates directly into DevTools for advanced inspection, element highlighting, and inline CSS editing.
Consistent Scanning Logic: Uses a shared scanning engine for both popup and DevTools, ensuring reliable results everywhere.
Performance Focused: Fast, efficient scanning with minimal impact on page performance.
Comprehensive Test Files: Includes a variety of test pages to verify detection accuracy and edge cases.