Buscar código JavaScript y CSS sin usar con la pestaña cobertura en Microsoft Edge DevTools

La pestaña cobertura de Microsoft Edge DevTools ayuda a buscar código de JavaScript y CSS no usado. Quitar el código no usado puede acelerar la carga de la página y guardar los datos celulares de los usuarios móviles.

Analizar la cobertura de código

Advertencia

Encontrar un código no usado es relativamente fácil. Pero refactorizar un código base para que cada página solo envíe el código JavaScript y CSS que necesita puede ser difícil. En esta guía no se trata cómo refactorizar un código base para evitar el código no usado, ya que estos Refactores dependen enormemente de la pila tecnológica.

Introducción

El envío de código JavaScript o CSS sin usar es un problema común en el desarrollo web. Por ejemplo, supongamos que desea usar el componente del botón bootstrap en la página. Para usar el componente Button, necesita agregar un vínculo a la hoja de estilos bootstrap en el código HTML, como este:

...
<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 estilos no incluye simplemente el código del componente de botón. Contiene la CSS de todos los componentes de bootstrap. Pero no usa ninguno de los otros componentes de bootstrap. Por lo tanto, la página está descargando un montón de CSS que no necesita. Esta CSS adicional es un problema por los siguientes motivos:

  • El código adicional ralentiza la carga de la página.
  • Si un usuario accede a la página en un dispositivo móvil, el código adicional usa sus datos móviles.

Abrir la pestaña cobertura

  1. Abrir el menú de comandos.

  2. Comience coverage a escribir, seleccione el comando Mostrar cobertura y, a continuación, seleccione Enter para ejecutar el comando. La pestaña cobertura se abre en el cajón.

    Analizar la cobertura de código

Registrar la cobertura de código

  1. Haga clic en uno de los siguientes botones de la pestaña cobertura :
    • Elija iniciar la cobertura de la instrumentación y volver a cargar la página \ (  iniciar la cobertura de la instrumentación y volver a cargar página ) Si desea ver qué código se necesita para cargar la página.
    • Elija cobertura de instrumento \ (  cobertura del instrumento ) Si desea ver qué código se usa después de interactuar con la página.
  2. Elija detener la cobertura de la instrumentación y mostrar resultados \ (  detener la instrumentación de la cobertura y resultados de la presentación ) cuando desee detener la grabación de la cobertura de código.

Analizar la cobertura de código

La tabla de la pestaña cobertura le muestra los recursos que se han analizado y la cantidad de código que se usa dentro de cada recurso. Haga clic en una fila para abrir ese recurso en el panel orígenes y ver un desglose línea por línea de código usado y código no usado.

Analizar la cobertura de código

  • La columna URL es la dirección URL del recurso que se analizó.
  • En la columna tipo 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 bytes no usados es el número de bytes que no se han usado.
  • La última columna sin nombre es una visualización de las columnas bytes totales y bytes no usados . La sección roja de la barra es bytes no usados. La sección verde es bytes usados.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según las condiciones descritas en la licencia internacional de Creative Commons Atribution 4,0.
La página original se encuentra aquí y está modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.