Измерение Javascript и покрытия CSS с помощью инструментов разработчика Google Chrome

1. Почему это полезно
2. Включение покрытия кода
3. Захват покрытия кода
4. Динамическое покрытие
5. экспорт
6. Заключение

Новая функция в инструментах разработчика Google Chrome позволяет измерять охват файлов CSS и Javascript. Это позволяет легко обнаруживать и удалять неиспользуемые части кода.

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

Эта функция была добавлена ​​в Google Chrome 59 наряду с рядом других полезных функций, таких как полностраничные скриншоты и блокировка запросов. Он позволяет вам записывать ваш сеанс, а когда вы закончите, вы можете проверить, какие части вашего Javascript и CSS-кода действительно использовались во время сеанса, а какие нет. Каждое приложение обычно накапливает много кода JS и CSS с течением времени, и значительная его часть обычно состоит из кода, который больше не используется. Удаление этого мертвого кода очень важно, так как это ускорит время загрузки ваших страниц. Более того, ваш код станет менее сложным, что сделает обслуживание и дальнейшую разработку вашего приложения более простым и менее болезненным.

Включение покрытия кода

Покрытие кода измеряется на вкладке Покрытие в Инструментах разработчика. Чтобы открыть Dev Tools, нажмите:

• ⌘ + ⌥ + I (Mac)
• Ctrl + Shift + I (Windows, Linux)

После этого вы можете получить доступ к покрытию из командного меню:

• ⌘ + ⇧ + P (Mac)
• Ctrl + Shift + P (Windows, Linux)

Затем введите Показать покрытие.

Кроме того, вы можете отобразить вкладку Покрытие в меню Инструменты разработчика, выбрав Дополнительные инструменты → Покрытие.

Когда вам удастся открыть вкладку покрытия, это будет выглядеть так:

Захват покрытия кода

После открытия вкладки Coverage вам просто нужно нажать кнопку записи ( Instrument Coverage ). Затем вы начинаете выполнять желаемый вариант использования. То есть - вы начинаете перемещаться по приложению, нажимаете кнопки, заполняете формы и тому подобное. Когда вы закончите, просто нажмите кнопку еще раз, чтобы остановить запись и показать результаты покрытия. Это пример результатов покрытия от просмотра stackoverflow.com:

Как видите, в таблице показаны все файлы JS и CSS, которые были загружены во время моей сессии. Каждый файл содержит информацию о том, какая большая часть файла фактически использовалась в моем сеансе - как в процентах, так и в байтах. В самом низу строки состояния находится сводка. Можно сказать, что не использовались целые 83%, то есть 972 КБ.

Это хороший обзор, но вы можете отобразить отчет по каждой строке для каждого из этих файлов, дважды щелкнув строку в сводной таблице:

Зеленые линии означают, что код в строке был выполнен полностью, красные линии вообще не использовались во время сеанса записи. Красные / зеленые линии были выполнены частично - использовалась только некоторая часть кода, но не все.

Динамическое покрытие

При использовании функции покрытия вы должны быть осторожны, чтобы не делать поспешных выводов. Показанные данные покрытия собираются динамически на основе вашего поведения и действий в приложении. Это означает, что он собирается и вычисляется только на основе действий, которые вы фактически выполнили во время записанного сеанса. Многие элементы на странице обычно отображаются динамически только при определенных условиях. Некоторые из них могут отображаться только в определенных угловых случаях, которые встречаются редко и с которыми вы не сталкивались при записи сеанса. Такой код будет помечен как неиспользуемый, но вы не сможете удалить его, так как он будет отсутствовать в некоторых сценариях. Всегда будьте осторожны при удалении частей кода, которые вы считаете неиспользованными, поскольку это не всегда должно быть так.

экспорт

ОБНОВЛЕНИЕ: Начиная с версии 73, вы, наконец, можете экспортировать данные покрытия. В верхней панели вкладки Coverage есть новая кнопка Export ..., которая позволяет экспортировать данные в формате JSON:

Заключение

Новая функция Google Chrome добавляет интегрированную поддержку для расчета динамического покрытия кода для файлов Javascript и CSS, которые можно использовать для обнаружения неиспользуемого кода или кода, который используется только в некоторых конкретных сценариях. Такой код является хорошим кандидатом на удаление или отложенную загрузку, где вы можете значительно ускорить время начальной загрузки вашего приложения.

Похожие

Комментарии