Extraer el CSS usado de una exportación de Coverage de Chrome
Arrastre el JSON del panel Coverage y obtenga una sola hoja de estilos con solo las reglas que aplicó la página, todavía dentro de sus media queries.
Coverage JSON a CSS
El panel Coverage (Cobertura) de Chrome DevTools muestra qué parte de cada hoja de estilos usa realmente una página, y su botón Export (Exportar) lo guarda como JSON. Por sí solo, el archivo no sirve de mucho: contiene el texto completo de cada archivo más listas de posiciones de caracteres. Esta página abre el eliminador de CSS no utilizado en su pestaña JSON de Coverage, que convierte la exportación en una hoja de estilos lista para publicar.
Grabe de forma que no falte nada
El resultado es tan completo como la grabación. Empiece a grabar con el botón de recarga del panel, para incluir las reglas usadas durante la carga de la página, y después use cada parte de la página que podría usar un visitante: el menú móvil, los desplegables, las pestañas, los acordeones, las ventanas emergentes y los formularios con sus estados de error. Cambie el tamaño de la ventana pasando por sus puntos de corte mientras graba. Todo lo que no active se trata como no usado.
Qué pasa con cada parte de la hoja de estilos
| En la hoja de estilos | En el resultado |
|---|---|
| Una regla que la página usó | Se conserva, tal como está escrita |
Una regla usada dentro de @media, @supports, @container o @layer | Se conserva dentro del mismo bloque |
| Un bloque en el que no queda ninguna regla usada | Se elimina junto con sus reglas |
@font-face, @keyframes, @import, @charset | Se conservan siempre |
| Una regla que la página nunca usó | Se elimina |
Estilos y scripts en línea dentro de la exportación
El propio HTML de la página también aparece en la exportación, con los rangos de sus bloques <style> y <script> en línea. La herramienta extrae cada bloque de estilo del documento, conserva sus reglas usadas y lo muestra en la tabla de resultados como un estilo en línea. Los archivos JavaScript se omiten, y el resumen indica cuántas entradas se dejaron fuera.
Usar el resultado
La salida empieza cada hoja de estilos con un comentario que indica su dirección, así que puede volver a dividirla o mantenerla como un solo archivo. Sustituya los enlaces a hojas de estilos de la página por el archivo nuevo, pruebe la página en todos los anchos y conserve los archivos originales hasta estar seguro. Para un sitio hecho con un maquetador, la guía para convertir una página de Elementor en HTML y CSS cubre el resto de la migración, y PurgeCSS online es la opción adecuada cuando tiene el HTML y el CSS en lugar de una grabación.