El panel Cobertura de las Herramientas para desarrolladores de Chrome puede ayudarte a encontrar código JavaScript y CSS sin usar. Quitar el código que no se utiliza puede acelerar la carga de la página y ahorrar los datos móviles de los usuarios.
Descripción general
El envío de JavaScript o CSS sin usar es un problema común del 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, como el siguiente:
...
<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 para el componente del botón. Contiene el CSS de todos los componentes de Bootstrap. Sin embargo, no estás usando ningún de los otros componentes de Bootstrap. Tu página está descargando muchos CSS que no necesita. Este CSS adicional es un problema por los siguientes motivos:
- El código adicional ralentiza la carga de tu página. Consulta CSS que bloquean la renderización.
- Si un usuario accede a la página en un dispositivo móvil, el código adicional consume sus datos móviles.
Cómo abrir el panel Cobertura
- Abre el menú de comandos.
Comienza a escribir
coverage, selecciona el comando Show Coverage y, luego, presiona Intro para ejecutar el comando. El panel Cobertura se abrirá en el panel lateral.
Cobertura de código de registro
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 Cobertura, selecciona Por función o Por bloqueo en la lista desplegable.
Para iniciar la grabación, haz clic en Actualizar 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 detener la grabación de la cobertura de código, haz clic en stop_circle Detener la instrumentación de la cobertura y mostrar los resultados.
Cómo analizar la cobertura de código
En la tabla del panel Cobertura, se 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 Fuentes y verás un desglose línea por línea del código utilizado y el que no se usó. Cualquier línea de código que no se use se marca con líneas rojas 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 de bytes es 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 Total de bytes y Bytes no utilizados. La sección roja de la barra contiene bytes sin usar. La sección gris se usa en bytes.
Para filtrar el informe por URL, especifícala en el filtro de la barra de acciones.
En la barra de estado que se encuentra en la parte inferior del panel Cobertura, se muestra el porcentaje de código usado. La barra de estado tiene en cuenta los filtros.
Junto a la barra de filtros, en la lista desplegable, puedes seleccionar Todos o solo CSS o JavaScript para que se muestren en tu informe.
Para incluir el código de la extensión en tu informe, activa la opción check_box Secuencias de comandos de contenido.
Para exportar el informe, haz clic en Descarga Exportar cobertura.