Cómo usar Network para depurar peticiones HTTP

Optimiza tu flujo de trabajo con DevTools Network. Aprende a leer estados HTTP, entender el waterfall, simular redes lentas y usar request blocking para depurar. Conoce cómo cambian los tiempos de carga y el peso de los assets cuando el usuario interactúa. Así aseguras performance, tiempos de carga y estabilidad.

¿Cómo usar Network en DevTools para diagnosticar peticiones HTTP?

Empieza validando que tus recursos cargan bien y que los estados de las peticiones indican salud del proyecto. Ajusta la vista para ver más detalles y entender el orden de carga.

¿Qué significan los status HTTP 200 y 404?

• HTTP 200: todo ok; el recurso se encontró y respondió correctamente.
• HTTP 404: el recurso no se encontró; revisa rutas y enlaces.
• Sugerencia mencionada: se comparte un enlace con memes de gatos para entender cada código.
• Si ves números distintos a 200, inspecciona su significado antes de seguir.

¿Cómo activar vistas y screenshots en Network?

• Abre la rueda de configuración en Network.
• Activa la opción de “request largo” para ver más información de cada fila.
• Activa screenshot y haz refresh para ver capturas del render paso a paso.
• Observa tiempos clave: primera pantalla en 5 ms y momento de interacción en 387 ms.

¿Cómo leer tiempos y waterfall?

• El waterfall muestra el orden y duración de cada petición.
• Al inicio: HTML, CSS, JavaScript y luego imágenes (PNG).
• La interacción del usuario dispara nuevas peticiones y aparecen al final.
• Puedes cambiar el orden para ver arriba la última petición realizada.

¿Cómo analizar interacciones y fetch de JSON en tiempo real?

Cuando el usuario hace clic, pueden dispararse nuevas peticiones. Observa qué archivo llega, su tipo, su peso y su tiempo de respuesta.

¿Qué muestra el botón obtener datos?

• Dispara una petición desde JavaScript mediante fetch.
• Devuelve un JSON con status 200: se encontró y se entregó bien.
• Tipo de petición: fetch, no viene del HTML sino del JavaScript.
• Útil para verificar cargas dinámicas por interacción del usuario.

¿Cómo interpretar bytes y milisegundos?

• Peso del JSON: 276 bytes.
• Tiempo de obtención: 95 ms.
• Mira el waterfall: el JSON aparece después del bloque inicial, tras el clic del usuario.
• Usa estos datos para medir impacto de cada interacción.

¿Cómo reordenar el waterfall para ver la última petición?

• Cambia la vista del waterfall para listar primero la petición más reciente.
• Útil cuando hay muchas llamadas y necesitas ubicar la última rápidamente.

¿Cómo simular red lenta y bloquear assets para depurar?

Reproduce condiciones reales: red lenta y caché desactivada. Si algo falla, inspecciona headers, preview y response. Luego bloquea dependencias para aislar problemas.

¿Cómo simular 3G y limpiar caché?

• En Network, cambia de online a una conexión lenta 3G.
• Haz refresh manteniendo presionado y elige cargar “sin caché”.
• Verás más screenshots y tiempos de carga mayores.
• Evalúa si la experiencia sigue siendo aceptable con una red lenta.

¿Cómo inspeccionar headers, preview y response?

• En cualquier asset, abre el encabezado de la petición HTTP.
• Revisa preview para ver el contenido entregado.
• Revisa response para ver la respuesta tal cual llegó.
• Observa los tiempos específicos de cada fase de la carga.

¿Cómo usar request blocking para CSS?

• Abre el comando con Command Shift P y escribe block.
• Selecciona request blocking, pulsa “más” y agrega el archivo CSS a bloquear.
• Refresca sin caché: verás el status bloqueado en rojo.
• Si en tu proyecto los estilos “se rompen”, abre Network y detecta si hay 404 o rutas mal linkeadas en el head.
• Esta técnica revela qué no se está cargando, los tiempos y el peso de cada recurso.

¿Tienes dudas o quieres compartir cómo mides el rendimiento con Network? Deja un comentario y conversemos.