Cómo inspeccionar la actividad de red

Kayce Basques

Este es un instructivo práctico de algunas de las funciones de Herramientas para desarrolladores más usadas en relación con la inspección de la actividad de red de una página.

Si, en cambio, quieres explorar las funciones, consulta Referencia de red.

Sigue leyendo o mira la versión en video de este tutorial:

Cuándo usar el panel de red

En general, usa el panel Network cuando necesites asegurarte de que los recursos se descargan o suben como se espera. Los casos de uso más comunes del panel de red son los siguientes:

• Asegurarse de que los recursos se suban o descarguen en realidad.
• Inspeccionar las propiedades de un recurso individual, como sus encabezados HTTP, contenido, tamaño, etcétera

Si buscas maneras de mejorar el rendimiento de carga de la página, no comiences con el panel Red, Existen muchos tipos de problemas de rendimiento de carga que no están relacionados con la actividad de red. Comienza con el panel de Lighthouse, ya que te brinda sugerencias orientadas para mejorar tu página. Consulta Cómo optimizar la velocidad del sitio web.

Abrir el panel Red

Para aprovechar al máximo este instructivo, abre la demostración y prueba las funciones de la página correspondiente.

1. Abre la demostración de introducción.

   

   Figura 1: La demostración

   Es posible que prefieras mover la demostración a otra ventana.

   

   Figura 2. La demostración en una ventana y este instructivo en otra

2. Abre las Herramientas para desarrolladores. Para ello, presiona Control + Mayúsculas + J o Command + Opción + J (Mac). Se abrirá el panel Console.

   

   Figura 3. La consola

   Es posible que prefieras anclar las Herramientas para desarrolladores a la parte inferior de la ventana.

   

   Figura 4. Herramientas para desarrolladores ancladas en la parte inferior de la ventana

3. Haga clic en la pestaña Red. Se abrirá el panel Network.

   

   Figura 5. Herramientas para desarrolladores ancladas en la parte inferior de la ventana

En este momento, el panel Network está vacío. Esto se debe a que las Herramientas para desarrolladores solo registra la actividad de red mientras está abierta y no se produjo ninguna actividad de red desde que abriste las Herramientas para desarrolladores.

Registro de la actividad de red

Para ver la actividad de red que genera una página, haz lo siguiente:

1. Vuelve a cargar la página. El panel Network registra toda la actividad de red en el Registro de red.

   

   Figura 6. Registro de red

   Cada fila del registro de red representa un recurso. De forma predeterminada, los recursos se enumeran cronológicamente. Por lo general, el recurso principal es el documento HTML principal. El recurso inferior es el último que se solicitó.

   Cada columna representa información sobre un recurso. En la Figura 6, se muestran las columnas predeterminadas:

   • Estado. El código de respuesta HTTP.
   • Tipo. El tipo del recurso.
   • Iniciador. Es la razón por la que se solicitó un recurso. Si haces clic en un vínculo en la columna Initiator, accederás al código fuente que causó la solicitud.
   • Hora. Duración de la solicitud
   • Cascada. Representación gráfica de las diferentes etapas de la solicitud. Coloca el cursor sobre una cascada para ver un desglose.

2. Siempre que tengas Herramientas para desarrolladores abierta, se registrará la actividad de red en el registro de red. Para demostrarlo, primero observa la parte inferior del Registro de red y toma nota mental de la última actividad.

3. Ahora, haz clic en el botón Get Data en la demostración.

4. Observa la parte inferior del Registro de red otra vez. Hay un nuevo recurso llamado getstarted.json. Cuando se hacía clic en el botón Obtener datos, la página solicitaba este archivo.

   

   Figura 7: Un nuevo recurso en el registro de red

Mostrar más información

Se pueden configurar las columnas del registro de red. Puedes ocultar las columnas que no estás utilizando. También hay muchas columnas que están ocultas de forma predeterminada, lo que puede resultarte útil.

