El Monitor de Red captura y muestra cada solicitud de red realizada por la página actual — llamadas API XHR/Fetch, cargas de scripts, obtención de hojas de estilos, descargas de imágenes, archivos de fuentes y más. Ve URLs, métodos HTTP, códigos de estado, tamaños de respuesta y tiempos — todo en un panel flotante que se actualiza en vivo sin abrir los DevTools del navegador.
La pestaña Network de Chrome DevTools es poderosa pero pesada — ocupa un espacio significativo en la pantalla, se restablece cuando navegas y requiere que te alejes del contenido de la página. El Monitor de Red proporciona las funciones esenciales de monitoreo de red en un panel flotante ligero que se sitúa sobre la página. Intercepta solicitudes XHR y Fetch y monitorea la carga de recursos vía la API de Performance, mostrando cada solicitud de red a medida que ocurre. Cada solicitud muestra la URL, método HTTP (GET, POST, PUT, DELETE), código de estado (codificado por color: verde para 2xx, amarillo para 3xx, rojo para 4xx/5xx), tamaño de respuesta en bytes y duración en milisegundos. Haz clic en cualquier solicitud para expandir sus detalles: encabezados de solicitud, encabezados de respuesta, payload de solicitud (para POST/PUT), vista previa del cuerpo de respuesta y un desglose de tiempos. Filtra por tipo (XHR/Fetch, JS, CSS, Imágenes, Fuentes) para enfocarte en tráfico específico.
Cada solicitud de red aparece en el panel a medida que ocurre — cargas de página, llamadas API, recursos de carga perezosa y fetches en segundo plano. El feed se actualiza en tiempo real sin necesidad de recarga manual.
Haz clic en cualquier solicitud para ver detalles completos: URL de solicitud, método, encabezados, payload (para POST/PUT), encabezados de respuesta, vista previa del cuerpo de respuesta (JSON auto-formateado), código de estado, tamaño y desglose de tiempos.
Filtra solicitudes por tipo: XHR/Fetch (llamadas API), JS (scripts), CSS (hojas de estilos), IMG (imágenes), Font (fuentes web) o Todas. Aísla el tráfico API de la carga de recursos para enfocarte en lo que importa.
Los códigos de estado están codificados por color para reconocimiento instantáneo: verde para 2xx (éxito), amarillo para 3xx (redirecciones), rojo para 4xx (errores del cliente) y 5xx (errores del servidor). Las solicitudes fallidas son inmediatamente visibles.
Cada solicitud muestra el tamaño de respuesta (en KB) y la duración total (en milisegundos). Identifica llamadas API lentas, recursos de gran tamaño y solicitudes innecesarias que impactan el rendimiento de la página.
Una barra de resumen muestra el conteo total de solicitudes y el tamaño combinado de todas las solicitudes capturadas. Filtra el resumen para ver los totales por tipo — cuánto ancho de banda se gasta en scripts frente a imágenes frente a llamadas API.
Observa las solicitudes XHR/Fetch para verificar que tu frontend esté llamando a los endpoints API correctos con los parámetros correctos. Haz clic para inspeccionar los payloads de solicitud y los cuerpos de respuesta — detecta formatos de datos incompatibles al instante.
Las entradas rojas 404 y 500 resaltan inmediatamente los recursos rotos o las llamadas API fallidas. Ve qué URLs están fallando, cuándo fallan y qué respuesta de error devuelve el servidor.
Ordena por duración para encontrar las solicitudes más lentas. Ordena por tamaño para encontrar los recursos más grandes. Los totales del resumen muestran el panorama completo del ancho de banda — ¿la página está haciendo demasiadas solicitudes o descargando demasiados datos?
Ve qué solicitudes de red hace la página en segundo plano — pings de analítica, llamadas de heartbeat, solicitudes de polling, recursos de carga perezosa. Entiende la actividad de red completa más allá de lo visible para el usuario.
Filtra las solicitudes y verifica qué dominios están siendo contactados. Identifica scripts de terceros que realizan llamadas de red inesperadas — píxeles de seguimiento, recopilación de datos o llamadas API externas que no conocías.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono del Monitor de Red. Se abre un panel y comienza a capturar solicitudes de red inmediatamente.
Usa la página normalmente. Cada solicitud de red aparece en el feed a medida que se realiza — llamadas API, cargas de recursos y fetches en segundo plano son todos capturados.
Haz clic en los filtros de tipo (XHR, JS, CSS, IMG, Font) para estrechar la vista. Muestra solo llamadas API para depurar la obtención de datos, o solo imágenes para verificar la carga de activos.
Haz clic en cualquier fila de solicitud para expandir sus detalles: URL, encabezados, payload, cuerpo de respuesta, código de estado, tamaño y tiempo.
Los códigos de estado rojos (404, 500) indican solicitudes fallidas. Las duraciones lentas señalan cuellos de botella de rendimiento. Los tamaños grandes sugieren recursos que necesitan optimización.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
