요소 패널 개요

Dale St. Marthe

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

개요

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

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

• 스타일:

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

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

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

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

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

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

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

요소 패널 열기

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

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

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