Использование code coverage — нового инструмента Chrome DevTools.
Перевод заметки Ben Edelstein: Using the Chrome devtools new code coverage feature
Code coverage (инструмент анализа покрытия кода) наконец-то вышел из стадии экспериментов и уже появился в Chrome Canary и скоро будет доступен для всех. Это интересный инструмент, который пригодится как при работе с JavaScript, так и с CSS, поэтому я решил сделать быстрое демо и изучить, какую он может принести пользу.
Для чего он предназначен?
Code coverage запускает ваше веб-приложение и даёт возможно увидеть для каждого JS/CSS файла, какие строки кода выполнялись, а какие нет.
Здесь я запустил простую статическую веб-страницу, и Chrome создал эту разбивку файлов CSS и JS, которые на ней подключались. Полосы справа показывают относительный размер каждого файла, красный — неиспользованный код, а зеленый — код, который запускался.
Запись code coverage работает аналогично таймлайнам devtools — вы нажимаете кнопку записи, а затем взаимодействуете с вашим сайтом в обычном режиме. Как только вы закончите, Chrome выполнит некоторые вычисления и сгенерирует данные. Здесь мне было интересно, сколько неиспользованных CSS было на сайте, поэтому я перешел на различные подстраницы, чтобы убедиться, что я попал в каждую “ветку кода” CSS. Конечно же, здесь есть много возможностей для улучшения, так как 97% css на моем сайте не использовались!
Chrome также позволяет вам подробно изучить покрытие кода отдельных файлов. Здесь красные и зеленые полосы слева показывают, какие конкретно строки исполнялись, а какие нет. Обратите внимание, что при проверке минифицированных файлов вы можете нажать кнопку в нижнем левом углу файла, чтобы развернуть ваш код в удобночитаемый вид.
Почему это полезно?
При работе над сложным или долгосрочным проектом легко накапливается мертвый код. Если вы используете webpack или другую систему сборки JS, есть инструменты для предотвращения попадания мёртвого JS кода в продакшен. Но для CSS сделать это несколько сложнее. Наличие инструмента анализа покрытия кода в Chrome — отличный способ получить краткий обзор того, сколько лишнего кода вы отправляете в продакшен, и какие файлы стоит оптимизировать.
Как его получить?
Загрузите Chrome Canary или подождите несколько недель, пока он появится в обычном Chrome.
Стоит почитать
- Более полезные (и менее известные) инструменты в Chrome devtools: https://blog.logrocket.com/making-the-most-of-the-chrome-developer-tools-8cac9a206979
- Визуализация производительности бекенда в Chrome dev tools: https://blog.logrocket.com/visualizing-backend-performance-in-the-chrome-devtools-bb6fd232540
Примечание переводчика: для тех, кто не может найти этот новый инструмент в Chrome devtools, я в свою очередь подготовил небольшое демо.
Читайте нас на Медиуме, контрибьютьте на Гитхабе, общайтесь в группе Телеграма, следите в Твиттере и канале Телеграма, рекомендуйте в VK и Facebook. Скоро подъедет подкаст, не теряйтесь.
