Панель «Слои» помогает вам понять структуру вашего веб-сайта и то, как браузер отображает контент. Проанализируйте 3D-диаграмму вашего веб-сайта, чтобы выявить проблемы с рендерингом, исправить ошибки прокрутки и оптимизировать анимацию.
Обзор
Используйте панель «Слои», чтобы сделать следующее:
- Просмотр слоев документа.
- Проверьте слои документа.
- Установите точки останова изменения DOM.
- Просмотр информации о профилировщике краски.
- Определите элементы медленной прокрутки.
Откройте панель «Слои».
Чтобы открыть панель «Слои» , выполните следующие действия:
- Откройте Инструменты разработчика .
- Откройте командное меню, нажав:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P.
- Начните вводить
Layers, выберите «Показать панель слоев» и нажмите 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, выполните следующие действия:
- Щелкните правой кнопкой мыши слой в дереве слоев.
- Наведите указатель мыши на «Разрыв», затем выберите «Модификации поддерева» , «Модификации атрибутов» или «Удаление узла» .
Список точек останова изменения DOM можно найти в:
- «Элементы» > вкладка «Точки останова DOM» .
- Источники > Сворачиваемый раздел «Точки останова DOM» .
Дополнительные сведения о типах точек останова см. в разделе Типы точек останова при изменении DOM .
Просмотр информации о профилировщике краски
Панель «Слои» позволяет просматривать подробную информацию о рисовании слоя и отображать содержимое веб-страницы на трехмерной диаграмме.
Чтобы активировать Paint Profiler , выполните следующие действия:
- Установите флажок check_box Paints на панели действий.
- Выберите слой в дереве слоев.
- Нажмите Paint Profiler в нижней части панели сведений . Обратите внимание, что не все слои будут иметь эту опцию.
Откроется вкладка «Профилировщик» с записями о краске и гистограммой, показывающей распределение стоимости краски.
Активация Paints также отобразит большую часть содержимого веб-страницы на диаграмме.
Определите элементы медленной прокрутки
Некоторые веб-сайты используют JavaScript для обнаружения событий прокрутки или касания элементов таким образом, что это может отрицательно повлиять на скорость прокрутки. Чтобы определить слои, содержащие прослушиватели событий, связанных с прокруткой, которые могут снизить производительность, установите флажок check_box Медленные прямоугольники прокрутки .
Слои, которые могут вызвать медленную прокрутку, выделены розовым цветом.