CSS Overview

Chrome 브라우저의 새로운 기능


들어가며

Chrome 브라우저의 개발자 도구 중 새로운 기능을 하나 소개하려고 해요.
이전에 이미 실험적 기능에 있었지만 Chrome 96버전부터 정식 기능으로 포함된 듯합니다.
포스팅을 미루고 있던 사이에 지금은 벌써 97버전이네요. :)

CSS Overview 패널 열기

  1. 개발자 도구를 엽니다.
  2. 추가 옵션 - More tools - CSS Overview 메뉴를 선택합니다.
  3. CSS Overview 탭이 생겨납니다.
  4. Capture Overview 버튼을 누르면 페이지 분석을 시작합니다.
01

02

CSS Overview의 기능

Overview summary

  • 페이지의 주요 CSS에 대한 요약정보를 보여줍니다.
03

Colors

  • 페이지에서 사용되고 있는 색상 정보를 보여줍니다.
  • 색상을 선택하면 사용되고 있는 요소를 하단의 영역에 알려줍니다.
  • 해당 요소의 Element를 선택하면 개발자 도구의 Elements 탭으로 이동하면서 해당 요소가 선택됩니다.
04

04 1

Font info

  • 페이지에서 사용되고 있는 폰트 정보를 알려줍니다.
  • Colors와 마찬가지로 폰트 정보를 선택을 하면 사용되고 있는 해당 요소를 확인하기 편리합니다.
05

Unused declarations

  • 페이지에서 사용하고 있지 않은 CSS 정보를 표시해 줍니다.
06

Media queries

  • 페이지에서 사용하는 미디어 쿼리의 정보를 보여줍니다.
  • Break Point 정보를 확인하기 좋아요.
07

마치며

이 기능을 알게 된 이후부터 저는 한 번씩 실행해 보고 있는데요.
평소에는 많이 사용되지 않을 수도 있겠지만 프로젝트 중에 투입되어 진행 상황을 파악을 하거나, 기존에 만들어진 소스를 기반으로 분석 후 개선을 하는 업무가 있을 때에 알아두면 소소하게 도움이 될 것 같아요.
조금이나마 도움이 되었으면 좋겠습니다.


추천 글