이 안내는 의도적으로 가능한 쩗게 유지된다. 다양한 검사기 사용법에 대한 상세안내로 가는 링크가 걸려 있다.이 글은 페이지 검사기의 사용자 인터페이스에 대한 주요 부분의 간략한 설명이다.
검사기 UI의 상위 3개 요소를 다룬다:
이 안내는 의도적으로 가능한 쩗게 유지된다. 다양한 검사기 사용법에 대한 상세안내로 가는 링크가 걸려 있다.
검사기가 현재 선택된 요소에 대한 자세한 정보를 준다. 요소 선택 버튼은 검사를 위해 요소를 선택할 수 있는 한 방법이다:
실제 main toolbox toolbar의 부분이며, 검사기 뿐만 아니라 어떠한 도구로부터든 즉시 접근 가능하다는 것을 인지하라.
한 요소를 선택하는 법을 배우기 위해 selecting an element 에 대한 지침을 보라.
검사기가 두 개로 반나눠져 있다. 왼쪽 반은 HTML 구역이 차지하고 있다:
HTML 구역의 구조에 대해 더 알기 위해, examining and editing HTML 에 대한 지침을 보라.
오른쪽 부분은 CSS 구역이 차지한다:
CSS 구역은 5가지 화면으로 나뉜다:
다른 화면 간에 이동하기 위해 상단의 탭을 사용하라.
규칙 화면은 선택된 요소에 적용된 모든 규칙을 목록으로 나열한다. 가장 특이성이 높은 것에서 부터 가장 특이성이 떨어지는 것으로 정렬된다:
더 자세한 내용은 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 를 보라.
파이어폭스40 부터, CSS 구역을 보이게 하거나 가리는 사용하는 버튼을 툴바에서 볼 수 있다:
