Code Coverage prueba cada selector en cada hoja de estilo legible con la página activa, para que pueda ver qué reglas CSS actualmente no coinciden con nada, cuántos bytes desperdicia cada archivo y qué scripts retrasan la primera pintura.
Las hojas de estilo sólo crecen. Llega un tema con reglas para páginas que no tienes, un marco incluye componentes que nunca usas y tres rediseños después, nadie está seguro de qué mitad del archivo soporta carga. El resultado es CSS que le cuesta a cada visitante ancho de banda y tiempo de procesamiento para entregar reglas que la página no puede usar.
La cobertura del código mide eso directamente. Recorre cada regla en cada hoja de estilo que el navegador le permitirá leer, incluidas las reglas anidadas dentro de consultas de medios, bloques @supports y @layer, y prueba cada selector con el DOM en vivo. Una regla que no coincide con nada en este momento se informa como no utilizada, por archivo, con un porcentaje, los bytes desperdiciados y la lista completa de selectores que puede expandir y copiar.
Tiene cuidado con las trampas obvias. Los pseudoelementos y las pseudoclases de estado se eliminan antes de hacer coincidir, por lo que una regla :hover o ::before se juzga en función de si su selector base existe en lugar de descartarse incorrectamente. Las hojas de estilo entregadas en origen cruzado sin encabezados CORS no pueden ser leídas por ningún script, por lo que se marcan como ilegibles en lugar de contarse silenciosamente como perfectas. Y debido a que el escaneo refleja la página tal como está en ese momento, las reglas para menús, pestañas y modales que aún no están abiertos parecerán no utilizadas, así que ábralas y presione Volver a escanear antes de eliminar algo.
La pestaña JavaScript responde a una pregunta diferente: peso y bloqueo. Inventa cada script que carga la página con su tamaño de transferencia, su tiempo de descarga y si es asíncrono, diferido, un módulo, cargado dinámicamente o reteniendo la primera pintura, luego suma cuántos bytes están bloqueando. Deliberadamente no se vende como cobertura de ejecución: saber qué líneas de JavaScript se ejecutaron requiere la API de depuración de Chrome, que DevSuite Pro no solicita, por lo que nada aquí pretende ser un informe a nivel de línea.
Cada regla en cada hoja de estilo legible se prueba con el DOM en vivo, incluidas las reglas dentro de las consultas de medios, los bloques @supports y @layer, no se estiman a partir de nombres o tamaños de archivos.
Cada hoja de estilo obtiene un porcentaje no utilizado, un recuento de reglas utilizadas versus no utilizadas y el número de bytes desperdiciados, ordenados de modo que el peor infractor esté en la parte superior.
Expanda cualquier archivo para leer los selectores que no coinciden con nada, luego cópielos como un bloque CSS para trabajar con ellos en su editor o entréguelos a un compañero de equipo.
Los pseudoelementos y pseudoclases de estado como :hover y :focus-within se eliminan antes de hacer coincidir, por lo que las reglas interactivas se juzgan de manera justa en lugar de descartarse.
Cada script se enumera con su tamaño, tiempo de descarga y si es asíncrono, diferido, un módulo, cargado dinámicamente o bloqueando la primera pintura, más el total de bytes de bloqueo.
Las hojas de estilo ilegibles de origen cruzado se marcan en lugar de calificarse, y la pestaña JS dice claramente que mide el peso, no qué líneas se ejecutan. Nada de números inventados.
Un tema comprado incluye CSS para docenas de diseños de demostración. Vea cuánto de su sitio nunca usa y reduzca el archivo con evidencia en lugar de conjeturas.
Compruebe qué parte de un marco CSS sobrevive en una plantilla real y si su configuración de purga o agitación de árboles está haciendo lo que cree que hace.
Enumere los scripts que retrasan el procesamiento, con sus tamaños, y decida qué diferir, dividir o eliminar para que el contenido aparezca en la pantalla antes.
Entra con números: qué archivos desperdician más bytes, cuánto JavaScript se bloquea y dónde la primera hora de trabajo vale más la pena.
Al tomar el control de un sitio que usted no creó, obtenga una lectura rápida de cuánto de su CSS y JavaScript aún ocupa su lugar.
Haga clic en el icono Cobertura de código en el Dock de DevSuite Pro. El análisis se ejecuta inmediatamente e informa cuántas reglas verificó y qué parte de ellas no se utiliza.
La fila superior le brinda el recuento de hojas de estilo, las reglas totales, el porcentaje no utilizado y los bytes desperdiciados. Los archivos a continuación están ordenados según la cantidad que desperdician.
Haga clic en mostrar selectores no utilizados en cualquier archivo para leer exactamente qué reglas no coinciden con nada en esta página.
Abra menús, pestañas, acordeones y modales, luego presione Volver a escanear. Las reglas cuyos elementos solo existen en esos estados pasarán de no utilizadas a usadas; haga siempre esto antes de eliminarlas.
Copiar selectores no utilizados le proporciona un bloque CSS con el que trabajar; Exportar JSON copia el informe completo, incluido el inventario de JavaScript, para un ticket o un documento de auditoría.
Instala DevSuite Pro gratis y desbloquea más de 71 herramientas de desarrollador para tu navegador.
