Экспериментальный трекер CSS в новых версиях Chrome Canary
В экспериментальной версии Chrome Canary появилась новая полезная фича для Front-end разработчиков и верстальщиков — продвинутый трекер CSS кода.
В Chrome DevTools уже есть похожая стандартная функция, которую можно обнаружить если запустить аудит сайта из вкладки Audits. Она называется «CSS coverage» и призвана помочь оптимизировать код. На практике она не особо полезна по нескольким причинам:
1. Не понимает контекст. Стандартный аудит работает только для одной конкретной страницы. Очевидно, что разные страницы могут использовать разные CSS свойства. Трекер этого не поймёт и покажет их как неиспользуемые.
2. Не визуализирует данные. Стандартный трекер всего лишь показывает список неиспользуемых CSS свойств от начала документа к его концу. Можно кликнуть на конкретное свойство и посмотреть его расположение в CSS файле, но посмотреть сразу весь CSS код и визуально оценить, какие куски CSS не используются — нельзя. Каждый раз приходится возвращаться, чтобы посмотреть следующее неиспользуемое свойство. Неудобно.
И это только самое очевидное, таких проблем там хватает с избытком. Одним словом, если вам нужно тестировать что-то сложное, то эта штука становилась бесполезной. Проинспектировать действительно рабочий проект вообще несбыточно. Очевидно, что эти минусы понимают и сами разработчики DevTools.
CSS Tracker — это экспериментальная улучшенная версия отслеживания используемого/неиспользуемого CSS кода. В отличие от предшественника, он умеет визуально размечать куски кода. Его основной принцип работы похож на другие инструменты аналитики Dev Tools. Сначала записываем свои действия (переходим по страницам, меняем размер окна браузера, кликаем по кнопкам), а трекер анализирует полученную информацию и показывает результат.
Инструкция по установке:
1. Установить Chrome Canary. Canary — экспериментальная версия браузера Google Chrome c самыми последними нововведениями и изменениями. Он обновляется каждый день, поэтому всегда есть шансы, что там может что-то сломаться или очень резко изменится, поэтому нужно быть особо бдительным. При этом не нужно бояться, он не заденет настройки вашего основного браузера, его можно без опаски ставить вместе с обычной версией Google Chrome.
2. Включить поддержку Developer Tools experiments через chrome://flags. Пока что панель CSS Tracker настолько экспериментальна, что даже в Canary DevTools её нельзя запустить напрямую, без флагов. Поэтому нужно зайти в chrome://flags и переключить настройку Developer Tools experiments в положение Enable.
Не забываем после этого перезапустить браузер.
3. Активируем CSS Tracker
Осторожно!
Сейчас нужно быть предельно осторожным и использовать эту возможность только в качестве экспериментов. Использование на реальных проектах без понимания принципов того, как она работает, может привести к плачевным результатам. Учитывая, что это экспериментальная функция, она может измениться в любой момент, без предупреждения.
Теперь откроем DevTools на тестируемом сайте. Добавим на панель с инструментами новый трекер из списка — CSS Tracker (там, где обитает консоль Dev Tools) Жмём кнопку Start recording и начинаем безудержно переходить по страницам сайта, изменять размер окна браузера и т.д. Пока идёт запись, трекер будет записывать все обращения страниц сайта к CSS коду.
Останавливаем запись и смотрим, что получилось. Трекер подсветил весь CSS код. Используемые во время записи свойства подсвечены зелёным, а неиспользуемые — красным. Результаты такой проверки можно увидеть на первом скриншоте.
По мотивам видео с конференции ffconf 2016