Midiendo código no utilizado con DevTools Coverage

Construir como profesional implica medir el peso real de tu proyecto y el impacto de dependencias de terceros. Con DevTools Coverage puedes ver qué HTML, CSS y JavaScript usas y qué no, para optimizar performance antes de ir a producción. Aquí tienes una guía práctica, directa y accionable.

¿Cómo auditar dependencias y peso con DevTools Coverage?

Para ganar visibilidad, abre el menú de tres puntos en DevTools, entra a “Más herramientas” y selecciona Coverage. Inicia la grabación y, si no aparece nada, refresca la página para listar archivos y su uso real.

¿Qué pasos seguir para iniciar la medición?

• Abre el menú de tres puntos en DevTools.
• Ve a: más herramientas > Coverage.
• Presiona “grabar”.
• Refresca para cargar archivos y métricas.
• Revisa la lista de recursos del proyecto.

¿Qué archivos y métricas verás en pantalla?

• Porcentaje en bytes por archivo: peso relativo por recurso.
• Uso por tipo: por ejemplo, CSS 9.2% y HTML 64.9% en un caso real del clon de Google.
• Lista ordenada para detectar qué pesa más.

¿Qué significan los colores rojo y verde?

• Verde: código utilizado en la carga actual.
• Rojo: código presente pero no utilizado.
• Al hacer clic en la barra, se abre el recurso con líneas en verde/rojo.
• Aplica igual para HTML y CSS.

¿Cómo interpretar HTML, CSS y JavaScript no utilizados?

Incluso sin escribir JavaScript, el navegador puede inyectar elementos que verás en Coverage. Diferencia lo que tu proyecto requiere de lo que el entorno agrega.

¿Qué pasa con websockets, window y protocolos del navegador?

• El navegador puede mostrar WebSockets y protocolos internos.
• Verás referencias a window para renderizado y conexión.
• Puede aparecer tráfico del servidor servido desde el editor de texto.
• No es que tu proyecto los use: están presentes en la sesión.

¿Cómo tratar comentarios y código guardado para después?

• Los comentarios ayudan en equipo, pero suman peso si quedan para siempre.
• Si ya no sirven: límpialos para reducir bytes innecesarios.
• Mantén solo lo que aporta a la interfaz actual.

¿Por qué frameworks como Bootstrap o Materialize muestran 80% en rojo?

• Al integrar Bootstrap o Materialize, sueles usar pocas clases.
• Es común ver más del 80% en rojo: no lo usas en esa vista.
• El verde puede rondar 15–20% si tu uso es limitado.
• Esto revela el costo real de la dependencia.

¿Cómo optimizar antes de producción con estos datos?

La meta es que tu entrega a producción pese menos sin perder funcionalidad. Coverage te muestra por dónde empezar, archivo por archivo.

¿Qué acciones priorizar con base en coverage?

• Identificar recursos con mucho rojo y alto peso.
• Decidir si eliminar dependencias o modular su carga.
• Remover comentarios y bloques obsoletos.
• Repetir la medición tras cada ajuste.
• Preparar el siguiente paso: explorar el DOM desde la consola con JavaScript para seleccionar elementos con precisión.

¿Te gustaría compartir qué parte de tu proyecto muestra más rojo en Coverage o qué dependencia estás evaluando? Deja tu comentario y lo revisamos juntos.