MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

이 글은 페이지 검사기의 사용자 인터페이스에 대한 주요 부분의 간략한 설명이다.

검사기 UI의 상위 3개 요소를 다룬다:

  • "요소 선택" 버튼
  • HTML 구역
  • CSS 구역

이 안내는 의도적으로 가능한 쩗게 유지된다. 다양한 검사기 사용법에 대한 상세안내로 가는 링크가 걸려 있다.

요소 선택 버튼

검사기가 현재 선택된 요소에 대한 자세한 정보를 준다. 요소 선택 버튼은 검사를 위해 요소를 선택할 수 있는 한 방법이다:

실제 main toolbox toolbar의 부분이며, 검사기 뿐만 아니라 어떠한 도구로부터든 즉시 접근 가능하다는 것을 인지하라.

한 요소를 선택하는 법을 배우기 위해 selecting an element 에 대한 지침을 보라.

HTML 구역

검사기가 두 개로 반나눠져 있다. 왼쪽 반은 HTML 구역이 차지하고 있다:

HTML 구역의 구조에 대해 더 알기 위해, examining and editing HTML 에 대한 지침을 보라.

CSS 구역

오른쪽 부분은 CSS 구역이 차지한다:

CSS 구역은 5가지 화면으로 나뉜다:

  • Rules view 규칙 화면
  • Computed view 계산된 스타일 화면
  • Fonts view 글꼴 화면
  • Box Model view 박스 모델 화면
  • Animations view 애니메이션 화면

다른 화면 간에 이동하기 위해 상단의 탭을 사용하라.

규칙 화면

규칙 화면은 선택된 요소에 적용된 모든 규칙을 목록으로 나열한다. 가장 특이성이 높은 것에서 부터 가장 특이성이 떨어지는 것으로 정렬된다:

더 자세한 내용은 Examine and edit CSS 를 보라.

계산된 스타일 화면

계산된 스타일 화면은 선택된 요소의 계산 완료된 CSS 를 보여준다.

더 자세한 내용은 Examine and edit CSS 를 보라.

글꼴 화면

파이어폭스47 부터 글꼴 화면은 기본적으로 불가능해진다. 충분한 특성을 가진 다른 대체품을 작업중이다.

그 동안 글꼴 화면을 보고자 한다면, about:config 을 방문해서 devtools.fontinspector.enabled 을 찾아서 true 로 설정하라.

글꼴 화면은 수정가능한 예제와 함께 페이지 내의 모든 글꼴을 보여준다.

더 자세한 내용은 View fonts 를 보라.

박스 모델 화면

박스 모델 화면은 선택된 요소의 박스 모델의 수정가능한 화면을 제공한다.

더 자세한 내용은 Examine and edit the box model 를 보라.

애니메이션 화면

애니메이션 화면은 선택된 요소에 적용된 어떠한 애니메이션이든 상세 정보와 그들을 멈출 콘트롤러를 제공한다:

 

더 자세한 내용은 Work with animations 를 보라.

CSS 구역 보이게 하거나 가리기

파이어폭스40 부터, CSS 구역을 보이게 하거나 가리는 사용하는 버튼을 툴바에서 볼 수 있다:

문서 태그 및 공헌자

 이 페이지의 공헌자: whitetofu
 최종 변경: whitetofu,