Buscar código JavaScript y CSS sin usar con el panel Cobertura en Microsoft Edge DevToolsFind unused JavaScript and CSS code with the Coverage panel in Microsoft Edge DevTools

El panel Cobertura de Microsoft Edge DevTools le ayuda a encontrar código JavaScript y CSS sin usar.The Coverage panel in Microsoft Edge DevTools helps you find unused JavaScript and CSS code. La eliminación de código no usado puede acelerar la carga de la página y guardar los datos móviles de los usuarios móviles.Removing unused code may speed up your page load and save your mobile users cellular data.

Análisis de la cobertura de código

Advertencia

Encontrar código sin usar es relativamente fácil.Finding unused code is relatively easy. Pero refactorizar una base de código para que cada página solo incluye el JavaScript y CSS que necesita puede resultar difícil.But refactoring a codebase so that each page only ships the JavaScript and CSS that it needs may be difficult. En esta guía no se explica cómo refactorizar una base de código para evitar el código no usado, ya que estos refactores dependen en gran medida de la pila de tecnología.This guide does not cover how to refactor a codebase to avoid unused code because these refactors depend highly on your technology stack.

Información generalOverview

El envío de JavaScript o CSS sin usar es un problema común en el desarrollo web.Shipping unused JavaScript or CSS is a common problem in web development. Por ejemplo, supongamos que desea usar el componente de botón Bootstrap en la página.For example, suppose that you want to use Bootstrap button component on your page. Para usar el componente de botón, debe agregar un vínculo a la hoja de estilos de Bootstrap en su HTML, de esta forma:To use the button component you need to add a link to the Bootstrap stylesheet in your HTML, like this:

...
<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 solo incluye el código del componente de botón.This stylesheet does not just include the code for the button component. Contiene el CSS para todos los componentes de Bootstrap.It contains the CSS for all of the Bootstrap components. Pero no está usando ninguno de los demás componentes de Bootstrap.But you are not using any of the other Bootstrap components. Por lo tanto, la página está descargando un montón de CSS que no necesita.So your page is downloading a bunch of CSS that it does not need. Este CSS adicional es un problema por los siguientes motivos.This extra CSS is a problem for the following reasons.

  • El código adicional ralentiza la carga de la página.The extra code slows down your page load.
  • Si un usuario accede a la página en un dispositivo móvil, el código adicional usa sus datos móviles.If a user accesses the page on a mobile device, the extra code uses up their cellular data.

Abrir el panel CoberturaOpen the Coverage panel

  1. Abra el menú de comandos.Open the Command Menu.

  2. Empiece a coverage escribir , seleccione el comando Mostrar cobertura y, a continuación, seleccione para ejecutar Enter el comando.Start typing coverage, select the Show Coverage command, and then select Enter to run the command. El panel Cobertura se abre en el cajón.The Coverage panel opens in the Drawer.

    El panel Cobertura

Cobertura de código de registroRecord code coverage

  1. Elija uno de los botones siguientes en el panel Cobertura.Choose one of the following buttons in the Coverage panel.
    • Elija Start Instrumenting Coverage and Reload Page ( Start Instrumenting Coverage and Reload Page ) si desea revisar qué código es necesario  para cargar la página.Choose Start Instrumenting Coverage And Reload Page (Start Instrumenting Coverage And Reload Page) if you want to review what code is needed to load the page.
    • Elija Cobertura de instrumento ( Cobertura de instrumento ) si desea revisar qué código se usa después de interactuar con la  página.Choose Instrument Coverage (Instrument Coverage) if you want to review what code is used after interacting with the page.
  2. Elija Detener la cobertura de instrumentación y Mostrar resultados ( Detener la cobertura de instrumentación y Mostrar  resultados ) cuando desee detener la grabación de la cobertura de código.Choose Stop Instrumenting Coverage And Show Results (Stop Instrumenting Coverage And Show Results) when you want to stop recording code coverage.

Analizar la cobertura de códigoAnalyze code coverage

La tabla del panel Cobertura muestra los recursos analizados y la cantidad de código que se usa en cada recurso.The table in the Coverage panel displays the resources that were analyzed, and how much code is used within each resource. Elija una fila para abrir ese recurso en el panel Orígenes y revise un desglose línea por línea del código usado y el código no usado.Choose a row to open that resource in the Sources panel and review a line-by-line breakdown of used code and unused code.

Un informe de cobertura de código

  • La columna URL es la dirección URL del recurso analizado.The URL column is the URL of the resource that was analyzed.
  • La columna Tipo indica si el recurso contiene CSS, JavaScript o ambos.The Type column says whether the resource contains CSS, JavaScript, or both.
  • La columna Bytes totales es el tamaño total del recurso en bytes.The Total Bytes column is the total size of the resource in bytes.
  • La columna Bytes sin usar es el número de bytes que no se usaron.The Unused Bytes column is the number of bytes that were not used.
  • La última columna sin nombre es una visualización de las columnas Bytes totales y Bytes no usados.The last, unnamed column is a visualization of the Total Bytes and Unused Bytes columns. La sección roja de la barra es bytes no usados.The red section of the bar is unused bytes. La sección verde se usa bytes.The green section is used bytes.

Contactar al equipo de Microsoft Edge DevToolsGetting in touch with the Microsoft Edge DevTools team

Use las siguientes opciones para analizar las nuevas características y cambios en la publicación, o cualquier otra cosa relacionada con DevTools.Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Envía tus comentarios con el icono Enviar comentarios o selecciona Alt + Shift + I (Windows, Linux) o Option + Shift + I (macOS) en DevTools.Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.Tweet at @EdgeDevTools.
  • Enviar una sugerencia a La web que queremos.Submit a suggestion to The Web We Want.
  • Para presentar errores sobre este artículo, use la siguiente sección comentarios.To file bugs about this article, use the following Feedback section.

El icono Enviar comentarios en Microsoft Edge DevTools

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.This work is licensed under a Creative Commons Attribution 4.0 International License.