CSS 검사기

레이아웃 문제를 디버깅하든, 마음에 드는 디자인을 리버스 엔지니어링하든, 간격과 타이포그래피 값을 빠르게 확인하든, CSS Inspector는 깔끔한 플로팅 패널에서 필요한 모든 것을 제공합니다. 브라우저 DevTools와 달리 화면을 방해하지 않습니다 — 패널이 도킹되지도, 뷰포트 크기가 조정되지도 않습니다. 그저 마우스를 올리고, 클릭하고, 검사하면 됩니다. 이 도구는 단순히 작성된 CSS가 아니라 계산된 스타일(브라우저가 실제로 렌더링하는 값)을 보여줍니다. 즉, 상속, 우선순위, 캐스케이딩이 모두 반영된 실제 값을 볼 수 있으며, 이는 사용자가 화면에서 보는 것과 정확히 같은 값입니다.

요소를 검사해도 페이지 자체의 리플로우나 리페인트가 발생하지 않으므로, 스크롤 위치나 애니메이션, JavaScript 상태를 흐트러뜨릴 걱정 없이 자유롭게 탐색할 수 있습니다. ::before와 ::after 같은 가상 요소도 지원됩니다 — 부모 요소에 마우스를 올리면 패널이 생성된 콘텐츠의 스타일을 요소 자체의 스타일과 별도로 보여줍니다. CSS 커스텀 프로퍼티(변수)는 최종 계산된 값으로 해석되지만, 패널은 그 값을 만들어낸 변수 이름도 함께 보여주므로 단순한 픽셀 숫자가 아니라 색상이나 간격 값을 디자인 토큰 출처까지 추적할 수 있습니다.

실무에서 대부분의 개발자는 한 세션에 CSS Inspector를 수십 번씩 사용합니다 — 마진이 왜 무너졌는지 확인하거나, 스타일시트에 붙여넣기 전에 헥스 코드를 확인하거나, 미디어 쿼리 브레이크포인트가 실제로 원하던 스타일을 적용했는지 검증할 때입니다. 브라우저 전체 모드가 아니라 플로팅 패널이기 때문에, 탭을 전환해 자신의 코드 에디터나 디자인 파일을 확인하는 동안에도 패널을 열어둔 채로 있다가, 자리를 잃지 않고 곧바로 같은 요소로 돌아올 수 있습니다.