🛰️
Side Panel Mission Control
Launch tracking with a single click, access aggregated selectors, and copy-ready change bundles without leaving DevTools.
Live now
Chrome Side Panel Extension
Monitor and capture live CSS changes directly in Chrome
CSS Radar gives developers a command center for styling experiments. Snapshot the DOM once, then stream and aggregate every inline style update with precise selectors and a polished side panel experience.
Chrome Side Panel API
MutationObserver
Realtime CSS Diffing
MV3
Built for experimental design work
🎯
Selector Precision
CSS Radar escalates specificity from IDs to classes, data attributes, and tag fallbacks. Every entry is copy-ready and unambiguous.
⚡
Realtime CSS Diffing
Inline styles and updated style tags are diffed live. Removed properties are flagged, new declarations surface instantly.
Unified change log + aggregated view
Monitor raw updates while CSS Radar composes an organized summary for export. The copy button delivers a ready-to-share stylesheet of the final state.
#hero .cta {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
box-shadow: 0 18px 45px rgba(59, 130, 246, 0.35);
/* border: removed */
}
Perfect companion for design sprints, live workshops, and production debugging.
- ◆Start/stop monitoring without reloading the tab — MutationObserver handles the stream.
- ◆Clipboard-ready aggregated dump for commit descriptions, design handoff, or quick rollbacks.
- ◆Extensible architecture: service worker, modular content script, and Side Panel API view layer.
Contribute, extend, remix
Clone
Get the code and start exploring.
git clone https://github.com/dali-trabelsi/CSS-Radar.git
cd CSS-Radar
Build & Test
Load unpacked extension, iterate in Chrome DevTools.
- ∙ Watch inline style changes
- ∙ Validate selector specificity
- ∙ Propose UI/UX enhancements