레이어 패널을 사용하면 웹사이트의 구성과 브라우저가 콘텐츠를 렌더링하는 방식을 파악할 수 있습니다. 웹사이트의 3D 다이어그램을 분석하여 렌더링 문제를 파악하고, 스크롤 버그를 수정하고, 애니메이션을 최적화하세요.
개요
레이어 패널을 사용하여 다음 작업을 수행할 수 있습니다.
- 문서 레이어를 봅니다.
- 문서 레이어 검사
- DOM 변경 중단점을 설정합니다.
- 페인트 프로파일러 정보를 봅니다.
- 느린 스크롤 요소를 식별합니다.
레이어 패널 열기
레이어 패널을 열려면 다음 단계를 따르세요.
- DevTools를 엽니다.
- 다음을 눌러 명령어 메뉴를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
Layers를 입력하고 Show Layers panel(레이어 패널 표시)을 선택한 다음 Enter 키를 누릅니다.
또는 오른쪽 상단에서 more_vert 옵션 더보기 > 도구 더보기 > 레이어 패널을 선택합니다.
또한 성능 패널을 사용하면 레이어 탭에서 녹화의 각 프레임 레이어를 볼 수 있습니다. 자세한 내용은 레이어 정보 보기를 참고하세요.
문서 레이어 보기
레이어 패널의 맨 왼쪽 섹션에는 펼칠 수 있는 트리로 문서의 렌더링된 모든 레이어가 나열됩니다. 이 트리는 페이지를 탐색할 때 업데이트됩니다. 레이어는 CSS 선택자 또는 숫자로 식별되며 그 뒤에 레이어의 크기(단위: 픽셀)가 옵니다.
레이어 위로 마우스를 가져가면 웹페이지와 다이어그램에서 해당 레이어를 강조표시합니다. 페이지에 다음 정보가 포함된 도움말이 표시됩니다.
- 레이어의 선택기입니다.
- 레이어의 크기(픽셀)입니다.
- CSS 그리드 또는 플렉스를 나타내는 아이콘(해당하는 경우).
문서 레이어 검사
레이어를 클릭하면 세부정보 창에서 자세한 정보를 볼 수 있습니다.
레이어에 따라 다음 정보가 표시됩니다.
- 크기
- 합성 이유
- 메모리 예상치
- 페인트 수
- 느린 스크롤 영역
- 고정 위치 제약 조건
이 다이어그램은 표시 영역 외부에 배치된 요소를 포함하여 이 페이지에서 레이어가 어떻게 쌓이고 정렬되는지 보여줍니다.
다이어그램을 이동하려면 다음 단계를 따르세요.
- WASD 키를 사용하여 다이어그램을 이동합니다. 위로 이동하려면 W를, 왼쪽으로 이동하려면 A, 아래로 이동하려면 S를, 오른쪽으로 이동하려면 D를 누릅니다.
- 화면 이동 모드 drag_pan을 클릭하거나 X를 누르고 드래그하여 X축 및 Y축을 따라 이동합니다.
- 회전 모드 360을 클릭하거나 V 키를 누르고 드래그하여 Z축을 따라 회전합니다.
- 변환 재설정 zoom_in_map을 클릭하거나 0 키를 눌러 다이어그램을 원래 위치로 재설정합니다.
- Shift + + 키를 누르거나 마우스휠을 위로 돌려 확대합니다.
- Shift + - 또는 마우스휠을 아래로 눌러 축소합니다.
요소 패널에서 레이어의 상응하는 DOM 요소를 보려면 다이어그램 또는 레이어 트리에서 레이어를 마우스 오른쪽 버튼으로 클릭하고 요소 패널에 표시를 클릭합니다.
또한 레이어 패널은 콘텐츠를 호스팅하거나 그리지 않는 특정 레이어를 숨깁니다. 이러한 레이어를 표시하려면 레이어 트리를 마우스 오른쪽 버튼으로 클릭하고 내부 레이어 표시를 선택합니다.
DOM 변경 중단점 설정
레이어 패널을 사용하면 DOM 변경 중단점을 설정할 수 있습니다.
DOM 변경 중단점을 설정하려면 다음 단계를 따르세요.
- 레이어 트리에서 레이어를 마우스 오른쪽 버튼으로 클릭합니다.
- Break on으로 마우스를 가져간 다음 Subtree modifications, Attribute modifications 또는 Node removal을 선택합니다.
다음에서 DOM 변경 중단점 목록을 찾으세요.
- 요소 > DOM 중단점 탭
- 소스 > DOM 중단점 접을 수 있는 섹션
중단점 유형에 관한 자세한 내용은 DOM 변경 중단점 유형을 참고하세요.
페인트 프로파일러 정보 보기
레이어 패널을 사용하면 레이어에 관한 자세한 페인트 정보를 확인하고 웹페이지의 콘텐츠를 3D 다이어그램에 렌더링할 수 있습니다.
Paint Profiler를 활성화하려면 다음 단계를 따르세요.
- 작업 표시줄에서 check_box Paints 체크박스를 선택합니다.
- 레이어 트리에서 레이어를 선택합니다.
- 세부정보 창 하단에서 페인트 프로파일러를 클릭합니다. 일부 레이어에는 이 옵션이 없을 수 있습니다.
페인트 레코드와 페인트 비용 분포를 나타내는 히스토그램이 있는 Profiler 탭이 열립니다.
페인트를 활성화하면 웹페이지의 대부분의 콘텐츠가 다이어그램에 렌더링됩니다.
느린 스크롤 요소 식별
일부 웹사이트에서는 자바스크립트를 사용하여 스크롤 속도에 부정적인 영향을 줄 수 있는 방식으로 요소의 스크롤 또는 터치 이벤트를 감지합니다. 성능을 저하할 수 있는 스크롤과 관련된 이벤트 리스너가 포함된 레이어를 식별하려면 check_box Slow scroll rects 체크박스를 클릭합니다.
스크롤 속도 저하를 일으킬 수 있는 레이어는 분홍색으로 강조표시됩니다.