1. Haz clic con el botón derecho en el encabezado de la tabla Registro de red y selecciona Dominio. Ahora se muestra el dominio de cada recurso.

   

   Figura 8: Habilitando la columna Dominio

Simula una conexión de red más lenta

Es probable que la conexión de red de la computadora que usas para crear sitios sea más rápida que las conexiones de red de los dispositivos móviles de tus usuarios. Si limitas la página, puedes obtener una idea más clara de cuánto tarda en cargarse una página en un dispositivo móvil.

1. Haz clic en el menú desplegable Regulación, que está configurado en En línea de forma predeterminada.

   

   Figura 9: Habilitando la limitación

2. Selecciona 3G lenta.

   

   Figura 10: Cómo seleccionar 3G lenta

3. Mantén presionado Reload y, luego, selecciona Empty Cache And Hard Reload.

   

   Figura 11: Vaciar la caché y volver a cargar de manera forzada

   En visitas repetidas, el navegador suele entregar algunos archivos de su caché, lo que acelera la carga de la página. Empty Cache And Hard Reload obliga al navegador a ir a la red para todos los recursos. Esto es útil cuando quieres ver cómo un visitante nuevo experimenta la carga de una página.

Cómo tomar capturas de pantalla

Las capturas de pantalla te permiten ver el aspecto de una página a lo largo del tiempo mientras se cargaba.

1. Haz clic en Capture Screenshots .

2. Vuelve a cargar la página con el flujo de trabajo Vaciar la caché y volver a cargar de manera forzada. Consulta Simula una conexión más lenta si necesitas un recordatorio para hacerlo. En el panel Capturas de pantalla, se proporcionan miniaturas del aspecto de la página en varios puntos durante el proceso de carga.

   

   Figura 12: Capturas de pantalla de la carga de la página

3. Haz clic en la primera miniatura. Las Herramientas para desarrolladores te muestran la actividad de red que se estaba produciendo en ese momento.

   

   Figura 13: La actividad de red que ocurrió durante la primera captura de pantalla

4. Vuelve a hacer clic en Capture Screenshots para cerrar el panel Screenshots.

5. Vuelve a cargar la página.

Cómo inspeccionar los detalles de un recurso

Haz clic en un recurso para obtener más información sobre él. Probar ahora:

1. Haz clic en getstarted.html. Aparecerá la pestaña Headers. Usa esta pestaña para inspeccionar los encabezados HTTP.

   

   Figura 14: La pestaña Encabezados

2. Haz clic en la pestaña Vista previa. Se muestra una renderización básica del HTML.

   

   Figura 15: La pestaña Vista previa

   Esta pestaña es útil cuando una API muestra un código de error en HTML y es más fácil leer el HTML renderizado que el código fuente HTML o cuando se inspeccionan imágenes.

3. Haz clic en la pestaña Respuesta. Se mostrará el código fuente HTML.

   

   Figura 16: La pestaña Respuesta

4. Haz clic en la pestaña Timing. Se muestra un desglose de la actividad de red de este recurso.

   

   Figura 17: La pestaña Tiempo

5. Haz clic en Cerrar para ver el registro de red nuevamente.

   

   Figura 18: El botón Cerrar

Encabezados y respuestas de la Red de Búsqueda

Usa el panel Search cuando necesites buscar los encabezados HTTP y las respuestas de todos los recursos de una string o una expresión regular determinada.

Por ejemplo, supongamos que deseas verificar si tus recursos usan políticas de caché razonables.

1. Haz clic en Buscar . El panel de búsqueda se abre a la izquierda del registro de red.

   

   Figura 19: El panel de búsqueda

2. Escribe Cache-Control y presiona Intro. En el panel de búsqueda, se enumeran todas las instancias de Cache-Control que encuentra en los encabezados o el contenido de los recursos.

   

   Figura 20: Resultados de la búsqueda de Cache-Control

