배지 참조

Sofia Emelianova
Sofia Emelianova
GitHub

요소 패널에서 배지의 포괄적인 참조를 사용하여 다양한 오버레이를 전환하고 DOM 트리 탐색 속도를 높입니다.

배지 표시 또는 숨기기

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

  1. DevTools를 엽니다.
  2. DOM 트리에서 요소를 마우스 오른쪽 버튼으로 클릭하고 배지 설정 하위 메뉴에서 하나 이상의 배지를 선택합니다.

'배지 설정' 메뉴

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

소스 보기

view-source 배지는 HTML 페이지의 루트에 있는 <html> 태그 옆에 있습니다. 클릭하여 소스 패널에서 페이지의 소스를 확인합니다.

&#39;소스 보기&#39; 배지

이 배지는 Chrome의 페이지 컨텍스트 (마우스 오른쪽 버튼 클릭) 메뉴에서 페이지 소스 보기 옵션에 대한 대체 워크플로를 제공합니다.

  1. Chrome에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사 합니다.
  2. 요소 패널에서 view-source 배지 옆에 있는 <html> 태그를 클릭합니다.
  3. 소스 패널에서 페이지 소스를 검사합니다.

그리드

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

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

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

그리드 오버레이

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

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

하위 그리드

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

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

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

하위 그리드 오버레이입니다.

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

Flex

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

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

Codepen의 sofiayem이 만든 펜 XWEeWdb를 참고하세요.
  1. 미리보기에서 요소를 검사합니다.
  2. DOM 트리에서 요소 옆에 있는 flex 배지를 클릭하고 오버레이를 관찰합니다.

플렉스 오버레이입니다.

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

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

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

다음 미리보기에서 광고를 찾아보세요.

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

광고 배지입니다.

ad 배지는 클릭할 수 없지만 마우스 포인터를 가져가면 요소가 광고로 식별된 이유에 관한 컨텍스트를 제공하는 도움말이 표시됩니다. 예를 들면 다음과 같습니다.

광고 배지의 도움말입니다.

  • 스크립트 상위 요소: 요소 생성에 관여한 스크립트입니다.
  • 필터 목록 규칙: 요소 또는 로드된 리소스와 일치하는 필터 목록 (예: EasyList)의 특정 규칙입니다.

렌더링 탭을 사용하여 광고 프레임을 강조표시할 수도 있습니다.

스크롤

HTML 요소는 스크롤 컨테이너입니다. overflow CSS 속성이 scroll로 설정되거나 오버플로를 일으킬 만큼 콘텐츠가 충분한 경우 auto로 설정됩니다. 이러한 요소에는 scroll 배지가 옆에 있습니다.

DOM 트리 노드에서 배지를 스크롤합니다.

스크롤 스냅

스크롤 컨테이너에는 스냅 포인트를 구성하는 CSS 속성이 있을 수 있습니다. 이러한 요소에는 해당 오버레이를 전환하는 scroll-snap 배지가 옆에 있습니다.

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

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

스크롤-스냅 오버레이

오버레이에는 요소 위치와 스냅 포인트가 표시됩니다.

컨테이너

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

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

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

컨테이너 오버레이

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

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

슬롯

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

다음 미리보기에서 slot 배지를 찾아보세요.

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

상단 레이어

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

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

상단 레이어 요소에는 top-layer (N) 배지가 옆에 있습니다. 여기서 N는 요소의 색인 번호입니다. 배지는 #top-layer 컨테이너의 해당 요소로 연결되는 링크입니다.

다음 미리보기에서 top-layer (N) 배지를 찾아보세요.

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

미디어

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

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

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

팝오버

팝오버는 popover 속성이 있는 요소이며 도움말, 알림, 토스트 등 다양한 대화형 패턴에 유용합니다. 이러한 요소에는 popover 배지가 옆에 있습니다.

이 배지는 top-layer 배지를 옆에 전환합니다. 이 배지는 #top-layer 컨테이너의 해당 요소로 연결됩니다.

다음 미리보기에서 popover 배지를 찾아보세요.

  1. 미리보기에서 팝오버 전환 을 클릭합니다.
  2. 표시되는 팝오버를 검사합니다.

  3. DOM 트리에서 popover 배지를 클릭하여 <div popover> 요소 옆에 놓습니다. 요소 패널에 top-layer 배지가 표시됩니다.

    popover 속성이 있는 요소 옆에 있는 팝오버 배지

  4. `상단 레이어 섹션의 단계를 따르세요.

자세한 내용은 https://web.dev/learn/css/popover-and-dialog도 참고하세요.

시작 스타일

@starting-style 규칙은 페이지에 렌더링되기 전에 요소의 초기 스타일을 정의합니다. 이는 애니메이션으로 표시되는 요소에 필요합니다. display: none 애니메이션으로 표시할 상태가 필요하기 때문입니다. 이러한 요소에는 starting-style 배지가 옆에 있습니다.

이 배지는 @starting-style 규칙의 스타일을 전환하므로 애니메이션이 작동하는 것을 확인할 수 있습니다.

다음 미리보기에서 starting-style 배지를 찾아보세요.

  1. 미리보기에서 팝오버 열기 를 클릭합니다.
  2. 표시되는 팝오버를 검사합니다.

  3. DOM 트리에서 starting-style 배지 옆에 있는 <div popover> 요소를 전환합니다.

    @starting-style 규칙이 있는 요소 옆에 있는 시작 스타일 배지

  4. 요소 > 스타일 탭에서 애니메이션이 작동하는 방식과 적용되는 스타일을 관찰합니다.

자세한 내용은 팝오버 애니메이션도 참고하세요.