Inspeccionar actividad de red

Use la herramienta Red para asegurarse de que los recursos que necesita ejecutar la página web se descargan según lo previsto y de que las solicitudes a las API del lado servidor se envían correctamente. Inspeccione las propiedades de las solicitudes y respuestas HTTP individuales, como los encabezados HTTP, el contenido o el tamaño.

Este es un tutorial paso a paso de la herramienta Red para inspeccionar la actividad de red de una página.

Para obtener información general sobre las características de DevTools relacionadas con la red, consulte Referencia de características de red.

Para obtener una versión de vídeo de este tutorial, vea el siguiente vídeo:

Cuándo usar la herramienta Red

En general, use la herramienta Red cuando necesite asegurarse de que los recursos se descargan correctamente y de que las solicitudes a las API del lado servidor se envían según lo previsto. Los casos de uso más comunes de la herramienta Red son:

• Asegúrese de que los recursos se están descargando realmente.

• Comprobar los parámetros de solicitud y las respuestas de las llamadas API del lado servidor.

Si busca formas de mejorar el rendimiento de la carga de páginas, la herramienta Red puede ayudar a comprender cuántos datos se descargan y cuánto tiempo se tarda en descargarlos, pero hay muchos otros tipos de problemas de rendimiento de carga que no están relacionados con la actividad de red. Para investigar aún más los problemas de rendimiento de carga de páginas, puede usar la herramienta Rendimiento, la herramienta Problemas y la herramienta Lighthouse , ya que proporciona sugerencias dirigidas sobre cómo mejorar la página. Por ejemplo, consulte Optimización de la velocidad del sitio web mediante Lighthouse.

Abrir la herramienta Red

Para sacar el máximo partido a este tutorial, abra la demostración y pruebe las características en la página de demostración.

1. Abra la demostración inspeccionar actividad de red en una nueva pestaña o ventana:

   

2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). Se abre DevTools.

3. En DevTools, en la barra de actividad, seleccione la pestaña Red . Si esa pestaña no está visible, haga clic en el botón Más herramientas ():

   Es posible que prefiera acoplar DevTools a la parte inferior de la ventana:

   

La herramienta Red está inicialmente vacía. DevTools solo registra la actividad de red después de abrirlo y no se ha producido ninguna actividad de red desde que abrió DevTools.

Descripción de la interfaz de usuario de la herramienta de red

La herramienta Red se divide en tres partes principales:

• La barra de herramientas superior contiene opciones para personalizar la herramienta y filtrar las solicitudes de red.
• Debajo de la barra de herramientas superior, el gráfico Información general proporciona información general de alto nivel del tráfico de red a lo largo del tiempo y permite filtrar las solicitudes de red.
• Debajo del gráfico Información general , la sección Registro de red muestra la actividad de red y permite inspeccionar solicitudes individuales.

Actividad de red de registro

Para ver la actividad de red que provoca una página:

1. Actualice la página web. La herramienta 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 cronológicamente. El recurso superior 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 ilustración anterior, se muestran las columnas predeterminadas.

   • Estado. Código de estado HTTP para la respuesta.

   • Tipo. Tipo de recurso.

   • Iniciador. Causa de la solicitud de recurso. Al hacer clic en un vínculo de la columna Iniciador , se le lleva al código fuente que provocó la solicitud.

   • Hora. Duración de la solicitud.

   • Cascada. Representación gráfica de las distintas fases de la solicitud. Para mostrar un desglose, mantenga el puntero sobre una cascada.

   Tenga en cuenta que el gráfico Información general también muestra la actividad de red. No usará el gráfico Información general de este tutorial, por lo que puede ocultarlo. Consulte Ocultar el panel Información general.

   Después de abrir DevTools, registra la actividad de red en el registro de red.

2. Para demostrar esto, primero examine la parte inferior del registro de red y tome nota mental de la última actividad.

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

4. Vuelva a mirar la parte inferior del registro de red . Se muestra un nuevo recurso denominado getstarted.json :

   

Mostrar más información

Las columnas del registro de red son configurables. Puede ocultar las columnas que no está usando. También hay muchas columnas que están ocultas de forma predeterminada, lo que puede resultarle útil.

1. Haga clic con el botón derecho en el encabezado de la tabla Registro de red y, a continuación, seleccione Dominio. Ahora se muestra el dominio de cada recurso:

   

2. Para ver la dirección URL completa de un recurso, mantenga el puntero sobre su celda en la columna Nombre .

Simulación de una conexión de red más lenta

La conexión de red del equipo que se usa para compilar sitios es probablemente más rápida que las conexiones de red de los dispositivos móviles de los usuarios. Al limitar la página, se obtiene una mejor idea del tiempo que tarda una página en cargarse en un dispositivo móvil.

1. Seleccione la lista desplegable Limitación en la barra de herramientas superior. Se establece en Sin limitación de forma predeterminada.

2. Seleccione Slow 3G (3G lento):

   

3. Mantenga presionada la tecla Volver a cargar () (o haga clic con el botón derecho en Actualizar) y, a continuación, seleccione Caché vacía y actualización rígida:

   

En las visitas repetidas, el explorador normalmente sirve algunos archivos de la memoria caché, lo que acelera la carga de la página. La memoria caché vacía y la actualización rígida obligan al explorador a ir a la red para todos los recursos. Úselo para mostrar cómo un visitante por primera vez experimenta una carga de página.

La caché vacía y el flujo de trabajo de actualización rígida solo están disponibles cuando DevTools está abierto.

Consulte también Emulación de conexiones de red lentas en Referencia de características de red.

