Sinusubukan ng Code Coverage ang bawat selector sa bawat nababasang stylesheet laban sa live na pahina, para makita mo kung aling mga panuntunan ng CSS ang kasalukuyang tumutugma sa wala, ilang byte ang naaaksaya ng bawat file, at kung aling mga script ang humahawak ng unang pintura.
Ang mga stylesheet ay lumalaki lamang. Dumating ang isang tema na may kasamang mga panuntunan para sa mga page na wala ka, isang framework ang nagpapadala ng mga bahagi na hindi mo kailanman ginagamit, at tatlong muling pagdidisenyo sa kalaunan ay walang nakatitiyak kung aling kalahati ng file ang may load-bearing. Ang resulta ay CSS na nagkakahalaga ng bawat bandwidth ng bisita at nagbibigay ng oras upang maghatid ng mga panuntunan na hindi magagamit ng page.
Direktang sumusukat ang Code Coverage. Isinasagawa nito ang bawat panuntunan sa bawat stylesheet na hahayaan itong basahin ng browser — kasama ang mga panuntunang naka-nest sa loob ng mga query sa media, @supports at @layer blocks — at sinusubok ang bawat selector laban sa live na DOM. Ang isang panuntunan na walang tumutugma sa ngayon ay iniuulat bilang hindi nagamit, bawat file, na may porsyento, ang mga nasayang na byte, at ang buong listahan ng mga tagapili na maaari mong palawakin at kopyahin.
Ito ay maingat tungkol sa mga halatang bitag. Ang mga pseudo-element at state pseudo-class ay hinuhusgahan bago itugma, kaya ang isang :hover o ::before na panuntunan ay hinuhusgahan kung ang base selector nito ay umiiral sa halip na maling alisin. Ang mga stylesheet na inihahatid na cross-origin nang walang CORS na mga header ay hindi mababasa ng anumang script, kaya na-flag ang mga ito bilang hindi nababasa sa halip na tahimik na binibilang bilang perpekto. At dahil ang pag-scan ay sumasalamin sa pahina tulad ng sa sandaling iyon, ang mga panuntunan para sa mga menu, tab at modal na hindi pa bukas ay magmumukhang hindi ginagamit — kaya buksan ang mga ito at pindutin ang Muling i-scan bago ka magtanggal ng anuman.
Sinasagot ng tab na JavaScript ang ibang tanong: timbang at pagharang. Iniimbentaryo nito ang bawat script na nilo-load ng page kasama ang laki ng paglipat nito, ang oras ng pag-download nito, at kung ito ay async, ipinagpaliban, isang module, dynamic na na-load o pinipigilan ang unang pintura, pagkatapos ay isasama kung ilang byte ang nakaharang. Ito ay sadyang hindi ibinebenta bilang saklaw ng pagpapatupad — ang pag-alam kung aling mga linya ng JavaScript ang tumakbo ay nangangailangan ng debugger API ng Chrome, na hindi hinihiling ng DevSuite Pro, kaya wala dito na nagpapanggap na isang ulat sa antas ng linya.
Ang bawat panuntunan sa bawat nababasang stylesheet ay sinusubok laban sa live na DOM, kabilang ang mga panuntunan sa loob ng mga query sa media, @supports at @layer block — hindi tinatantya mula sa mga pangalan o laki ng file.
Ang bawat stylesheet ay nakakakuha ng hindi nagamit na porsyento, isang nagamit na laban sa hindi nagamit na bilang ng panuntunan at ang bilang ng mga nasayang na byte, na pinagsunod-sunod upang ang pinakamasamang nagkasala ay nasa itaas.
Palawakin ang anumang file upang mabasa ang mga tagapili na walang tugma, pagkatapos ay kopyahin ang mga ito bilang isang bloke ng CSS upang gawin ito sa iyong editor o ibigay sa isang kasamahan sa koponan.
Ang mga pseudo-element at state pseudo-class gaya ng :hover at :focus-within ay inaalis bago magtugma, kaya patas na hinuhusgahan ang mga interactive na panuntunan sa halip na maalis.
Ang bawat script na nakalista kasama ang laki nito, oras ng pag-download at kung ito ay async, ipinagpaliban, isang module, dynamic na na-load o hinaharangan ang unang pintura — kasama ang kabuuang mga blocking byte.
Ang mga hindi nababasang cross-origin stylesheet ay na-flag sa halip na naka-score, at malinaw na sinasabi ng tab na JS na sinusukat nito ang timbang, hindi kung aling mga linya ang naisagawa. Walang naimbentong numero.
Ang isang biniling tema ay nagpapadala ng CSS para sa dose-dosenang mga layout ng demo. Tingnan kung gaano karami nito ang hindi kailanman ginagamit ng iyong site at bawasan ang file gamit ang ebidensya sa halip na hulaan.
Suriin kung gaano karami sa isang CSS framework ang nananatili sa isang tunay na template, at kung ang iyong pag-purge o tree-shaking configuration ay ginagawa kung ano ang iyong iniisip.
Ilista ang mga script na nagpapanatili ng pag-render, kasama ang mga laki ng mga ito, at magpasya kung ano ang ipagpaliban, hatiin o i-drop upang makakuha ng nilalaman sa screen nang mas maaga.
Maglakad gamit ang mga numero: aling mga file ang nag-aaksaya ng pinakamaraming byte, kung gaano karaming JavaScript ang naba-block, at kung saan ang unang oras ng trabaho ay nagbabayad ng higit.
Ang pagkuha sa isang site na hindi mo binuo, mabilis na basahin kung gaano kalaki ang nakuha ng CSS at JavaScript nito.
I-click ang icon ng Code Coverage sa DevSuite Pro dock. Ang pag-scan ay tumatakbo kaagad at nag-uulat kung gaano karaming mga panuntunan ang nasuri nito at kung anong bahagi ng mga ito ang hindi nagamit.
Ang tuktok na hilera ay nagbibigay sa iyo ng bilang ng stylesheet, kabuuang mga panuntunan, ang hindi nagamit na porsyento at ang mga nasayang na byte. Ang mga file sa ibaba ay inayos ayon sa kung gaano kalaki ang kanilang nasayang.
I-click ang ipakita ang mga hindi nagamit na tagapili sa anumang file upang basahin nang eksakto kung aling mga panuntunan ang tumutugma sa wala sa pahinang ito.
Buksan ang mga menu, tab, accordion at modals, pagkatapos ay pindutin ang Muling i-scan. Ang mga panuntunan kung saan ang mga elemento ay umiiral lamang sa mga estadong iyon ay lilipat mula sa hindi nagamit tungo sa ginagamit - palaging gawin ito bago magtanggal.
Ang kopyahin ang mga hindi nagamit na mga tagapili ay nagbibigay sa iyo ng isang bloke ng CSS na gagawin; Kinokopya ng Export JSON ang buong ulat, kabilang ang imbentaryo ng JavaScript, para sa isang tiket o isang dokumento sa pag-audit.
I-install ang DevSuite Pro nang libre at i-unlock ang 71+ developer tools para sa iyong browser.
