El panel Cobertura de las Herramientas para desarrolladores de Chrome puede ayudarte a encontrar JavaScript que no uses y código CSS. Quitar el código sin usar puede acelerar la carga de la página y ahorrar datos móviles de los usuarios.
Descripción general
El envío de JavaScript o CSS sin usar es un problema común en el desarrollo web. Por ejemplo, supongamos que quieres usar el componente del botón de arranque en tu página. Para utilizar el componente del botón, debes agregar un vínculo. 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 del botón. Integra Contiene el CSS para todos los componentes de Bootstrap. Pero no usas cualquiera de los otros componentes de arranque. Tu página descarga muchas CSS que no necesita. Este CSS adicional es un problema para los siguientes motivos:
- El código adicional ralentiza la carga de la página. Consulta Bloqueo de renderización de CSS.
- Si un usuario accede a la página desde un dispositivo móvil, el código extra consume sus datos móviles.
Cómo abrir el Panel de 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 abre en el panel lateral.
Grabar 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 ubicada 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 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 la página.
Para dejar de grabar la cobertura de código, haz clic en stop_circle Dejar de instrumentar 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 de ellos.
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 que no se usen se marcarán 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 ambas.
- La columna Total de bytes es el tamaño total del recurso en bytes.
- La columna Bytes sin utilizar es la cantidad de bytes que no se usaron.
- La última columna sin nombre es una visualización de los Bytes totales y Columnas de Bytes sin usar. La sección roja de la barra son los bytes sin usar. El la sección gris es el de bytes usados.
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 que se usó. 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 check_box Secuencias de comandos de contenido.
Para exportar el informe, haz clic en Descargar Exportar cobertura.