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 relacionadas con la inspección de la actividad de red de una página.

Consulta la Referencia de red si prefieres 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 Red cuando necesites asegurarte de que los recursos se descarguen o suban según lo previsto. Los casos de uso más comunes del panel Red son los siguientes:

• Asegurarse de que los recursos se suban o descarguen.
• 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 Lighthouse, ya que te brinda sugerencias específicas para mejorar tu página. Consulta Cómo optimizar 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 en la página de demostración.

1. Abre la demostración para comenzar.

   

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

   

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

   

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

   

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

   

Por el momento, el panel Red está vacío. Esto se debe a que Herramientas para desarrolladores solo registra la actividad de red mientras está abierto y no se produjo 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 Red 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 enumeran en orden cronológico. El recurso superior suele ser el documento HTML principal. El recurso inferior es el 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.
   • Tipo: Es el tipo de recurso.
   • Iniciador: Es lo que causó que se solicitara un recurso. Si haces clic en un vínculo en la columna Iniciador, se te dirigirá al código fuente que causó la solicitud.
   • Tamaño: Es la cantidad de recursos transferidos por la red.
   • Hora: Es el tiempo que tardó la solicitud.
   Nota: El gráfico que se encuentra sobre el Registro de red se denomina Descripción general. No lo usarás en este instructivo, por lo que puedes ocultarlo si lo prefieres. Consulta Cómo ocultar el seguimiento de la descripción general.

2. Mientras tengas abierto Herramientas para desarrolladores, registrará la actividad de red en el Registro de red. Para demostrarlo, primero observa la parte inferior del Registro de red y toma nota de la última actividad.

3. Ahora, haz clic en el botón Obtener datos en la demostración.

4. Vuelve a mirar la parte inferior del Registro de red. Hay un nuevo recurso llamado getstarted.json. Si haces clic en el botón Obtener datos , la página solicitará este archivo.

   

Mostrar más información

Las columnas del Registro de red se pueden configurar. Puedes ocultar las columnas que no usas. 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.

Simula una conexión de red más lenta

Es probable que la conexión de red de la computadora que usas para compilar 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 mejor idea de cuánto tiempo tarda en cargarse una página en un dispositivo móvil.

1. Haz clic en el menú desplegable Limitación, que está configurado como Sin limitación de forma predeterminada.

   

2. Selecciona 3G.

   

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

   

   En las visitas repetidas, el navegador suele publicar algunos archivos de su caché, lo que acelera la carga de página. Vaciar caché y volver a cargar obliga al navegador a ir a la red para obtener todos los recursos. Esto es útil cuando quieres ver cómo un visitante nuevo experimenta la carga de una página.

   Nota: El flujo de trabajo Vaciar caché y volver a cargar solo está disponible cuando Herramientas para desarrolladores está abierto.

Toma capturas de pantalla

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

Para tomar 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 Vaciar caché y volver a cargar. Consulta Simula una conexión más lenta si necesitas un recordatorio para 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. Herramientas para desarrolladores te muestra qué actividad de red se produjo 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.

Inspecciona 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. Se muestra la pestaña Encabezados. Usa esta pestaña para inspeccionar los encabezados HTTP.

   

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

   

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

   

   Sugerencia: Cuando se minimiza un archivo, si haces clic en el botón Formato data_object en la parte inferior de la pestaña Respuesta, se vuelve a formatear el contenido del archivo para que sea más legible.

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

   

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

   

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

   

Busca encabezados y respuestas de red

Usa la pestaña Buscar cuando necesites buscar las respuestas y los encabezados HTTP de todos los recursos para una cadena o expresión regular determinada.

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

1. Haz clic en Buscar search en la barra de acciones del panel o presiona Comando + F (macOS) o Control + F (Windows / Linux).

   La pestaña Buscar se abre a la izquierda del Registro de red.

   

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

   

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

   

4. Cierra la pestaña Buscar y la pestaña Encabezados.

   

Filtrar recursos

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

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

1. Haz clic en Filtrar filter_alt para mostrarlo.

Filtrar por cadena, expresión regular o propiedad

La casilla de entrada Filtro admite muchos tipos diferentes de filtrado.

1. Escribe png en la casilla 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. Escribe /.*\.[cj]s+$/. Herramientas para desarrolladores filtra cualquier recurso con un nombre de archivo que no termine con una j o una c seguida de 1 o más caracteres s.

   

3. Escribe -main.css. Herramientas para desarrolladores filtra 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 Filtro. Herramientas para desarrolladores filtra cualquier recurso con una URL que no coincida con este dominio.

   

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

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

Filtrar por tipo de recurso

Para enfocarte en un tipo determinado de archivo, como hojas de estilo, 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 presionada la tecla Control o Comando (Mac) y, luego, haz clic en JS.

   

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

Consulta Filtrar solicitudes para obtener 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 siendo funcional? Bloquea las solicitudes para averiguarlo:

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

   

2. Escribe block, selecciona Mostrar bloqueo de solicitudes y presiona Intro.

   

3. Haz clic en el botón Agregar patrón.

4. Escribe main.css.

   

5. Haz clic en Agregar.

6. Vuelve a cargar la página. Como se esperaba, el estilo de la página está un poco desordenado porque se bloqueó su hoja de estilo 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 Herramientas para desarrolladores relacionadas con la inspección de la actividad de red, consulta la Referencia de red.