С Chrome 59 вы можете оценить покрытие кода CSS и JS в Chrome DevTools.

Среди множества интересных новых функций в Google Chrome 59, выпущенном в июне, есть встроенный инструмент Code Coverage Tool. Теперь вы можете видеть, какие Javascript и CSS активно используются, а какие части лежат без работы, без сторонних инструментов, таких как Istanbul.

Примечание. Chrome Code Coverage не является прямой заменой таких инструментов, как Istanbul, которые необходимы при выполнении тестов Code Coverage во время сборки. Это инструмент оценки покрытия кода во время выполнения.

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

  • Сплошной зеленый цвет означает, что строка кода выполнена.
  • Сплошной красный означает, что выполнение не выполнено.
  • Строка кода красного и зеленого цвета, такая как строка 3 на рисунке 2, означает, что выполняется только часть кода в этой строке. Например, тернарное выражение типа var b = (a ›0)? a: 0 окрашен в красный и зеленый цвета.

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

Другие интересные функции Chrome 59:

  • Покрытие кода CSS и JS. Найдите неиспользуемые CSS и JS на новой вкладке «Покрытие».
  • Скриншоты всей страницы. Сделайте снимок экрана всей страницы от верхнего края окна просмотра до нижнего.
    Заблокируйте запросы. Вручную отключите отдельные запросы в панели «Сеть».
  • Выполнить асинхронное ожидание. Прогнозируемое выполнение асинхронных функций.
    Единое командное меню. Выполняйте команды и открывайте файлы из нового единого командного меню.

Для получения дополнительной информации перейдите к официальным примечаниям к выпуску.

Удачного кодирования!