En este codelab, se te guiará por el proceso de interpretación de todo el tráfico de red de una aplicación de ejemplo algo compleja. Al final del ejercicio, tendrás las habilidades necesarias para determinar qué carga tu propia aplicación web y cuándo realiza cada solicitud.
Navega al panel de red
Navega al panel Network para ver el tráfico de red de la aplicación de demostración.
- Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
- 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 tu navegación inicial:
Cómo interpretar las entradas
Cada fila del 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 HTML de la app web. Esta es la fuente de la cascada. Cada una de las solicitudes posteriores de recursos adicionales (conocidos como subrecursos del documento principal) fluyen desde esta fuente original.
La segunda y la tercera fila, que muestran un CSS stylesheet y un subrecurso script que se están cargando, son solicitudes dependientes que se iniciaron desde el documento principal.
Si observamos cuándo se realizan esas solicitudes, el diagrama de cascada muestra que no se inician hasta muy avanzado 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 tiempo 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 de API adicionales que se usan para agregar más datos a la página después de que se completa la navegación inicial.
Para activar estas solicitudes adicionales, haz clic en Buscar en la app y, luego, en Permitir en la ventana emergente que aparece. Esto permitirá que el sitio acceda a tu ubicación actual:
Una vez que la app web tiene una ubicación con la que trabajar, hacer clic en Find Nearby Wikipedia Entries genera varias solicitudes de red adicionales. Deberías ver algo como esto:
Cómo interpretar las entradas nuevas
Al igual que antes, cada fila del 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.
Todas las siguientes filas son 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 Cascada fluyen directamente de la respuesta de la API.
En todas estas solicitudes adicionales, el cuándo variará según el tiempo que hayas tenido abierta la página antes de hacer clic en Buscar entradas cercanas de Wikipedia. Lo más importante aquí es que el cuándo se desconecta de la solicitud de navegación inicial. Puedes notar esto por la gran brecha que existe en la pantalla de cascada, que representa un período de tiempo que transcurrió entre la carga inicial y el momento en que se realizó la solicitud a la API de Wikipedia.
Las solicitudes que se realizan después de un período de inactividad tras una navegación se incluyen en la categoría de "solicitudes de tiempo de ejecución", a diferencia del conjunto inicial de solicitudes que se usan para mostrar la página cuando navegaste a ella por primera vez.
Resumen
Después de completar los pasos de este codelab, ya conoces las herramientas que puedes usar para analizar lo que carga cualquier aplicación web.
El panel Network te ayuda a responder la pregunta de qué se está cargando a través de las URLs de la columna Name y los datos de la columna Type, junto con cuándo se está cargando a través de la pantalla de cascada.
También viste que las solicitudes que realiza una página web se pueden agrupar (por lo general) en una de las siguientes dos categorías:
- Solicitudes iniciales realizadas inmediatamente después de navegar a una página nueva para obtener HTML, JavaScript, CSS (y potencialmente otros recursos)
- Son las solicitudes de tiempo de ejecución que se realizan 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, continuar con varias solicitudes de seguimiento basadas en los datos recuperados de la API.