En este codelab, se explica el proceso de interpretar todo el tráfico de red de una aplicación de muestra un tanto compleja. Al final del ejercicio, tendrás las habilidades que necesitas para descubrir qué carga tu propia aplicación web y cuándo realiza cada solicitud.
Navega al panel Network
Navega al panel Network para ver el tráfico de red de la aplicación de demostración.
Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
.Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
Haga clic en la pestaña Red.
Vuelve a cargar la página para ver el tráfico de red.
En el panel Network, se muestran todos los recursos cargados debido a la navegación inicial:
Cómo interpretar las entradas
Cada fila de tráfico de red registrado representa un solo par de solicitud y respuesta.
La primera fila, con el tipo document, es la solicitud de navegación inicial para el código HTML de la app web. Esta es la fuente de la cascada; cada una de las solicitudes posteriores de elementos adicionales (conocidos como subrecursos del documento principal) fluyen desde esta fuente original.
La segunda y la tercera fila, en la que se muestran un stylesheet de CSS y un subrecurso script que se cargan, son solicitudes dependientes que inició el documento principal.
Al observar cuándo se realizan esas solicitudes, el diagrama de cascada muestra que no se inician hasta muy tarde en el proceso de respuesta a la solicitud de navegación.
En conjunto, las solicitudes del documento HTML, CSS y JavaScript son necesarias para mostrar la página completa durante la navegación inicial.
Crea algunas solicitudes de entorno de ejecución adicionales
Con el panel Network aún abierto y grabando, es hora de simular algo común para muchas apps web: solicitudes adicionales a la API que se usan para agregar más datos a la página una vez finalizada la navegación inicial.
Para activar estas solicitudes adicionales, haz clic en Find Me en la app y, luego, en Allow en la ventana emergente que aparece. Esto permitirá que el sitio acceda a tu ubicación actual:
Una vez que la app web tenga una ubicación con la que trabajar, hacer clic en Buscar entradas de Wikipedia de cercanías da como resultado varias solicitudes de red adicionales. Deberías ver algo como esto:
Interpreta las entradas nuevas
Como antes, cada fila de tráfico de red registrado representa un solo par de solicitud y respuesta.
La primera fila de las entradas nuevas representa una solicitud con un tipo de fetch, que corresponde a la forma en que la app web solicita datos a la API de Wikipedia.
Las siguientes filas son todas imágenes (png o jpeg) asociadas con las entradas de Wikipedia. Aunque es un poco difícil de ver en la captura de pantalla, sus entradas en la columna Waterfall fluyen directamente desde la respuesta de la API.
Para todas estas solicitudes adicionales, el cuándo variará según el tiempo que lleves abierta la página antes de hacer clic en Buscar entradas de Wikipedia de cercanías. Lo más importante aquí es que when se desconecta de la solicitud de navegación inicial. Esto se puede distinguir por el gran espacio que existe en la pantalla Waterfall, que representa un período que pasó entre la carga inicial y el momento en que se realiza la solicitud a la API de Wikipedia.
Las solicitudes realizadas después de un intervalo de tiempo después de una navegación pertenecen a la categoría de "solicitudes de tiempo de ejecución", a diferencia del conjunto inicial de solicitudes que se usa para mostrar la página cuando navegaste a ella por primera vez.
En resumen
Después de revisar los pasos de este codelab, ahora conoces las herramientas que puedes usar para analizar qué carga cualquier aplicación web.
El panel Network te ayuda a responder la pregunta de qué se carga a través de las URLs en la columna Nombre y los datos de la columna Tipo, junto con cuándo se carga, a través de la visualización de cascada.
También observaste que las solicitudes realizadas por una página web pueden agruparse (por lo general) en una de dos categorías:
- Solicitudes iniciales, realizadas inmediatamente después de navegar a una página nueva, para HTML, JavaScript, CSS (y potencialmente otros recursos).
- Solicitudes de tiempo de ejecución realizadas como resultado de la interacción del usuario con la página. A menudo, esto puede comenzar con una solicitud a una API y, luego, fluye a varias solicitudes de seguimiento basadas en los datos de API recuperados.