Охват: Найдите неиспользуемый JavaScript и CSS.

Кейси Баск
Kayce Basques
X GitHub
София Емельянова
Sofia Emelianova
GitHub

Панель «Покрытие кода» помогает найти неиспользуемый код JavaScript и CSS. Удаление неиспользуемого кода может ускорить загрузку страницы и сэкономить мобильный трафик ваших пользователей.

Анализ покрытия кода.

Обзор

Распространенной проблемой в веб-разработке является использование неиспользуемого JavaScript или CSS. Например, предположим, вы хотите использовать компонент кнопки Bootstrap на своей странице. Для этого вам нужно добавить ссылку на таблицу стилей Bootstrap в ваш HTML-код, вот так:

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

Этот файл стилей содержит не только код для компонента кнопки, но и CSS для всех компонентов Bootstrap. Однако вы не используете другие компоненты Bootstrap. Поэтому ваша страница загружает множество ненужного CSS. Этот лишний CSS является проблемой по следующим причинам:

  • Дополнительный код замедляет загрузку страницы. См. CSS, блокирующий рендеринг .
  • Если пользователь заходит на страницу с мобильного устройства, дополнительный код расходует его мобильный трафик.

Панель «Покрытие кода» позволяет записывать состояние страницы и просматривать отчет об общем количестве использованных и неиспользованных байтов ресурсов CSS и JavaScript, а также отслеживать код на панели «Источники» .

Откройте панель «Покрытие».

  1. Откройте Devtools .
  2. Откройте меню команд .

  3. Начните вводить coverage , выберите команду Show Coverage , а затем нажмите Enter , чтобы выполнить команду. Панель Coverage откроется в выдвижной панели .

    Панель по вопросам страхового покрытия.

В качестве альтернативы, в правом верхнем углу выберите more_vert Дополнительные параметры > Дополнительные инструменты > Покрытие .

Запись покрытия кода

Для сбора данных о покрытии кода:

  1. Чтобы задать область покрытия, на панели действий в верхней части панели «Покрытие» выберите в раскрывающемся списке «По функциям» или «По блокам» .

  2. Чтобы начать запись, нажмите кнопку » в центре панели. Панель «Покрытие кода» перезагрузит страницу, зафиксирует код, необходимый для загрузки страницы, и продолжит запись, пока вы взаимодействуете со страницей.

  3. Чтобы остановить запись покрытия кода, нажмите Остановить инструментирование покрытия и отобразить результаты на панели действий.

Анализ покрытия кода

В таблице на панели «Покрытие кода» показано, какие ресурсы были проанализированы и какой объем кода используется в каждом ресурсе.

Щелкните по строке, чтобы открыть этот ресурс на панели «Источники» и увидеть построчное отображение используемого и неиспользуемого кода. Все неиспользуемые строки кода отмечены вертикальными серыми линиями рядом со столбцом с номерами строк слева.

Отчет о покрытии кода.

  • В столбце URL указан URL-адрес ресурса, который был проанализирован.
  • В столбце «Тип» указывается, содержит ли ресурс CSS, JavaScript или и то, и другое.
  • В столбце «Общий размер в байтах» отображается общий размер ресурса в байтах.
  • В столбце «Неиспользованные байты» отображается количество байтов, которые не были использованы.
  • Столбец «Визуализация использования» отображает данные из столбцов «Общее количество байтов» и «Неиспользованные байты» . Серая часть столбца — это неиспользованные байты, зеленая — использованные байты.

Чтобы отфильтровать отчет по URL-адресу, укажите его в фильтре на панели действий.

Строка состояния в нижней части панели «Покрытие кода » показывает процент использованного кода. Строка состояния учитывает фильтрацию.

Рядом с панелью фильтров в выпадающем списке можно выбрать «Все» или только CSS или JavaScript для отображения в отчете.

Чтобы включить код расширения в отчет, установите Скрипты содержимого» .

Для экспорта отчета нажмите кнопку «Экспорт покрытия» .