En este codelab, se explica el proceso para interpretar todo el tráfico de red de una aplicación de ejemplo un poco 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 de red
Navega al panel de red 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ú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 Red, 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 solicitudes y respuestas.
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 del embudo. Cada una de las solicitudes posteriores de recursos adicionales (conocidos como subrecursos del documento principal) proviene de esta fuente original.
La segunda y tercera fila, que muestran un stylesheet de CSS y un subrecurso script que se cargan, son solicitudes dependientes que inició el documento principal.
Si observas cuándo se realizan esas solicitudes, el diagrama en 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 tiempo de ejecución adicionales
Con el panel Network aún abierto y en grabación, es hora de simular algo que es común para muchas apps web: solicitudes a la 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 Encontrarme 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.
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 provienen directamente de la respuesta de la API.
Para todas estas solicitudes adicionales, el cuándo variará según el tiempo que hayas tenido la página abierta antes de hacer clic en Buscar entradas de Wikipedia cercanas. Lo más importante aquí es que when esté desconectado de la solicitud de navegación inicial. Puedes saber esto por la gran brecha que existe en la visualización de cascada, que representa un período de tiempo que transcurrió entre la carga inicial y el momento en que se realiza la solicitud a la API de Wikipedia.
Las solicitudes que se realizan después de un período de tiempo después de una navegación se incluyen en la categoría de "solicitudes del entorno 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.
En resumen
Después de seguir los pasos de este codelab, ya conoces las herramientas que puedes usar para analizar lo que carga cualquier aplicación web.
El panel de red te ayuda a responder la pregunta de qué se está cargando a través de las URLs de la columna Nombre y los datos de la columna Tipo, junto con cuándo se carga a través de la visualización en 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 justo después de navegar a una página nueva, para HTML, JavaScript, CSS (y, posiblemente, otros recursos).
- Son solicitudes de tiempo de ejecución que se realizan como resultado de la interacción del usuario con la página. Esto a menudo puede comenzar con una solicitud a una API y, luego, continuar con varias solicitudes de seguimiento según los datos de la API recuperados.