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