Usar la vista Network

La vista Network te permite inspeccionar el tráfico HTTP, HTTPS y WebSocket de tu aplicación de Dart o Flutter.

Todo el tráfico de red que proviene de dart:io (como la clase HttpClient) se registra, incluido el paquete dio. Además, todo el tráfico de red que se registra mediante el paquete http_profile queda grabado en la tabla de solicitudes de red. Esto incluye el tráfico de red de los paquetes cupertino_http, cronet_http y ok_http.

Para una app web que realiza solicitudes utilizando el navegador, recomendamos usar las herramientas del navegador para inspeccionar el tráfico de red, como Chrome DevTools.

Cuando abres la página Network, DevTools comienza a registrar el tráfico de red inmediatamente. Para pausar y reanudar el registro, usa los botones Pause y Resume (arriba a la izquierda).

Cuando tu app envía una solicitud de red, aparece en la tabla de solicitudes de red (izquierda). Aparece como "Pending" hasta que se recibe una respuesta completa.

Selecciona una solicitud de red de la tabla (izquierda) para ver los detalles (derecha). Puedes inspeccionar información general y de tiempo sobre la solicitud, así como el contenido de los encabezados y cuerpos de la respuesta y de la solicitud. Algunos datos no están disponibles hasta que se recibe la respuesta.

Puedes usar los controles de búsqueda y filtro para buscar una solicitud específica o filtrar solicitudes para ocultarlas de la tabla de solicitudes.

Para aplicar un filtro, presiona el botón de filtro (a la derecha de la barra de búsqueda). Verás aparecer un cuadro de diálogo de filtro:

La sintaxis de consulta de filtro se describe en el cuadro de diálogo. Puedes filtrar las solicitudes de red mediante las siguientes claves:

• method, m: este filtro corresponde al valor de la columna "Method"
• status, s: este filtro corresponde al valor de la columna "Status"
• type, t: este filtro corresponde al valor de la columna "Type"

Cualquier texto que no esté emparejado con una clave de filtro disponible se buscará en todas las categorías (method, URI, status, type).

Consultas de filtro de ejemplo:

my-endpoint m:get t:json s:200

https s:404

Para registrar el tráfico de red al iniciar la app, puedes iniciar tu app en un estado pausado y luego comenzar a registrar el tráfico de red en DevTools antes de reanudar la app.

1. Start your app in a paused state:
   • flutter run --start-paused ...
   • dart run --pause-isolates-on-start --observe ...
2. Abre DevTools desde el IDE donde iniciaste tu app, o desde el enlace que se imprimió en la línea de comandos si iniciaste tu app desde la CLI.
3. Navega a la pantalla Network y asegúrate de que la grabación se haya iniciado.
4. Reanuda tu app.
5. El perfilador de Network ahora registrará todo el tráfico de red de tu app, incluido el tráfico del inicio de la app.

Las solicitudes HTTP y HTTPS también aparecen en la Timeline como eventos de línea de tiempo asíncronos. Ver la actividad de red en la línea de tiempo puede ser útil si deseas ver cómo se alinea el tráfico HTTP con otros eventos que ocurren en tu app o en el framework de Flutter.

Para aprender a monitorear el tráfico de red de una app e inspeccionar diferentes tipos de solicitudes usando DevTools, consulta el tutorial guiado de la Network View. El tutorial también utiliza la vista para identificar la actividad de red que causa un rendimiento deficiente en la app.