Capturas de pantalla de captura de pantalla

Las capturas de pantalla muestran cómo se ve una página web con el tiempo mientras se carga.

1. Haga clic en el botón () y seleccione la casilla Capturar capturas de pantalla :

   

2. Vuelva a actualizar la página con la caché vacía y el flujo de trabajo de actualización rígida. Consulte Simulación de una conexión más lenta anterior si necesita un recordatorio sobre cómo hacerlo.

   El panel Capturas de pantalla proporciona miniaturas de cómo la página examinó varios puntos durante el proceso de carga:

   

3. Haga clic en la primera miniatura. DevTools muestra qué actividad de red se estaba produciendo en ese momento:

   

4. Vuelva a hacer clic en () y desactive la casilla Capturar capturas de pantalla para cerrar el panel Capturas de pantalla .

5. Vuelva a actualizar la página.

Inspección de los detalles del recurso

Seleccione un recurso para obtener más información al respecto.

1. Seleccione network-tutorial/. Se muestra el panel Encabezados . Use este panel para inspeccionar los encabezados HTTP:

   

2. Seleccione el panel Vista previa . Se muestra una representación básica del HTML:

   

   El panel es útil cuando una API devuelve un código de error en HTML. Es posible que le resulte más fácil leer el HTML representado que el código fuente HTML o al inspeccionar imágenes.

3. Seleccione el panel Respuesta . Se muestra el código fuente HTML:

   

   Sugerencia: Cuando se minifique un archivo, seleccione el botón Formato () en la parte inferior del panel Respuesta para volver a dar formato al contenido del archivo para que sea legible.

   Por ejemplo, si la respuesta contiene datos JSON minificados, haga clic en el botón Formato para volver a dar formato a la sintaxis JSON de modo que cada propiedad de objeto esté en su propia línea. También puede usar el visor JSON para ver las respuestas JSON con formato y resaltadas en una pestaña del explorador. Consulte Visualización de JSON con formato.

4. Seleccione el panel Control de tiempo . Se muestra un desglose de la actividad de red del recurso:

   

5. Haga clic en Cerrar () para volver a ver el registro de red:

   

Buscar encabezados y respuestas de red

Use el panel Buscar cuando necesite buscar en los encabezados HTTP y las respuestas de todos los recursos una cadena o expresión regular determinada.

Por ejemplo, supongamos que desea comprobar que los recursos usan directivas de caché razonables.

1. Seleccione Buscar (). El panel Buscar se abre a la izquierda del registro de red:

   

2. Escriba no-cache y presione Entrar. En el panel Buscar se enumeran todas las instancias de no-cache que encuentra en encabezados de recursos o contenido:

   

3. Haga clic en un resultado para ver el recurso en el que se encontró el resultado. Si examina los detalles del recurso, seleccione un resultado para ir directamente a él. Por ejemplo, si la consulta se encontró en un encabezado, se abre el panel Encabezados . Si la consulta se encontró en el contenido, se abre el panel Respuesta :

   

4. Cierre el panel Buscar y el panel Encabezados .

Filtrar recursos

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

La barra de herramientas Filtros debe estar activada de forma predeterminada. Si la barra de herramientas Filtros no está activada, haga clic en Filtrar () para mostrarlo:

Filtrar por cadena, expresión regular o propiedad

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

1. Escriba 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.

2. Escriba /.*\.[cj]s+$/, que es una expresión regular de JavaScript. DevTools filtra cualquier recurso con un nombre de archivo que no termine con o j seguido c de 1 o más s caracteres.

3. Escriba -main.css. DevTools filtra main.css. Si algún archivo coincide con ese patrón, también se filtra.

4. Escriba larger-than:1000 en el cuadro de texto Filtrar . DevTools filtra cualquier recurso con respuestas que sean menores que 1000 bytes.

   Para obtener la lista completa de propiedades filtrables, vea Filtrar solicitudes por propiedades.

5. Desactive el cuadro de texto Filtrar de cualquier texto.

Filtrar por tipo de recurso

Para centrarse en un tipo determinado de archivo, como hojas de estilos:

1. Seleccione CSS. Todos los demás tipos de archivo se filtran:

   

2. Para mostrar también scripts, mantenga presionada la tecla Ctrl (Windows, Linux) o Comando (macOS) y, a continuación, haga clic en JS.

3. Para quitar los filtros y volver a mostrar todos los recursos, seleccione Todos.

Para ver otros flujos de trabajo de filtrado, consulte Solicitudes de filtro.

Bloquear solicitudes

¿Cómo se ve y se comporta una página cuando algunos de los recursos de página no están disponibles? ¿Falla por completo o sigue siendo algo funcional? Bloquear solicitudes para averiguar:

1. Presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS) para abrir el menú Comando.

2. Escriba block, seleccione Mostrar bloqueo de solicitudes de red y, a continuación, presione Entrar:

   

3. Haga clic en Agregar patrón (), escriba main.cssy, a continuación, haga clic en Agregar:

   

4. Actualiza la página. Como se esperaba, el estilo de la página está ligeramente desordenado, porque la hoja de estilos principal se ha bloqueado.

   En la main.css fila del registro de red, el texto rojo significa que el recurso se bloqueó:

   

5. Desactive la casilla Habilitar bloqueo de solicitudes de red .

Conclusión

Enhorabuena, ha completado el tutorial. Ahora sabe cómo usar la herramienta Red en Microsoft Edge DevTools.

Para detectar más características de DevTools relacionadas con la inspección de la actividad de red, consulte Referencia de características de red.

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.