Як використовувати інструмент Coverage для пошуку невикористовуваного коду CSS і JS?

У процесі розробки великих веб-додатків проєкти часто обростають великою кількістю надлишкового коду, включаючи невикористовувані стилі та скрипти. Це призводить до збільшення часу завантаження сторінок і зниження загальної продуктивності. Панель Coverage в інструментах розробника створена спеціально для того, щоб аналізувати реальне використання коду і показувати, яка його частина фактично виконується браузером.

Щоб запустити цей аналіз, відкрийте меню команд за допомогою комбінації клавіш, введіть слово Coverage і виберіть відповідний інструмент. У нижній частині екрана з'явиться нова панель управління з кнопкою запису у вигляді круглого червоного кольору. Натисніть її, а потім перезавантажте сторінку або виконайте сценарій використання додатка, щоб зібрати статистику за завантаженими ресурсами.

Після зупинки запису ви побачите список всіх файлів стилів і скриптів із зазначенням відсотка використаного коду. Зелений колір смуги показує обсяг реально виконаних інструкцій, в той час як червоний колір позначає мертвий код, який був завантажений у браузер, але так і не знадобився користувачеві. Ви можете клікнути по будь-якому файлу, щоб відкрити його і побачити детальне підсвічування рядків, розділене за ступенем необхідності.

Цей інструмент особливо корисний при аудиті сторонніх бібліотек або проведенні рефакторингу старих проєктів. Видалення або ліниве завантаження невикористовуваних компонентів, виявлених за допомогою Coverage, дозволяє суттєво зменшити розмір бандлів. У результаті прискорюється первинний рендеринг сторінки і покращуються ключові показники продуктивності для пошукових систем.