Использование Coverage в Chrome DevTools

Coverage — экспериментальная функция, введённая в Chrome 61, разработанная для анализа CSS и JS. 

Зачем оно нужно?

Coverage анализирует CSS/JS-файлы и сообщает о том, какая их часть используется на сайте в данный момент. Для начала работы нужно нажать на круглую кнопку в левом верхнем углу вкладки Coverage. Когда она красного цвета, идёт анализ ресурсов и результаты автоматически обновляются. 

Chrome Coverage

На изображении выше представлен анализ главной страницы моего сайта. Как можно заметить, я практически не использую возможности Bootstrap (только на 7%), поэтому, скорее всего, в будущем откажусь от него в пользу какого-нибудь легковесного grid-фреймворка; тем более, я использовал Bootstrap исключительно ради этого компонента — адаптивная сетка. 

Chrome Coverage File source

Если кликнуть по файлу, то он откроется во вкладке Sources с информацией о том, какие конкретные строчки кода используются или не используются на странице. 

Почему это полезно?

При разработке сложного проекта, который предстоит сопровождать долгое время, важно вовремя устранять неиспользуемый код. Если при использовании webpack или другой системы сборки JS для этого есть необходимые средства, то с анализом CSS не всё так просто. Но благодаря новому инструменту в Chrome DevTools можно сделать быстрый обзор кода для того, чтобы при необходимости оптимизировать его. 

Комментарии