요소 패널 개요

Dale St. Marthe

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

개요

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

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

• 스타일:

  • 모든 스타일 시트에서 요소에 적용된 CSS 규칙을 보고 디버그합니다.
  • 유효하지 않거나, 재정의되었거나, 비활성 상태이거나, 기타 CSS가 제대로 작동하지 않는 것을 찾습니다.
  • 선언을 추가하고, 클래스를 적용하고, Box 모델과 상호작용하여 요소를 수정합니다.
  • DOM 트리에 있는 배지를 사용하여 컨테이너 수정 옵션에 액세스합니다.

• 계산됨: Chrome에서 렌더링될 때 요소에 적용된 해결된 속성을 나열합니다.

• 레이아웃: 그리드 및 flexbox 오버레이를 수정하는 옵션을 포함합니다.

• 이벤트 리스너: 모든 이벤트 리스너와 관련 속성을 나열합니다. 이벤트 리스너의 소스를 찾고 수동 또는 차단 리스너를 필터링할 수 있습니다.

• DOM 중단점: 요소 패널에서 추가한 DOM 변경 중단점을 나열하며, 이를 사용 설정, 사용 중지, 삭제 또는 표시할 수 있습니다.

• 속성: 객체의 소유 속성 및 상속된 속성을 검사하고 정렬할 DOM 노드를 선택합니다.

• 접근성: ARIA 라벨이 있는 요소와 속성을 나열합니다. 접근성 트리를 전환하고 검사할 수 있습니다 (실험용).

요소 패널 열기

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

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

1. DevTools를 엽니다.
2. 다음을 눌러 명령어 메뉴를 엽니다.
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P
3. Elements를 입력하고 요소 표시를 선택한 다음 Enter 키를 누릅니다. DevTools가 DevTools 창 하단에 있는 창에 Elements 패널을 표시합니다.