크롬 CSS Overview 기능

원하는 페이지에서 쓰이고 있는 CSS 관련 정보를 확인할수 있는 기능

오늘은 내가 가끔 챙겨보는 개발 유튜버가 좋은 정보를 알려주어 이를 정리하고자 한다.

• 유튜버 '드림코딩 by 엘리'

준비

크롬에서 개발자도구를 켜보자.

보통 메뉴가 이런식으로 세팅이 되어있다. (CSS Overview 기능은 실험중이라 아직 default로 안보임)

우측 설정버튼(톱니바퀴) 클릭 후 Experiments에 들어가서 CSS Overview를 클릭하면 그 기능을 사용할 수 있다.

그리고 개발자도구를 닫고 다시 열면 다음과 같이 메뉴에 등장!

원하는 페이지에 들어가 Capture overview를 클릭하면

다음과 같이 해당 페이지의 CSS 관련 정보를 알 수 있는 UI를 볼 수 있다.

기능

Overview Summary

• 기본적인 Elements와 selector 개수에 대한 정보
  

Colors

• 페이지에서 사용되고 있는 색상 정보 제공
• 색상을 클릭하면 사용되고 있는 요소를 알려주고, 해당 요소 위치 알 수 있는 Elements탭으로 이동가능
  

Font Info

• 웹 페이지에서 사용되고 있는 폰트 정보 제공
  

Unused declarations

• 사용하고 있지 않은(불필요한) CSS 정보 제공
  

Media queries

• 페이지에서 사용하는 미디어 쿼리 개수
• break point 위치
  

결론

많이 사용하지 않을 수도 있지만, 익혀두면 유용한 기능이다.
얼른 이 기능 덕을 보고싶다ㅎㅎ
드림코딩 만세~!