Cómo inspeccionar la actividad de red

Kayce Basques

Este es un instructivo práctico sobre algunas de las funciones de DevTools más usadas relacionadas con la inspección de la actividad de red de una página.

Consulta la Referencia de la red si deseas explorar las funciones.

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

Cuándo usar el panel de red

En general, usa el panel Network cuando necesites asegurarte de que los recursos se descarguen o suban según lo esperado. Los casos de uso más comunes para el panel Network son los siguientes:

• Asegúrate de que los recursos se estén subiendo o descargando.
• Inspeccionar las propiedades de un recurso individual, como sus encabezados HTTP, contenido, tamaño, etcétera

Si buscas formas 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 específicas para mejorar tu página. Consulta Optimiza la velocidad del sitio web.

Abre el panel de red.

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

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

   

   Te recomendamos que muevas la demostración a otra ventana.

   

2. Para abrir DevTools, presiona Control + Mayúsculas + J o Comando + Opción + J (Mac). Se abrirá el panel Console.

   

   Te recomendamos que ancles DevTools en la parte inferior de la ventana.

   

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

   

En este momento, el panel Red 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 causa 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.

   

   Cada fila del registro de red representa un recurso. De forma predeterminada, los recursos se muestran de forma cronológica. El recurso superior suele ser el documento HTML principal. El recurso inferior es lo que se solicitó por última vez.

   Cada columna representa información sobre un recurso. Las columnas predeterminadas son las siguientes:

   • Estado: Es el código de respuesta HTTP.
   • Type: Es el tipo de recurso.
   • Iniciador: Es el motivo por el que se solicitó un recurso. Si haces clic en un vínculo de la columna Initiator, se te dirigirá al código fuente que generó la solicitud.
   • Tamaño: Es la cantidad de recursos transferidos a través de la red.
   • Tiempo: Indica cuánto tiempo tardó la solicitud.
   Nota: El gráfico sobre el registro de red se denomina Resumen. No lo usarás en este instructivo, así que puedes ocultarlo si lo prefieres. Consulta Cómo ocultar el segmento de Recientes.

2. Mientras tengas DevTools abierta, se registrará la actividad de red en el registro de red. Para demostrar esto, primero mira la parte inferior del registro de red y toma nota 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 recurso nuevo llamado getstarted.json. Cuando hiciste clic en el botón Obtener datos, la página solicitó este archivo.

   

Mostrar más información

Las columnas del registro de red se pueden configurar. Puedes ocultar las columnas que no estés utilizando. También hay muchas columnas que están ocultas de forma predeterminada y que pueden resultarte útiles.

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.

   

Sugerencia: Para ver la URL completa de un recurso, coloca el cursor sobre su celda en la columna Nombre.

Cómo simular 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 Limitación, que se establece en Sin limitación de forma predeterminada.

   

2. Selecciona 3G.

   

3. Mantén presionado Volver a cargar actualizar y, luego, selecciona Vaciar la caché y volver a cargar.

   

   En las visitas repetidas, el navegador suele entregar algunos archivos desde 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 obtener todos los recursos. Esto es útil cuando quieres ver cómo un visitante que visita el sitio por primera vez experimenta la carga de una página.

   Nota: El flujo de trabajo Empty Cache And Hard Reload solo está disponible cuando DevTools está abierto.

Cómo tomar capturas de pantalla

Las capturas de pantalla capturan cómo se ve tu página en diferentes momentos mientras se carga y registran qué recursos se cargan en cada intervalo.

Para capturar capturas de pantalla, sigue estos pasos:

1. Haz clic en Configuración de red Configuración.

2. Habilita la casilla de verificación Capturas de pantalla check_box.

3. Vuelve a cargar la página con el flujo de trabajo Empty Cache And Hard Reload. Consulta Cómo simular una conexión más lenta si necesitas un recordatorio sobre cómo hacerlo. La pestaña Capturas de pantalla proporciona miniaturas de cómo se veía la página en varios puntos durante el proceso de carga.

   

4. Haz clic en la primera miniatura. DevTools te muestra qué actividad de red se estaba produciendo en ese momento.

   

5. Activa o desactiva la casilla de verificación Capturas de pantalla para cerrar la pestaña Capturas de pantalla.

6. 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.

   

2. Haz clic en la pestaña Vista previa para ver una renderización básica de HTML.

   

   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 Response para ver el código fuente HTML.

   

   Sugerencia: Cuando se reduce un archivo, haz clic en el botón Formato data_object en la parte inferior de la pestaña Respuesta cambia el formato del contenido del archivo para facilitar su lectura.

4. Haz clic en la pestaña Iniciador para ver un árbol que asigna la cadena de iniciador de la solicitud.

   

5. Haz clic en la pestaña Timing para ver un desglose de la actividad de red para este recurso.

   

6. Haz clic en Cerrar close para ver el Registro de red nuevamente.

   

Encabezados y respuestas de la red de Búsqueda

Usa la pestaña Búsqueda cuando necesites buscar una cadena o expresión regular específicas en los encabezados y las respuestas HTTP de todos los recursos.

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

1. Haz clic en Buscar buscar. La pestaña Búsqueda se abrirá a la izquierda del registro de red.

   

2. Escribe Cache-Control y presiona Intro. En la pestaña Búsqueda, se enumeran todas las instancias de Cache-Control que se encuentran en los encabezados o el contenido de los recursos.

   

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.

   

4. Cierra las pestañas Buscar y Encabezados.

   

Filtrar recursos

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

La barra de herramientas Filtros debería estar habilitada de forma predeterminada. De lo contrario, haz lo siguiente:

1. Haz clic en Filtrar filter_alt para mostrarlo.

Filtrar por string, expresión regular o propiedad

El cuadro de entrada Filtrar admite muchos tipos de filtrado diferentes.

1. Escribe png en el cuadro de entrada Filtro. 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.

   

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.

   

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

   

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

   

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

5. Borra cualquier texto de la casilla de entrada Filtro.

Filtrar por tipo de recurso

Para enfocarte en un tipo de archivo específico, como los diseños de página, haz lo siguiente:

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

   

2. Para ver también las secuencias de comandos, mantén presionadas las teclas Control o Comando (Mac) y, luego, haz clic en 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 aún funciona de alguna manera? Bloquea solicitudes para averiguar lo siguiente:

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

   

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

   

3. Haz clic en el botón Add Pattern.

4. Tipo 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 diseño principal. Observa la fila main.css en el registro de red. El texto en rojo significa que el recurso está bloqueado.

   

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

Para descubrir más funciones de DevTools relacionadas con la inspección de la actividad de red, consulta la Referencia de red.