El panel Coverage te ayuda a encontrar código JavaScript y CSS sin usar. Quitar el código sin usar puede acelerar la carga de la página y guardar los datos móviles de tus usuarios.
Descripción general
El envío de código JavaScript o CSS sin usar es un problema común en el desarrollo web. Por ejemplo, supongamos que quieres usar el componente de botón de Bootstrap en tu página. Para usar el componente de botón, debes agregar un vínculo a la hoja de estilo de Bootstrap en tu HTML, de la siguiente manera:
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
Esta hoja de estilo no solo incluye el código del componente de botón. Contiene el CSS de todos los componentes de Bootstrap. Sin embargo, no usas ninguno de los otros componentes de Bootstrap. Por lo tanto, tu página descarga una gran cantidad de CSS que no necesita. Este CSS adicional es un problema por los siguientes motivos:
- El código adicional ralentiza la carga de la página. Consulta CSS que bloquea la visualización.
- Si un usuario accede a la página en un dispositivo móvil, el código adicional usa sus datos móviles.
El panel Coverage te permite grabar tu página y ver un informe del total de bytes usados y sin usar de los recursos CSS y JavaScript, y hacer un seguimiento del código en el panel Sources.
Abre el panel Coverage
- Abre las Herramientas para desarrolladores.
- Abre el menú de comandos.
Comienza a escribir
coverage, selecciona el comando Show Coverage y, luego, presiona Enter para ejecutar el comando. El panel Coverage se abre en el cajón.
Como alternativa, en la esquina superior derecha, selecciona more_vert Más opciones > Más herramientas > Coverage.
Registra la cobertura de código
Para capturar la cobertura de código, haz lo siguiente:
Para establecer el alcance de la cobertura, en la barra de acciones que se encuentra en la parte superior del panel Coverage, selecciona Per function o Per block en la lista desplegable.
Para iniciar la grabación, haz clic en el botón Volver a cargar en el centro del panel. El panel Coverage vuelve a cargar la página, captura el código necesario para cargarla y continúa la grabación mientras interactúas con la página.
Para detener el registro de la cobertura de código, haz clic en Dejar de instrumentar la cobertura y mostrar los resultados en la barra de acciones del panel.
Analiza la cobertura de código
En la tabla del panel Coverage, se muestran los recursos que se analizaron y la cantidad de código que se usa en cada recurso.
Haz clic en una fila para abrir ese recurso en el panel Sources y ver un desglose línea por línea del código usado y sin usar. Las líneas de código sin usar se marcan con líneas grises verticales junto a la columna con números de línea a la izquierda.
- La columna URL es la URL del recurso que se analizó.
- En la columna Type, se indica si el recurso contiene CSS, JavaScript o ambos.
- La columna Total Bytes es el tamaño total del recurso en bytes.
- La columna Unused Bytes es la cantidad de bytes que no se usaron.
- La columna Usage Visualization es una visualización de las columnas Total Bytes y Unused Bytes. La sección gris de la barra son bytes sin usar. La sección verde son bytes usados.
Para filtrar el informe por URL, especifícalo en el filtro de la barra de acciones.
La barra de estado en la parte inferior del panel Coverage muestra el porcentaje de código usado. La barra de estado tiene en cuenta el filtrado.
Junto a la barra de filtros, en la lista desplegable, puedes seleccionar All o solo CSS o JavaScript para mostrar en tu informe.
Para incluir el código de extensión en tu informe, activa Content scripts.
Para exportar tu informe, haz clic en Export coverage.