El panel Cobertura te ayuda a encontrar código JavaScript y CSS que no se usa. Si quitas el código que no se usa, puedes acelerar la carga de la página y ahorrar los datos móviles de tus usuarios.
Descripción general
Enviar JavaScript o CSS sin usar es un problema común en el desarrollo web. Por ejemplo, supongamos que deseas usar el componente del botón de arranque 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 código 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 Bloqueo de representación de CSS.
- Si un usuario accede a la página en un dispositivo móvil, el código adicional agota sus datos móviles.
El panel Cobertura te permite registrar tu página y ver un informe del total de bytes usados y no usados de los recursos de CSS y JavaScript, además de hacer un seguimiento del código en el panel Fuentes.
Abre el panel Cobertura
- Abre DevTools.
- Abre el menú de comandos.
Comienza a escribir
coverage, selecciona el comando Show Coverage y, luego, presiona Intro para ejecutarlo. Se abrirá el panel Cobertura en el Panel lateral.
Como alternativa, en la esquina superior derecha, selecciona more_vert Más opciones > Más herramientas > Cobertura.
Cómo registrar 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 en la parte superior del panel Cobertura, selecciona Por función o Por bloque en la lista desplegable.
Para iniciar la grabación, haz clic en Comenzar a instrumentar la cobertura y volver a cargar la página. El panel Cobertura vuelve a cargar la página, captura el código necesario para cargarla y continúa la grabación mientras interactúas con ella.
Para dejar de grabar la cobertura de código, haz clic en Dejar de instrumentar la cobertura y mostrar los resultados.
Cómo analizar la cobertura de código
La tabla del panel Cobertura muestra qué recursos se analizaron y cuánto código se usa en cada uno.
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 no usado. Las líneas de código que no se usan se marcan con líneas rojas junto a la columna con los 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 de bytes indica el tamaño total del recurso en bytes.
- La columna Bytes no utilizados indica la cantidad de bytes que no se usaron.
- La última columna sin nombre es una visualización de las columnas Bytes totales y Bytes sin usar. La sección roja de la barra son los bytes sin usar. La sección gris corresponde a bytes usados.
Para filtrar el informe por URL, especifícala en el filtro de la barra de acciones.
La barra de estado en la parte inferior del panel Cobertura muestra el porcentaje de código utilizado. La barra de estado tiene en cuenta el filtrado.
Junto a la barra de filtros de la lista desplegable, puedes seleccionar Todo o solo CSS o JavaScript para que se muestren en el informe.
Para incluir código de extensión en tu informe, activa la Secuencias de comandos de contenido.
Para exportar tu informe, haz clic en Exportar cobertura.