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+ инструмента за разработчици за вашия браузър.
