요소 패널 개요

Dale St. Marthe

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

개요

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

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

• 스타일:

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

• 계산됨: Chrome에서 렌더링될 때 요소에 적용된 해결된 속성 목록입니다.

• 레이아웃: 그리드 및 플렉스박스 오버레이를 수정하는 옵션이 포함되어 있습니다.

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

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

• 속성: DOM 노드를 선택하여 객체의 자체 속성과 상속된 속성을 검사하고 정렬합니다.

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

요소 패널 열기

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

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

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