Просмотр неиспользуемых кодов JS и CSS в Google Devtools

Вы можете просмотреть неиспользуемые коды Javascript и CSS на странице Chrome Devtools (Inspect) Coverage.

При создании веб-страниц фрагменты кода, которые не используются при рендеринге и загружаются на ненужную страницу, излишне увеличивают загрузку страницы, что негативно сказывается на скорости открытия страницы.

Chrome Devtools Coverage

Чтобы открыть DevTools (Inspect) в веб-браузере Chrome, щелкните правой кнопкой мыши и выберите Inspect. Вы также можете открыть его с помощью сочетания клавиш Option + Command + I для Mac OS, Ctrl + Shift + J или F12 для Windows и Linux.

Чтобы просмотреть неиспользуемые ресурсы CSS и JS на экране обзора, необходимо открыть раздел Покрытие. Нажмите на три точки в правом верхнем углу экрана, а затем выберите > Дополнительные инструменты > Покрытие.

После нажатия кнопки Coverage «Нажмите кнопку записи, чтобы начать захват покрытия». Щелкните поле.

После нажатия кнопки появляется информация о том, какая часть загруженных на страницу ресурсов не используется.

При щелчке одного из URL-адресов, перечисленных на вкладке Coverage, отображаются используемые и неиспользуемые части кодов в исходном URL-адресе, выбранном на вкладке Sources выше.

Во фрагментах кода, которые отображаются в поле Sources, те, что с красной полосой слева, обозначают неиспользованные, а те, что с синей полосой, показывают использованные коды.