Панель «Покрытие» в Chrome DevTools может помочь вам найти неиспользуемый код 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-блокировка рендеринга .
- Если пользователь заходит на страницу на мобильном устройстве, дополнительный код использует его мобильные данные.
Откройте панель «Покрытие».
- Откройте командное меню .
Начните вводить
coverage, выберите команду «Показать покрытие» и нажмите Enter , чтобы запустить команду. В ящике откроется панель «Покрытие» .
Запись покрытия кода
Чтобы зафиксировать покрытие кода:
Чтобы установить область покрытия, на панели действий в верхней части панели «Покрытие» выберите «По функции» или «По блоку» в раскрывающемся списке.
Чтобы начать запись, нажмите « Обновить». Начать инструментирование покрытия и перезагрузить страницу. Панель «Покрытие» перезагружает страницу, записывает код, необходимый для загрузки страницы, и продолжает запись, пока вы взаимодействуете со страницей.
Чтобы остановить запись покрытия кода, нажмите stop_circle Остановить покрытие инструментами и показать результаты .
Анализ покрытия кода
В таблице на панели «Покрытие» показано, какие ресурсы были проанализированы и сколько кода используется в каждом ресурсе.
Щелкните строку, чтобы открыть этот ресурс на панели «Источники» и просмотреть построчную разбивку используемого и неиспользуемого кода. Любые неиспользуемые строки кода отмечены красными линиями рядом со столбцом с номерами строк слева.
- Столбец URL — это URL-адрес проанализированного ресурса.
- В столбце «Тип» указано, содержит ли ресурс CSS, JavaScript или и то, и другое.
- Столбец «Всего байт» представляет собой общий размер ресурса в байтах.
- Столбец «Неиспользованные байты» — это количество неиспользованных байтов.
- Последний безымянный столбец представляет собой визуализацию столбцов «Всего байт» и «Неиспользованные байты» . Красная часть полосы — это неиспользуемые байты. Серый раздел используется в байтах.
Чтобы отфильтровать отчет по URL, укажите его в фильтре на панели действий.
Строка состояния в нижней части панели «Покрытие» показывает процент использованного кода. В строке состояния учитывается фильтрация.
Рядом с панелью фильтров в раскрывающемся списке вы можете выбрать «Все» или только CSS или JavaScript для отображения в отчете.
Чтобы включить код расширения в отчет, включите check_box Content scripts .
Чтобы экспортировать отчет, нажмите «Загрузить Экспортировать покрытие» .