Cobertura: Busca JavaScript y CSS sin usar

Kayce vascos
Kayce Vascos

La pestaña Cobertura de las Herramientas para desarrolladores de Chrome puede ayudarte a encontrar código de JavaScript y CSS sin usar. Quitar el código que no se usa puede acelerar la carga de la página y ahorrar los datos móviles de los usuarios de dispositivos móviles.

Análisis de cobertura de código
Figura 1: Análisis de cobertura de código

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 deseas usar el componente del botón de arranque en tu página. Para usar el componente del botón, debes agregar un vínculo a la hoja de estilo de Bootstrap en tu 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 usarás ninguno de los otros componentes de Bootstrap. Por lo tanto, 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 bloquea la renderización.
  • Si un usuario accede a la página desde un dispositivo móvil, el código adicional consume sus datos móviles.

Abre la pestaña Cobertura

  1. Abre el menú de comandos.
  2. Comienza a escribir coverage, selecciona el comando Show Coverage y, luego, presiona Intro para ejecutar el comando. Se abrirá la pestaña Cobertura en el panel lateral.
La pestaña Cobertura
Figura 2: La pestaña Cobertura

Cobertura de código de registro

  1. Haz clic en uno de los siguientes botones de la pestaña Cobertura:
    • Haz clic en Start Instrumenting Coverage And Reload Page Volver a cargar si quieres ver el código necesario para cargar la página.
    • Haz clic en Instrument Coverage Grabar si quieres ver el código que se usa después de interactuar con la página.
  2. Haz clic en Stop Instrumenting Coverage And Show Results Detener cuando quieras detener la grabación de la cobertura de código.

Cómo analizar la cobertura de código

En la tabla de la pestaña 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 Sources y ver un desglose línea por línea del código usado y el que no se usa. Cualquier línea de código sin usar tendrá una línea roja al principio.

Un informe de cobertura de código
Figura 3: Un informe de cobertura de código
  • 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 Unused Bytes 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 Unused Bytes. La sección roja de la barra contiene bytes sin usar. La sección verde se usa en bytes.