3. Haz clic en un resultado para verlo. Si la consulta se encontró en un encabezado, se abrirá la pestaña Encabezados. Si la consulta se encontró en el contenido, se abrirá la pestaña Respuesta.

   

   Figura 21: Un resultado de la búsqueda destacado en la pestaña Encabezados

4. Cierra el panel de búsqueda y la pestaña Tiempo.

   

   Figura 22: Los botones Cerrar

Filtrar recursos

Las Herramientas para desarrolladores proporcionan numerosos flujos de trabajo a fin de filtrar recursos que no son relevantes para la tarea en cuestión.

Figura 23: La barra de herramientas Filtros

La barra de herramientas Filters debe estar habilitada de forma predeterminada. De lo contrario, di lo siguiente:

1. Haz clic en Filter para mostrarlo.

Filtrar por string, expresión regular o propiedad

El cuadro de texto Filtro admite muchos tipos diferentes de filtrado.

1. Escribe png en el cuadro de texto Filter. Solo se muestran los archivos que contienen el texto png. En este caso, los únicos archivos que coinciden con el filtro son las imágenes PNG.

   

   Figura 24: Un filtro de cadena

2. Tipo /.*\.[cj]s+$/. Las Herramientas para desarrolladores filtran los recursos que tienen nombres de archivo que no terminan con j o c seguidos de 1 o más caracteres s.

   

   Figura 25: Un filtro de expresiones regulares

3. Tipo -main.css. Las Herramientas para desarrolladores filtran main.css. Si cualquier otro archivo coincidiera con el patrón, también se filtrarían.

   

   Figura 26: Un filtro negativo

4. Escribe domain:raw.githubusercontent.com en el cuadro de texto Filter. Las Herramientas para desarrolladores filtran cualquier recurso que tenga una URL que no coincida con este dominio.

   

   Figura 27: Un filtro de propiedad

   Consulta Cómo filtrar solicitudes por propiedades para ver la lista completa de propiedades que se pueden filtrar.

5. Borra cualquier texto del cuadro de texto Filtro.

Filtrar por tipo de recurso

Para enfocarte en un determinado tipo de archivo, como hojas de estilo:

1. Haz clic en CSS. Se filtrarán todos los demás tipos de archivos.

   

   Figura 28: Se muestran solo los archivos CSS

2. Para ver también las secuencias de comandos, mantén presionadas las teclas Control o Comando (Mac) y, luego, haz clic en JS.

   

   Figura 29: Solo se muestran archivos CSS y JS

3. Haz clic en Todos para quitar los filtros y volver a ver todos los recursos.

Consulta Filtrar solicitudes para ver otros flujos de trabajo de filtrado.

Solicitudes de bloqueo

¿Cómo se ve y se comporta una página cuando algunos de sus recursos no están disponibles? ¿Falla por completo o sigue funcionando de alguna manera? Bloquea solicitudes para averiguar lo siguiente:

1. Presiona Control + Mayúsculas + P o Command + Mayúsculas + P (Mac) para abrir el menú de comandos.

   

   Figura 30: Menú de comandos

2. Escribe block, selecciona Show Request Blocking y presiona Intro.

   

   Figura 31: Mostrar bloqueo de solicitudes

3. Haz clic en Add Pattern .

4. Tipo main.css.

   

   Figura 32: Bloqueando a main.css

5. Haz clic en Agregar.

6. Vuelve a cargar la página. Como era de esperar, el estilo de la página está ligeramente desordenado porque se bloqueó su hoja de estilo principal. Observa la fila main.css en el registro de red. El texto rojo significa que el recurso se bloqueó.

   

   Figura 33: Se bloqueó a main.css

7. Desmarca la casilla de verificación Habilitar bloqueo de solicitudes.

Próximos pasos

Felicitaciones, completaste el instructivo. Haz clic en Dispense Award para recibir tu premio.

Consulta la Referencia de redes para descubrir más funciones de Herramientas para desarrolladores relacionadas con la inspección de la actividad de red.