Code Coverage проверяет каждый селектор в каждой читаемой таблице стилей на соответствие живой странице, поэтому вы можете увидеть, какие правила CSS в настоящее время ничему не соответствуют, сколько байтов тратит каждый файл и какие скрипты задерживают первую отрисовку.
Таблицы стилей только растут. Появляется тема с правилами для страниц, которых у вас нет, фреймворк поставляется с компонентами, которые вы никогда не используете, и спустя три редизайна никто не знает, какая половина файла является несущей. В результате получается CSS, который требует затрат пропускной способности каждого посетителя и времени рендеринга для предоставления правил, которые страница не может использовать.
Покрытие кода напрямую измеряет это. Он проверяет каждое правило в каждой таблице стилей, которую браузер позволяет ему прочитать, включая правила, вложенные в медиа-запросы, блоки @supports и @layer, и проверяет каждый селектор на соответствие живому DOM. Правило, которое в данный момент ничего не соответствует, сообщается как неиспользуемое для каждого файла, с процентом, потраченными байтами и полным списком селекторов, которые можно расширить и скопировать.
Он осторожен с очевидными ловушками. Псевдоэлементы и псевдоклассы состояний удаляются перед сопоставлением, поэтому правило :hover или ::before оценивается на основании того, существует ли его базовый селектор, а не списывается по ошибке. Таблицы стилей, обслуживаемые из разных источников без заголовков CORS, не могут быть прочитаны ни одним скриптом, поэтому они помечаются как нечитаемые, а не автоматически считаются идеальными. А поскольку сканирование отражает страницу такой, какая она есть на данный момент, правила для меню, вкладок и модальных окон, которые еще не открыты, будут выглядеть неиспользованными — поэтому откройте их и нажмите «Повторное сканирование», прежде чем что-либо удалять.
Вкладка JavaScript отвечает на другой вопрос: вес и блокировка. Он инвентаризирует каждый скрипт, загружаемый страницей, с указанием его размера передачи, времени загрузки, а также того, является ли он асинхронным, отложенным, модульным, загружаемым динамически или задерживающим первую отрисовку, а затем подсчитывает, сколько байт блокируется. Он намеренно не продается как покрытие выполнения — для того, чтобы узнать, какие строки JavaScript выполнялись, требуется API-интерфейс отладчика Chrome, который DevSuite Pro не запрашивает, поэтому ничто здесь не претендует на статус отчета на уровне строки.
Каждое правило в каждой читаемой таблице стилей проверяется на соответствие реальному DOM, включая правила внутри медиа-запросов, блоки @supports и @layer, а не оценивается по именам или размерам файлов.
Каждая таблица стилей получает процент неиспользованных правил, количество использованных и неиспользованных правил и количество потраченных впустую байтов, отсортированных таким образом, чтобы худший нарушитель находился вверху.
Разверните любой файл, чтобы прочитать селекторы, которые ничему не соответствуют, затем скопируйте их как блок CSS для работы в редакторе или передайте товарищу по команде.
Псевдоэлементы и псевдоклассы состояний, такие как :hover и :focus-within, перед сопоставлением удаляются, поэтому интерактивные правила оцениваются справедливо, а не списываются.
Для каждого скрипта указан его размер, время загрузки, а также то, является ли он асинхронным, отложенным, модульным, динамически загружаемым или блокирующим первую отрисовку, а также общее количество блокирующих байтов.
Нечитаемые таблицы стилей из разных источников помечаются, а не оцениваются, а на вкладке JS ясно указано, что она измеряет вес, а не то, какие строки выполняются. Никаких выдуманных цифр.
Купленная тема включает в себя CSS для десятков демонстрационных макетов. Посмотрите, какая часть информации на вашем сайте никогда не используется, и сократите файл, используя доказательства, а не догадки.
Проверьте, какая часть CSS-фреймворка сохраняется в реальном шаблоне, и делает ли ваша конфигурация очистки или встряхивания дерева то, что вы думаете.
Перечислите сценарии, поддерживающие рендеринг, с указанием их размеров и решите, что отложить, разделить или удалить, чтобы контент отображался на экране быстрее.
Давайте посмотрим на цифры: какие файлы тратят больше всего байтов, сколько JavaScript блокируется и где первый час работы окупается больше всего.
Взяв на себя управление сайтом, который вы не создавали, узнайте, какая часть его CSS и JavaScript все еще занимает свое место.
Щелкните значок «Покрытие кода» в доке DevSuite Pro. Сканирование запускается немедленно и сообщает, сколько правил оно проверило и какая часть из них не используется.
В верхней строке указано количество таблиц стилей, общее количество правил, неиспользованный процент и потраченные байты. Файлы ниже отсортированы по объему траты.
Нажмите «Показать неиспользуемые селекторы» в любом файле, чтобы точно узнать, какие правила ничему не соответствуют на этой странице.
Откройте меню, вкладки, аккордеоны и модальные окна, затем нажмите «Повторное сканирование». Правила, элементы которых существуют только в этих состояниях, перейдут из неиспользуемого в использованное — всегда делайте это перед удалением.
Копирование неиспользуемых селекторов дает вам блок CSS для работы; Экспорт JSON копирует полный отчет, включая инвентаризацию JavaScript, для заявки или документа аудита.
Установите DevSuite Pro бесплатно и разблокируйте более 71 инструментов разработчика для вашего браузера.
