Code Coverage testaa jokaisen luettavan tyylitaulukon jokaisen valitsimen live-sivua vasten, jotta näet, mitkä CSS-säännöt tällä hetkellä eivät vastaa mitään, kuinka monta tavua kukin tiedosto tuhlaa ja mitkä komentosarjat kestävät ensimmäistä maalia.
Tyylitaulukot vain kasvavat. Teema saapuu säännöillä sivuille, joita sinulla ei ole, kehys lähettää komponentteja, joita et koskaan käytä, ja kolme uudelleensuunnittelua myöhemmin kukaan ei ole varma, kumpi puoli tiedostosta on kantava. Tuloksena on CSS, joka maksaa jokaiselle vierailijalle kaistanleveyden ja renderöintiajan sääntöjen toimittamiseen, jota sivu ei voi käyttää.
Code Coverage mittaa sitä suoraan. Se ohjaa jokaisen säännön jokaisessa tyylitaulukossa, jonka selain antaa lukea – mukaan lukien mediakyselyihin sisäkkäiset säännöt, @supports- ja @layer-lohkot – ja testaa jokaisen valitsimen live-DOM:ia vastaan. Sääntö, joka ei vastaa mitään tällä hetkellä, raportoidaan käyttämättömänä tiedostokohtaisesti, prosenttiosuutena, hukkaan heitetyistä tavuista ja täydellisestä luettelosta valitsimista, joita voit laajentaa ja kopioida.
Se on varovainen ilmeisten ansojen suhteen. Pseudo-elements and state pseudo-classes are stripped before matching, so a :hover or ::before rule is judged on whether its base selector exists rather than being wrongly written off. Stylesheets served cross-origin without CORS headers cannot be read by any script, so they are flagged as unreadable instead of being silently counted as perfect. And because the scan reflects the page as it is at that moment, rules for menus, tabs and modals that are not open yet will look unused — so open them and press Re-scan before you delete anything.
JavaScript-välilehti vastaa toiseen kysymykseen: paino ja esto. It inventories every script the page loads with its transfer size, its download time, and whether it is async, deferred, a module, loaded dynamically or holding up first paint, then totals how many bytes are blocking. It is deliberately not sold as execution coverage — knowing which JavaScript lines ran requires Chrome's debugger API, which DevSuite Pro does not request, so nothing here pretends to be a line-level report.
Jokaisen luettavan tyylitaulukon jokainen sääntö testataan live-DOM:n suhteen, mukaan lukien säännöt mediakyselyissä, @supports- ja @layer-lohkoissa – ei arvioitu tiedostonimien tai koon perusteella.
Jokainen tyylitaulukko saa käyttämättömän prosenttiosuuden, käytettyjen ja käyttämättömien sääntömäärän sekä hukattujen tavujen määrän lajiteltuna siten, että pahin rikkoja on kärjessä.
Laajenna mitä tahansa tiedostoa lukeaksesi valitsimet, jotka eivät vastaa mitään, ja kopioi ne sitten CSS-lohkona, jota voit käsitellä editorissasi tai käsissäsi joukkuetoverillesi.
Pseudoelementit ja tilan pseudoluokat, kuten :hover ja :focus-in, poistetaan ennen täsmäämistä, joten interaktiiviset säännöt arvioidaan oikeudenmukaisesti sen sijaan, että ne kirjattaisiin pois.
Jokainen skripti luetellaan kokoineen, latausaikoineen ja se, onko se asynkroninen, viivästetty, moduuli, dynaamisesti ladattu vai estävä ensimmäinen maali – plus estotavujen kokonaismäärä.
Lukemattomat eri alkuperätyylisivut merkitään pisteytyksen sijaan, ja JS-välilehti sanoo selvästi, että se mittaa painoa, ei suoritettuja rivejä. Ei keksittyjä numeroita.
Ostettu teema toimittaa CSS:n kymmenille demo-asetteluille. Katso, kuinka paljon siitä sivustosi ei koskaan käytä, ja leikkaa tiedostoa todisteilla arvausten sijaan.
Tarkista, kuinka suuri osa CSS-kehyksestä säilyy todellisessa mallissa ja tekeekö tyhjennys- tai puuta ravisteleva kokoonpanosi sitä, mitä luulet.
Luettele hahmonnusta hidastavat komentosarjat niiden kokoineen ja päätä, mitä lykätä, jakaa tai pudotat, jotta sisältö tulee näytölle nopeammin.
Mene sisään numeroiden avulla: mitkä tiedostot tuhlaavat eniten tavuja, kuinka paljon JavaScript estää ja missä ensimmäinen tunti työstä kannattaa eniten.
Kun otat haltuunsa sivuston, jota et ole rakentanut, lue nopeasti kuinka suuri osa sen CSS:stä ja JavaScriptistä ansaitsee edelleen paikkansa.
Napsauta Code Coverage -kuvaketta DevSuite Pro Dockissa. Skannaus suoritetaan välittömästi ja raportoi kuinka monta sääntöä se on tarkistanut ja mikä osa niistä on käyttämättä.
Ylärivillä näet tyylitaulukon määrän, kokonaissäännöt, käyttämättömät prosenttiosuudet ja hukatut tavut. Alla olevat tiedostot on järjestetty tuhlauksen mukaan.
Napsauta Näytä käyttämättömät valitsimet missä tahansa tiedostossa nähdäksesi tarkalleen mitkä säännöt eivät vastaa mitään tällä sivulla.
Avaa valikot, välilehdet, haitarit ja modaalit ja paina sitten Re-scan. Säännöt, joiden elementit ovat olemassa vain näissä tiloissa, siirtyvät käyttämättömistä käytettyihin – tee tämä aina ennen poistamista.
Kopioi käyttämättömät valitsimet antaa sinulle CSS-lohkon, jota voit käsitellä; Vie JSON kopioi koko raportin, mukaan lukien JavaScript-inventaarin, lippua tai tarkastusasiakirjaa varten.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 71 kehittäjätyökalua selaimellesi.
