요소 패널을 사용하여 DOM 요소를 검사하고 수정합니다.
개요
요소 패널은 DOM을 검사하고 조작하는 강력한 인터페이스를 제공합니다. HTML 문서와 유사한 DOM 트리를 사용하여 특정 DOM 노드를 선택하고 다른 도구로 수정할 수 있습니다.
요소 패널에는 관련 도구가 포함된 다음 탭도 있습니다.
스타일:
계산됨: Chrome에서 렌더링될 때 요소에 적용된 해결된 속성 목록입니다.
이벤트 리스너: 모든 이벤트 리스너와 속성을 나열합니다. 이벤트 리스너의 소스를 찾고 패시브 또는 차단 중인 리스너를 필터링할 수 있습니다.
DOM 중단점: 요소 패널에서 추가된 DOM 변경 중단점을 나열하고 이를 사용 설정, 사용 중지, 삭제 또는 표시할 수 있습니다.
속성: DOM 노드를 선택하여 객체의 자체 속성과 상속된 속성을 검사하고 정렬합니다.
접근성: ARIA 라벨이 있는 요소와 해당 속성을 나열합니다. 접근성 트리를 전환하고 검사할 수 있습니다 (실험용).
요소 패널 열기
기본적으로 DevTools를 열면 Elements 패널이 열립니다. 페이지의 아무 곳에서나 노드를 검사하여 요소 패널을 자동으로 열 수도 있습니다.
요소 패널을 수동으로 열려면 다음 단계를 따르세요.
- DevTools를 엽니다.
- 다음을 눌러 명령어 메뉴를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
Elements
를 입력하고 요소 표시를 선택한 다음 Enter 키를 누릅니다. DevTools 창 하단의 서랍에 요소 패널이 표시됩니다.