유용한 크롬 개발자 도구

·2022년 4월 21일
0

개발자 도구 여는 방법

  1. 크롬에서 우클릭 - 검사 를 선택
  2. 오른쪽 상단 ••• - 도구더보기 - 개발자 도구
  3. 윈도우 = ctrl + shift + i
    맥os = option + command + i

화면 캡쳐

  1. Elements 좌측에 디바이스모양 아이콘 선택
  2. 여러 디바이스에서 적용된 현재 페이지 모습을 볼 수 있다.
  3. ••• 를 클릭하면 캡쳐할 수 있다.

요소에 적용된 스타일 빠르게 보기

  • Elements 좌측에 커서모양 아이콘을 클릭하고 웹페이지에 마우스를 갖다대면 적용된 스타일을 빠르게 확인할 수 있다.

적용된 서체 정확하게 확인하기

  • 확인할 영역을 선택하고 Computed를 선택한다. 맨 밑까지 쭈욱~ 내리면 Rendered Fonts를 확인할 수 있다. 폰트를 설정했을 때 적용이 된것을 정확히 확인할 수 있다.

가상선택자 상태 확인하기

  • 개발자 도구에서 Styles - Filter 입력란 우측에 :hov를 클릭하면 가상 선택자가 적용됐을 때 모습과 요소 크기를 알 수 있다.

좀 더 멋지게 작성하고 싶었는데...

profile
저녁놀 마을 사람

0개의 댓글

관련 채용 정보