Code Coverage prova tots els selectors de cada full d'estil llegible amb la pàgina en directe, de manera que podeu veure quines regles CSS no coincideixen actualment amb res, quants bytes gasta cada fitxer i quins scripts aguanten la primera pintura.
Els fulls d'estil només creixen. Arriba un tema amb regles per a pàgines que no teniu, un marc inclou components que no feu servir mai i tres redissenys més tard ningú no sap quina meitat del fitxer suporta càrrega. El resultat és un CSS que costa a tots els visitants l'amplada de banda i el temps de renderització per oferir regles que la pàgina no pot utilitzar.
Codi Cobertura mesura que directament. Passa per totes les regles de cada full d'estil que el navegador permetrà llegir, incloses les regles imbricades dins de les consultes multimèdia, els blocs @supports i @layer, i prova cada selector amb el DOM en directe. Una regla que no coincideix amb res ara s'informa com a no utilitzada, per fitxer, amb un percentatge, els bytes perduts i la llista completa de selectors que podeu ampliar i copiar.
Té cura amb les trampes evidents. Els pseudoelements i les pseudoclasses d'estat s'eliminen abans de fer coincidir, de manera que una regla :hover o ::before es jutja en funció de si existeix el seu selector de base en lloc d'esborrar-se incorrectament. Cap script no pot llegir els fulls d'estil de diferents orígens sense capçaleres CORS, de manera que es marquen com a il·legibles en lloc de comptar en silenci com a perfectes. I com que l'exploració reflecteix la pàgina tal com és en aquell moment, les regles dels menús, pestanyes i modalitats que encara no estan obertes semblaran que no s'utilitzen; així que obriu-les i premeu Torna a escanejar abans de suprimir res.
La pestanya de JavaScript respon a una pregunta diferent: pes i bloqueig. Inventaria tots els scripts que carrega la pàgina amb la seva mida de transferència, el seu temps de descàrrega i si és asíncronat, diferit, un mòdul, carregat dinàmicament o aguantant la primera pintura, després suma quants bytes estan bloquejant. No es ven deliberadament com a cobertura d'execució: saber quines línies de JavaScript s'executaven requereix l'API depuradora de Chrome, que DevSuite Pro no sol·licita, de manera que res aquí no pretén ser un informe a nivell de línia.
Cada regla de cada full d'estil llegible es prova amb el DOM en directe, incloses les regles dins de les consultes multimèdia, els blocs @supports i @layer, no estimats a partir de noms o mides de fitxers.
Cada full d'estil obté un percentatge no utilitzat, un recompte de regles utilitzades versus no utilitzades i el nombre de bytes perduts, ordenats de manera que el pitjor infractor estigui a la part superior.
Amplieu qualsevol fitxer per llegir els selectors que no coincideixin amb res i, a continuació, copieu-los com a bloc CSS per treballar-lo al vostre editor o lliurar-los a un company d'equip.
Els pseudoelements i les pseudoclasses d'estat com ara :hover i :focus-within s'eliminen abans de fer coincidir, de manera que les regles interactives es jutgen de manera justa en lloc de ser anul·lades.
Cada script es mostra amb la seva mida, temps de descàrrega i si és asíncron, diferit, un mòdul, carregat dinàmicament o bloquejant la primera pintura, més el total de bytes de bloqueig.
Els fulls d'estil d'origen creuat il·legibles es marquen en lloc de puntuar, i la pestanya JS diu clarament que mesura el pes, no quines línies s'executen. No hi ha números inventats.
Un tema comprat envia CSS per a desenes de dissenys de demostració. Vegeu la quantitat que el vostre lloc no utilitza mai i retalleu el fitxer amb proves en lloc de conjectures.
Comproveu quina part d'un marc CSS sobreviu en una plantilla real i si la vostra configuració de purga o tremolor d'arbre està fent el que creieu que és.
Enumereu els scripts que mantenen la representació, amb les seves mides i decidiu què ajornar, dividir o deixar anar per obtenir contingut a la pantalla més aviat.
Entreu amb números: quins fitxers malgasten més bytes, quant JavaScript està bloquejant i on la primera hora de treball paga més.
Prendre el control d'un lloc que no heu creat, feu una lectura ràpida de quant del seu CSS i JavaScript encara guanya el seu lloc.
Feu clic a la icona Cobertura de codi al moll de DevSuite Pro. L'exploració s'executa immediatament i informa quantes regles ha comprovat i quina part d'elles no s'utilitza.
La fila superior us ofereix el recompte de fulls d'estil, les regles totals, el percentatge no utilitzat i els bytes perduts. Els fitxers següents estan ordenats per quant malgasten.
Feu clic a Mostra els selectors no utilitzats en qualsevol fitxer per llegir exactament quines regles no coincideixen amb res d'aquesta pàgina.
Obriu menús, pestanyes, acordions i modals i, a continuació, premeu Torna a escanejar. Les regles els elements de les quals només existeixen en aquests estats passaran de no utilitzats a utilitzats; feu-ho sempre abans de suprimir-los.
Copia els selectors no utilitzats us ofereix un bloc CSS per treballar; Exportar JSON copia l'informe complet, inclòs l'inventari de JavaScript, per a un bitllet o un document d'auditoria.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 71 eines de desenvolupador per al teu navegador.
