배지 참조

Sofia Emelianova
Sofia Emelianova
GitHub

요소 패널의 배지에 대한 포괄적인 참조를 통해 다양한 오버레이를 전환하고 DOM 트리 탐색 속도를 높일 수 있습니다.

배지 표시 또는 숨기기

배지를 표시하거나 숨기려면 다음 단계를 따르세요.

  1. DevTools를 엽니다.
  2. DOM 트리에서 요소를 마우스 오른쪽 버튼으로 클릭하고 배지 설정...을 선택합니다.배지 설정을 클릭합니다.
  3. 선택한 배지 옆에 있는 체크박스를 선택하거나 선택 해제합니다.

Elements 패널에는 DOM 트리의 해당 요소 옆에 선택한 배지가 표시됩니다. 다음 섹션에서는 모든 배지에 대해 설명합니다.

그리드

display CSS 속성이 grid 또는 inline-grid로 설정된 경우 HTML 요소는 그리드 컨테이너입니다. 이러한 요소에는 상응하는 오버레이를 전환하는 grid 배지가 옆에 있습니다.

다음 미리보기에서 오버레이를 전환합니다.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 grid 배지를 클릭하고 오버레이를 관찰합니다.

그리드 오버레이

오버레이에는 열, 행, 숫자, 간격이 표시됩니다.

그리드 레이아웃을 디버그하는 방법을 알아보려면 CSS 그리드 검사를 참고하세요.

서브 그리드

서브 그리드는 상위 그리드와 동일한 트랙을 사용하는 중첩된 그리드입니다. grid-template-columns, grid-template-rows 속성 중 하나 또는 모두가 subgrid로 설정된 경우 요소는 서브그리드 컨테이너입니다. 이러한 요소에는 상응하는 오버레이를 전환하는 subgrid 배지가 옆에 있습니다.

다음 미리보기에서 오버레이를 전환합니다.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 subgrid 배지를 클릭하고 오버레이를 관찰합니다.

서브 그리드 오버레이

오버레이에는 열, 행, 숫자, 하위 그리드의 간격이 표시됩니다.

Flex

display CSS 속성이 flex 또는 inline-flex로 설정된 경우 HTML 요소는 가변 컨테이너입니다. 이러한 요소에는 상응하는 오버레이를 전환하는 flex 배지가 옆에 있습니다.

다음 미리보기에서 오버레이를 전환합니다.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 flex 배지를 클릭하고 오버레이를 관찰합니다.

Flex 오버레이.

오버레이에는 하위 요소 위치가 표시됩니다.

Flex 레이아웃을 디버그하는 방법을 알아보려면 CSS Flexbox 검사 및 디버그를 참고하세요.

DevTools는 일부 광고 프레임을 감지하고 태그를 지정할 수 있습니다. 이러한 프레임 옆에는 ad 배지가 있습니다.

다음 미리보기에서 광고를 살펴보세요.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 옆에 ad 배지가 있는 요소를 찾습니다.

광고 배지.

ad 배지는 클릭할 수 없지만 렌더링 탭을 사용하여 빨간색으로 광고 프레임을 강조할 수 있습니다.

스크롤 스냅

HTML 요소는 overflow CSS 속성이 scroll로 설정된 경우 스크롤 컨테이너이며, 오버플로를 일으킬 만큼 충분한 콘텐츠가 있는 경우 auto로 설정됩니다. 스크롤 컨테이너에는 맞추기 지점을 구성하는 CSS 속성이 있을 수 있습니다. 이러한 요소에는 상응하는 오버레이를 전환하는 scroll-snap 배지가 옆에 있습니다.

다음 미리보기에서 오버레이를 전환합니다.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 scroll-snap 배지를 클릭합니다.
  3. 요소를 오른쪽으로 스크롤하여 오버레이를 관찰해 보세요.

스크롤-스냅 오버레이

오버레이에는 요소 위치와 맞추기 지점이 표시됩니다.

컨테이너

container-type CSS 속성이 있으면 HTML 요소가 컨테이너입니다. 이러한 요소에는 상응하는 오버레이를 전환하는 container 배지가 옆에 있습니다.

다음 미리보기에서 오버레이를 전환합니다.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 container 배지를 클릭합니다.
  3. 오른쪽 하단 모서리를 드래그하여 요소의 크기를 조절해 보고 레이아웃 변경과 오버레이를 관찰합니다.

컨테이너 오버레이

오버레이에는 하위 요소 위치가 표시됩니다.

컨테이너 쿼리를 디버그하는 방법을 알아보려면 CSS 컨테이너 쿼리 검사 및 디버그를 참고하세요.

슬롯

<slot> HTML 요소는 자체 콘텐츠로 채울 수 있는 자리표시자입니다. <template> 요소와 함께 <slot>를 사용하면 별도의 DOM 트리를 만들고 함께 표시할 수 있습니다. 슬롯 콘텐츠 요소 옆에는 해당 슬롯으로 연결되는 링크 역할을 하는 슬롯.slot 배지가 있습니다.

다음 미리보기에서 슬롯.slot 배지를 확인해 보세요.

  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 슬롯.slot 배지를 클릭하여 해당 슬롯을 찾습니다. 슬롯을 배치하고 배지를 표시합니다.
  3. 드러내세요.reveal 배지를 클릭하여 슬롯 콘텐츠로 돌아갑니다.

상단 레이어

이 배지는 최상위 레이어의 개념을 이해하고 시각화하는 데 도움이 됩니다. 상단 레이어는 z-index와 관계없이 다른 모든 레이어 위에 콘텐츠를 렌더링합니다. .showModal() 메서드를 사용하여 <dialog> 요소를 열면 브라우저에서 이 요소를 상단 레이어에 배치합니다.

최상위 레이어 요소를 시각화할 수 있도록 Elements 패널에서는 닫는 </html> 태그 뒤에 #top-layer 컨테이너를 DOM 트리에 추가합니다.

상단 레이어 요소 옆에는 연결을 탭합니다.top-layer (N) 배지가 있으며, 여기서 N는 요소의 색인 번호입니다. 배지는 #top-layer 컨테이너의 상응하는 요소로 연결되는 링크입니다.

다음 미리보기에서 연결을 탭합니다.top-layer (N) 배지를 확인해 보세요.

  1. 미리보기에서 대화상자 열기를 클릭합니다.
  2. 대화상자를 검사합니다.
  3. DOM 트리에서 <dialog> 요소 옆에 있는 연결을 탭합니다.top-layer (1) 배지를 클릭합니다. Elements 패널을 사용하면 닫는 </html> 태그 뒤의 #top-layer 컨테이너에 있는 해당 요소로 이동합니다. 최상위 레이어 컨테이너 및 배지
  4. <dialog> 요소로 돌아가려면 요소 또는 요소의 ::backdrop 옆에 있는 드러내세요.reveal 배지를 클릭합니다.

미디어

media 배지는 기본적으로 사용 중지되어 있습니다. 사용 설정하면 <audio> 및 <video> 요소 옆에 표시됩니다. 이 배지를 클릭하면 미디어 패널을 열고 미디어를 디버그할 수 있습니다.

미디어 배지는 배지 설정에서 사용 설정되어 동영상 요소 옆에 표시됩니다.

자세한 내용은 미디어 패널로 미디어 플레이어 디버그를 참고하세요.