CSS Inspector Pro

요소 하이라이트, CSS 상세 정보, 간격 측정 도구를 제공하는 CSS 인스펙터

🔍 CSS Inspector Pro — 웹 개발자를 위한 차세대 요소 인스펙터 크롬 DevTools보다 빠르게, 디자이너에게 공유하기 쉽게. 요소 위에 마우스만 올리면 모든 정보가 패널 한 장에 정리됩니다. ━━━━━━━━━━━━━━━━━━━━━━━━ ■ 주요 기능 ━━━━━━━━━━━━━━━━━━━━━━━━ 🎯 요소 하이라이트 마우스 hover로 파란 아웃라인 표시. 클릭하면 패널이 고정되어 다른 요소와 비교하면서 작업할 수 있습니다. 📐 Box Model 시각화 Margin(주황) / Padding(초록) / Content(파랑)을 색깔별 박스로 화면 위에 직접 그려서 간격을 한눈에 측정합니다. ⎘ 원클릭 복사 CSS 선택자, 개별 속성, 전체 스타일 블록을 버튼 하나로 클립보드에 복사. 코드 리뷰·디자인 핸드오프 시간이 절반으로. 🔍 Computed 스타일 검색 요소에 적용된 수백 개의 computed 속성을 알파벳 정렬하여 실시간 필터로 빠르게 찾습니다. ⌨️ 단축키 지원 ⌘+Shift+L (Mac) / Ctrl+Shift+L (Windows·Linux)로 어느 페이지에서나 즉시 활성화/비활성화. ━━━━━━━━━━━━━━━━━━━━━━━━ ■ 이런 분들께 ━━━━━━━━━━━━━━━━━━━━━━━━ ✓ 디자인 QA — 디자이너 시안과 실제 구현의 간격 차이 확인 ✓ 프론트엔드 개발자 — 다른 사이트 UI 분석 및 학습 ✓ 퍼블리셔 — CSS 디버깅과 빠른 속성 복사 ✓ UX 리서처 — 경쟁사 UI 패턴 캡처 및 기록 ━━━━━━━━━━━━━━━━━━━━━━━━ ■ 개인정보 보호 ━━━━━━━━━━━━━━━━━━━━━━━━ 본 확장 프로그램은 외부 서버로 어떠한 데이터도 전송하지 않습니다. 모든 분석은 로컬 브라우저 내에서만 수행되며, 사용자가 활성화한 탭에서만 작동합니다(activeTab 권한). ━━━━━━━━━━━━━━━━━━━━━━━━ ■ 권한 사용 목적 ━━━━━━━━━━━━━━━━━━━━━━━━ • activeTab — 현재 활성 탭에 인스펙터 주입 • scripting — 요소 분석 스크립트 실행 • clipboardWrite — CSS 속성 클립보드 복사 • storage — 활성 상태 기억 (탭별 on/off) ━━━━━━━━━━━━━━━━━━━━━━━━ ■ 변경 사항 (v2.0.0) ━━━━━━━━━━━━━━━━━━━━━━━━ • Manifest V3 마이그레이션 완료 • Spacing / Computed 탭 분리로 정보 밀도 개선 • 패널 고정(Pin) 모드 추가 — 비교 작업 편의성 향상 • 디자인 토큰을 GitHub 다크 테마 기반으로 통일