요소 패널 개요

Dale St. Marthe

요소 패널을 사용하여 DOM 요소를 검사하고 수정합니다.

개요

요소 패널은 DOM을 검사하고 조작할 수 있는 강력한 인터페이스를 제공합니다. HTML 문서와 유사한 DOM 트리를 사용하여 특정 DOM 노드를 선택하고 다른 도구로 수정할 수 있습니다.

요소 패널에는 관련 도구가 포함된 다음 탭도 있습니다.

스타일:
- 모든 스타일 시트에서 요소에 적용된 CSS 규칙을 보고 디버그합니다.
- 의도한 대로 작동하지 않는 잘못되었거나, 재정의되었거나, 비활성 상태이거나, 기타 CSS를 찾습니다.
- 선언을 추가하고, 클래스를 적용하고, 박스 모델과 상호작용하여 요소를 수정합니다.
- DOM 트리에 있는 배지를 사용하여 컨테이너 수정 옵션에 액세스합니다.
계산됨: Chrome에서 렌더링될 때 요소에 적용된 확인된 속성을 나열합니다.
레이아웃: 그리드 및 플렉스박스 오버레이를 수정하는 옵션이 포함되어 있습니다.
이벤트 리스너: 모든 이벤트 리스너와 속성을 나열합니다. 이벤트 리스너의 소스를 찾고 패시브 또는 차단 리스너를 필터링할 수 있습니다.
DOM 중단점: 요소 패널에서 추가된 DOM 변경 중단점을 나열하고 사용 설정, 사용 중지, 삭제 또는 표시할 수 있습니다.
속성: DOM 노드를 선택하여 객체의 자체 속성과 상속된 속성을 검사하고 정렬합니다.
접근성: ARIA 라벨이 있는 요소와 속성을 나열합니다. 접근성 트리를 전환하고 검사할 수 있습니다 (실험용).

기본적으로 DevTools를 열면 요소 패널이 열립니다. 페이지의 아무 곳에서나 노드를 검사하여 요소 패널을 자동으로 열 수도 있습니다.

요소 패널을 수동으로 열려면 다음 단계를 따르세요.

DevTools를 엽니다.
다음 키를 눌러 명령어 메뉴 를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
Elements를 입력하기 시작하고 요소 표시를 선택한 후 Enter를 누릅니다. DevTools 창 하단의 서랍 에 요소 패널이 표시됩니다.