Cómo inspeccionar la actividad de red

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.

Consulta Referencia de red si deseas explorar las funciones.

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

Cuándo usar el panel Network

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

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

Si desea mejorar el rendimiento de carga de páginas, no comience con el panel Red. Hay muchos tipos de problemas de rendimiento de carga que no están relacionados con la actividad de red. Comienza con el panel Lighthouse, ya que te brinda sugerencias específicas para mejorar tu página. Consulta Cómo optimizar la velocidad del sitio web.

Cómo abrir el panel Red

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

1. Abre la demostración Comenzar.

   

   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 ventana

2. Abra Herramientas para desarrolladores presionando Control + Mayús + J o Comando + Opción + J (Mac). Se abrirá el panel Console.

   

   Figura 3. La consola

   Es posible que prefieras conectar Herramientas para desarrolladores a la parte inferior de tu 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 Herramientas para desarrolladores solo registra la actividad de red mientras está abierta y no se ha producido ninguna actividad de red desde que abriste Herramientas para desarrolladores.

Registro de la actividad de red

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

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

   

   Figura 6. El registro de red

   Cada fila del Registro de red representa un recurso. De forma predeterminada, los recursos se enumeran cronológicamente. El recurso principal suele ser 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. Indica qué provocó la solicitud de un recurso. Si haces clic en un vínculo de la columna Iniciador, te llevará al código fuente que causó la solicitud.
   • Hora. Cuánto tardó la solicitud.

   • Waterfall: Representación gráfica de las diferentes etapas de la solicitud. Coloca el cursor sobre una cascada para ver un desglose.

2. Siempre que Herramientas para desarrolladores estén abiertas, se registrará la actividad de la red en el registro de red. Para demostrarlo, primero mira la parte inferior del registro de red y anota 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 nuevamente. Hay un nuevo recurso llamado getstarted.json. Cuando se hizo clic en el botón Obtener datos, la página solicitó este archivo.

   

   Figura 7: Un nuevo recurso en el registro de red

Mostrar más información

Puedes configurar las columnas del registro de red. Puedes ocultar las columnas que no utilices. 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: Habilita la columna Dominio

Simula una conexión de red más lenta

La conexión de red de la computadora que utilizas para crear sitios es probablemente más rápida que las conexiones de red de los dispositivos móviles de tus usuarios. Cuando limitas la página, puedes obtener una mejor idea de cuánto tarda en cargarse en un dispositivo móvil.

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

   

   Figura 9: Habilita la limitación

2. Selecciona 3G lenta.

   

   Figura 10: Selección de 3G lento

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

   

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

   En las visitas repetidas, el navegador generalmente entrega algunos archivos de su caché, lo que acelera la carga de la página. Vaciar caché y volver a cargar de manera forzada fuerza al navegador a conectarse a la red para todos los recursos. Esto resulta útil cuando deseas ver cómo un visitante nuevo experimenta la carga de una página.

Toma 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 mediante el flujo de trabajo Vaciar caché y volver a cargar de manera forzada. Consulta Simular una conexión más lenta si necesitas un recordatorio sobre cómo hacerlo. En el panel Capturas de pantalla, se proporcionan miniaturas de cómo se visualizó 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 qué actividad de red se produjo en ese momento.

   

   Figura 13: La actividad de red que se producía durante la primera captura de pantalla

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

5. Vuelve a cargar la página.

Inspecciona los detalles de un recurso

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

1. Haz clic en getstarted.html. Se mostrará 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 código 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 bien cuando se inspeccionan imágenes.

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

   

   Figura 16: La pestaña Respuesta

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

   

   Figura 17: La pestaña Tiempo

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

   

   Figura 18: El botón Cerrar

Buscar encabezados y respuestas de la red

Usa el panel Buscar cuando necesites buscar las respuestas y los encabezados HTTP de todos los recursos para una string o 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 Search, se enumeran todas las instancias de Cache-Control que encuentra en los encabezados de recursos o en el contenido.

   

   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 Search y la pestaña Tiempo.

   

   Figura 22: Los botones Cerrar

Filtrar recursos

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

Figura 23: La barra de herramientas de Filtros

La barra de herramientas Filtros debe estar habilitada de forma predeterminada. Si no es así, haz lo siguiente:

1. Haz clic en Filtrar para mostrarla.

Filtrar por cadena, expresión regular o propiedad

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

1. Escribe png en el cuadro de texto Filtrar. 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 cadenas

2. Tipo /.*\.[cj]s+$/. Las Herramientas para desarrolladores filtran cualquier recurso con un nombre de archivo que no termine con una j o una c seguido de 1 o más caracteres s.

   

   Figura 25: Un filtro de expresiones regulares

3. Tipo -main.css. Herramientas para desarrolladores filtra main.css. Si cualquier otro archivo coincidía con el patrón, también se filtraría.

   

   Figura 26: Un filtro negativo

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

   

   Figura 27: Un filtro de propiedades

   Consulta Filtrar solicitudes por propiedades para ver la lista completa de propiedades filtrables.

5. Borra el cuadro de texto Filtro de cualquier texto.

Filtrar por tipo de recurso

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

1. Haz clic en CSS. Todos los demás tipos de archivos se filtran.

   

   Figura 28: Se muestran solo los archivos CSS

2. Para ver también las secuencias de comandos, mantenga presionada la tecla Control o Comando (Mac) y, luego, haga clic en JS.

   

   Figura 29: Se muestran solo 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.

Bloquear solicitudes

¿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 las solicitudes para saber lo siguiente:

1. Presiona Ctrl + Mayúsculas + P o Comando + 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 el 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á un poco desordenado porque se bloqueó su hoja de estilo principal. Anota la fila main.css en el registro de red. El texto rojo significa que se bloqueó el recurso.

   

   Figura 33: Se bloqueó a main.css

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

Próximos pasos

¡Felicitaciones! Completaste el instructivo. Haz clic en Dispensar premio para recibir tu premio.

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