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 все ще займає своє місце.
Клацніть піктограму Code Coverage у док-станції DevSuite Pro. Сканування запускається негайно та повідомляє, скільки правил було перевірено та яка частка з них невикористана.
У верхньому рядку наведено кількість таблиць стилів, загальну кількість правил, невикористаний відсоток і втрачені байти. Файли нижче впорядковано за тим, скільки вони витрачають.
Натисніть «Показати невикористані селектори» в будь-якому файлі, щоб прочитати, які саме правила не відповідають нічого на цій сторінці.
Відкрийте меню, вкладки, акордеони та режими, а потім натисніть Повторне сканування. Правила, елементи яких існують лише в цих станах, будуть переміщені з невикористаних до використаних — завжди робіть це перед видаленням.
Копіювати невикористані селектори дає вам блок CSS для роботи; Експорт JSON копіює повний звіт, включаючи інвентаризацію JavaScript, для квитка або документа аудиту.
Встановіть DevSuite Pro безкоштовно та отримайте понад 71 інструментів розробника
