Un panel de red sin DevTools — la pestaña Network de JustZix
El panel Network de DevTools tiene un defecto obstinado: solo registra mientras está abierto. Recargas, olvidas abrirlo primero, y la petición que necesitabas se ha esfumado. La Output Console de JustZix tiene una pestaña Network que vive dentro de la página, captura el tráfico mediante chrome.webRequest y mantiene un búfer en segundo plano — así que ve peticiones que se dispararon antes de que abrieras la ventana. Así es como funciona y dónde encaja.
Cómo funciona la captura: chrome.webRequest
La pestaña Network no engancha fetch ni XMLHttpRequest en el código de la página. Usa chrome.webRequest — una API a nivel de navegador a la que la extensión accede mediante el permiso de manifiesto webRequest. Eso significa que observa las peticiones en la capa del navegador, el mismo lugar donde lo hace la pila de red.
La consecuencia práctica es la característica estrella: un búfer en segundo plano. La extensión mantiene un registro continuo de las peticiones de la pestaña. Cuando abres la Output Console, la pestaña Network ya está poblada con lo que ocurrió antes de que llegaras. Sin el baile de "recargar para capturar".
Abrir la pestaña Network
Abre la Output Console desde el menú del botón flotante de JustZix, o como ventana TEMP con Ctrl+Alt+K, luego cambia a la pestaña Network. Su insignia muestra el recuento de peticiones en vivo. Gracias al búfer, la lista no está vacía ni siquiera en una página que cargaste hace minutos.
Qué significa cada columna
Cada petición capturada es una fila. Las columnas:
| Columna | Significado |
|---|---|
| Method | Verbo HTTP — GET, POST, PUT, DELETE, … |
| URL | La URL completa de la petición. |
| Status | Código de estado HTTP — 200, 301, 404, 500, … |
| Resource type | Qué tipo de petición es: document, script, stylesheet, image, xhr/fetch, font, … |
| Size | Cuántos bytes transfirió la petición. |
| Duration | Cuánto tardó la petición, en milisegundos. |
| Remote address | La dirección IP que la petición alcanzó realmente. |
| Initiator | Qué desencadenó la petición — el script o recurso que la lanzó. |
Method, status y URL te dicen qué pasó. Size y duration te dicen cuán costoso fue. Remote address e Initiator te dicen adónde fue y quién la inició — las dos columnas que más importan cuando estás rastreando una petición que no escribiste tú mismo.
La barra de filtros contextual — tres filas
La barra de filtros de la Output Console es contextual; en la pestaña Network se expande en tres filas de controles:
- Tipo de recurso — una fila de casillas: document, script, stylesheet, image, xhr/fetch, font y más. Desmarca los tipos que no te importan. ¿Depurando una API? Mantén solo xhr/fetch y el ruido de imágenes y fuentes desaparece.
- Clase de estado HTTP — una fila de casillas por clase:
2xx,3xx,4xx,5xx. Desmarca2xxy3xxpara ver solo los fallos. - Tamaño + duración + dominio — dos deslizadores de rango (0–100000, duración en milisegundos) más un campo de filtro de dominio.
Las filas de casillas tienen atajos de seleccionar todo / limpiar todo, así puedes limpiarlo todo y marcar el único tipo que quieres, o al revés — sin hacer clic en diez casillas a mano.
Los deslizadores y el filtro de dominio
Los deslizadores de rango convierten una sospecha vaga en una consulta precisa:
- Deslizador de duración — fija un mínimo y solo las peticiones lentas sobreviven. Súbelo hasta
2000ms y tienes una lista de todo lo que tardó más de dos segundos. - Deslizador de tamaño — la misma idea para los bytes. Fija un suelo y los payloads sobredimensionados — la imagen hero sin optimizar, el blob JSON de 400 KB — flotan hacia arriba.
- Filtro de dominio — escribe un fragmento de dominio para mantener solo las peticiones a ese host. Escribe
google-analyticsodoubleclicky estarás mirando exactamente el tráfico de terceros que querías auditar.
Todo esto se acumula con el cuadro de búsqueda siempre visible bajo la barra de filtros — un filtro de subcadena en vivo e insensible a mayúsculas sobre las filas. Esc limpia la búsqueda.
Caso de uso 1 — depurar llamadas a la API
Limpia la fila de tipo de recurso, marca solo xhr/fetch. Ahora la pestaña Network es solo el tráfico de API de tu aplicación — sin scripts, sin imágenes. Dispara la acción que estás depurando y observa cómo aparece la petición: método, URL, estado, cuánto tardó. Si el estado es incorrecto, sabes de inmediato si el problema es la petición o el código que maneja la respuesta.
Caso de uso 2 — encontrar peticiones lentas o sobredimensionadas
Sube el deslizador de duración hasta un umbral — digamos 1500 ms — y la lista se reduce a tus peticiones más lentas. Haz lo mismo con el deslizador de tamaño para sacar a la superficie los payloads pesados. Dos arrastres y tienes una lista corta de rendimiento: las peticiones que realmente vale la pena optimizar, separadas de las docenas que están bien.
Caso de uso 3 — detectar fallos 4xx y 5xx
Este es el que la pestaña Errors no puede hacer por ti. Un fetch o XHR fallido no es una excepción de JavaScript — nunca llega a la pestaña Errors. Para encontrar peticiones rotas, ven a la pestaña Network y desmarca 2xx y 3xx en la fila de estado. Lo que queda es cada 4xx y 5xx: el endpoint que falta, el fallo de autenticación, el error del servidor. Añade un término de búsqueda para localizar una ruta.
Caso de uso 4 — auditar rastreadores y beacons de terceros
Cada sitio carga cosas que no necesariamente anunció — analítica, píxeles publicitarios, beacons. Escribe el dominio de un rastreador en el filtro de dominio, u observa la columna Initiator para ver qué script disparó qué beacon. Combinado con la columna Remote address puedes saber exactamente adónde van los datos. Es una auditoría de privacidad rápida y honesta sin ninguna herramienta especializada.
Comparación honesta con el panel Network de DevTools
El panel Network de DevTools es más potente — esta pestaña no pretende lo contrario. Pero las compensaciones son reales y cortan en ambos sentidos:
| Pestaña Network de JustZix | Network de DevTools | |
|---|---|---|
| Dónde vive | Dentro de la página, ventana arrastrable | Panel separado acoplado/desacoplado |
| Necesita DevTools | No | Sí |
| Captura antes de que la abrieras | Sí — búfer en segundo plano | No — solo mientras está abierto |
| Metadatos de la petición | Sí — método, estado, tamaño, duración, IP, iniciador | Sí |
| Cuerpos de respuesta | No | Sí |
| Cabeceras de petición/respuesta, cascada de tiempos | No | Sí |
La limitación decisiva: chrome.webRequest da metadatos de la petición, no cuerpos de respuesta. Si necesitas leer el JSON que devolvió una petición, DevTools sigue siendo tu herramienta. Si necesitas saber qué peticiones se dispararon, si tuvieron éxito, cuán lentas fueron y adónde fueron — incluyendo peticiones de antes de que empezaras a mirar — la pestaña Network lo hace dentro de la pestaña, sin DevTools en absoluto.
Cuándo recurrir a cuál
- Pestaña Network — triaje rápido, máquinas bloqueadas, capturar peticiones disparadas al cargar la página, auditar tráfico de terceros, compartir una configuración de depuración como parte de una regla.
- Network de DevTools — inspeccionar cuerpos de respuesta, leer cabeceras, la cascada de tiempos, limitación de ancho de banda, reproducir peticiones.
No son rivales. La pestaña Network maneja la pregunta cotidiana de "qué está haciendo esta página por la red"; DevTools maneja el análisis a fondo.
Véase también
- La Output Console renovada — las seis pestañas explicadas
- Ejemplos de JustZix — reglas CSS y JS listas para usar
Un panel de red que captura desde antes de que lo abrieras, justo dentro de la pestaña — sin F12 requerido. Descarga JustZix — es gratis, se ejecuta en Chrome 100+ y tarda unos dos minutos en instalarse.
Valora este artículo
Sin valoraciones — sé el primero.