Referencia de características de red

La herramienta Red tiene las siguientes características para inspeccionar la actividad de red de una página web.

Para obtener un tutorial paso a paso e introducción a la herramienta Red , consulte Inspeccionar actividad de red.

Contenido detallado:

• Registro de solicitudes de red
  • Detener el registro de solicitudes de red
  • Borrar solicitudes
  • Guardar solicitudes en cargas de página
  • Captura de pantalla durante la carga de la página
  • Reenviar una solicitud
  • Editar y reenviar una solicitud como una llamada de captura
• Cambiar comportamiento de carga
  • Emular a un visitante por primera vez deshabilitando la memoria caché del explorador
    • Deshabilite la caché del explorador desde la herramienta Condiciones de red
  • Borrar manualmente la memoria caché del explorador
  • Emular sin conexión
  • Emular conexiones de red lentas
    • Crear un perfil de limitación personalizado
    • Limitar las conexiones de WebSocket
    • Emulación de conexiones de red lentas desde la herramienta Condiciones de red
  • Borrar manualmente las cookies del explorador
  • Invalidar encabezados de respuesta HTTP
  • Reemplazar el agente de usuario
• Establecer sugerencias de cliente de agente de usuario
• Solicitudes de búsqueda
• Filtrar solicitudes
  • Filtrar solicitudes por propiedades
  • Filtrar solicitudes por tipo
  • Filtrar solicitudes por hora
  • Ocultar direcciones URL de datos
  • Ocultar direcciones URL de extensión
  • Mostrar solo las solicitudes con cookies de respuesta bloqueadas
  • Mostrar solo solicitudes bloqueadas
  • Mostrar solo solicitudes de terceros
• Ordenar solicitudes
  • Ordenar por columna
  • Ordenar por fase de actividad
• Analizar solicitudes
  • Mostrar un registro de solicitudes
    • Agregar o quitar columnas
    • Agregar columnas personalizadas para los encabezados de respuesta
  • Agrupar solicitudes por fotogramas insertados
  • Mostrar la relación de tiempos de las solicitudes
  • Analizar los mensajes de una conexión WebSocket
  • Analizar eventos en una transmisión
  • Mostrar una vista previa del cuerpo de una respuesta
  • Mostrar un cuerpo de respuesta
  • Mostrar encabezados HTTP
    • Ver origen del encabezado HTTP
    • Advertencia de encabezados provisionales
  • Ver la carga de solicitud (cadena de consulta, parámetros y datos de formulario)
    • Ver origen de carga
    • Mostrar parámetros de cadena de consulta codificados en URL
  • Mostrar cookies
  • Mostrar el desglose de tiempo de una solicitud
    • Obtener una vista previa de un desglose de intervalos
    • Explicación de las fases de desglose del tiempo
    • Analizar el enrutamiento de una solicitud de trabajo de servicio
  • Mostrar iniciadores y dependencias
  • Mostrar eventos de carga
  • Mostrar el número total de solicitudes
  • Mostrar el tamaño total de la descarga
  • Mostrar el seguimiento de la pila que provocó una solicitud
  • Mostrar el tamaño sin comprimir de un recurso
• Exportar datos de solicitudes
  • Guardar todas las solicitudes de red en un archivo HAR
  • Importar un archivo HAR en DevTools para analizarlo
  • Copiar las solicitudes de red en el Portapapeles
  • Copiar JSON de respuesta con formato en el portapapeles
  • Copiar los valores de las propiedades de las solicitudes de red en el Portapapeles
• Cambiar el diseño de la herramienta Red
  • Ocultar el panel de filtros
  • Usar filas de solicitud grandes
  • Ocultar el panel de información general
• Ver también

Registro de solicitudes de red

De forma predeterminada, DevTools registra todas las solicitudes de red en la herramienta Red , siempre y cuando DevTools esté abierto.

Por ejemplo:

1. Vaya a una página web, como la página de demostración Inspeccionar actividad de red , en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   El botón Detener registro de red de grabación es rojo y está disponible:

Detener el registro de solicitudes de red

Para detener la grabación de solicitudes:

1. En la herramienta Red , haga clic en Detener grabación de registro de red (). Se vuelve gris para indicar que DevTools ya no está grabando solicitudes.

2. Presione Ctrl+E (Windows, Linux) o Comando+E (macOS) mientras la herramienta Red está en el foco.

Borrar solicitudes

Para borrar todas las solicitudes de la tabla Solicitudes , en la herramienta Red , haga clic en el botón Borrar registro de red ():

O bien, presione Ctrl+L (Windows, Linux, macOS) o Comando+K (macOS) mientras la herramienta Red tiene el foco.

Vea también:

• Aplicación TODO

Guardar solicitudes en cargas de página

Para guardar solicitudes a través de cargas de página, en la herramienta Red , active la casilla Conservar registro :

DevTools guarda todas las solicitudes hasta que deshabilita Conservar registro.

Vea también:

• Aplicación TODO

Captura de pantalla durante la carga de la página

Puedes hacer capturas de pantalla para analizar lo que se muestra a los usuarios mientras esperan a que se cargue tu página.

Para habilitar las capturas de pantalla:

1. Vaya a una página web, como la aplicación TODO, en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. Abra la herramienta Red en DevTools.

4. En la esquina superior derecha de la herramienta Red , haga clic en el icono Configuración de red (engranaje). Aparecerá una fila de casillas de verificación.

5. Active la casilla Captura de pantalla:

   

Para realizar una captura de pantalla:

1. Mientras la herramienta Red tiene el foco, presione Ctrl+F5 para actualizar la página. Las capturas de pantalla se capturan durante la carga de la página y las miniaturas se muestran debajo de la fila de casillas de verificación.

   Puede interactuar con las capturas de pantalla de la siguiente manera.

2. Mantenga el puntero sobre una captura de pantalla para mostrar el punto en el que se capturó. Se muestra una línea vertical amarilla en el panel Información general del gráfico.

   

3. Haga clic en la miniatura de una captura de pantalla para filtrar las solicitudes que se produjeron después de capturar la captura de pantalla.

4. Haga doble clic en una miniatura de captura de pantalla para acercarla y verla.

5. Presione Esc para cerrar el visor de capturas de pantalla.

Reenviar una solicitud

Para volver a enviar una solicitud de red sin volver a cargar la página web, use el comando Reenviar de la tabla Solicitudes de la herramienta Red.

El comando Reenviar está disponible para los siguientes tipos de solicitud:

• XHR
• Recuperar cambios
• JavaScript
• CSS
• imagen
• medios
• font
• Asamblea web
• manifiesto
• Pista de texto
• mapa de origen

Para reenviar una solicitud:

1. Vaya a una página web, como la demostración de referencia de herramienta de red, en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   En la tabla Solicitudes de la herramienta Red, aparecen filas para:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. En la página web de demostración, haga clic en el botón Enviar una solicitud de XHR .

   En la tabla Solicitudes de la herramienta Red, se agrega una data.json fila. La columna Iniciador dice script.js:20.

6. En la tabla Solicitudes , haga clic con el botón derecho en la data.json solicitud y seleccione Reenviar.

   O bien, seleccione la solicitud y presione R.

   En la tabla Solicitudes de la herramienta Red, se agrega una segunda data.json fila. La columna Iniciador dice Otro:

   

Para obtener información sobre los iniciadores, consulte:

• Muestre los iniciadores y las dependencias a continuación.
• Registre la actividad de red en Inspeccionar actividad de red.

DevTools reenvía solicitudes de XHR como XHR. DevTools convierte otros tipos de solicitud admitidos para capturar solicitudes antes de enviarlas.

Después de hacer clic en el botón Enviar una solicitud de XHR de la demostración (que hace que JavaScript envíe una solicitud), el elemento de menú Copiar seguimiento de> la pila aparece en el menú Copiar para solicitudes del botón derecho. Consulte Copiar solicitudes de red en el portapapeles, más abajo.

Editar y reenviar una solicitud como una llamada de captura

Para editar una solicitud de red antes de volver a enviarla, utilice el comando Editar y reenviar como recuperar de la tabla Solicitudes de la herramienta Red. Este comando hace que DevTools copie la solicitud de red como una fetch() llamada en la herramienta Consola , donde puede modificarla y enviarla.

El comando Editar y reenviar como recuperar está disponible para los siguientes tipos de solicitud:

• XHR
• Recuperar cambios
• JavaScript
• CSS
• imagen
• medios
• font
• Asamblea web
• manifiesto
• Pista de texto
• mapa de origen
• documento
• Captura previa
• Solicitudes de ping

A diferencia del comando Reenviar , que reenvía una solicitud de XHR como XHR, Editar y reenviar como capturar convierte XHR y todos los demás tipos de solicitud admitidos en fetch() llamadas.

La columna opcional Contexto de ejecución de la tabla Solicitudes muestra el contexto de ejecución desde el que se envió cada solicitud.

Para editar y reenviar una solicitud como una llamada de captura:

1. Vaya a una página web, como la demostración de referencia de herramienta de red, en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   En la tabla Solicitudes de la herramienta Red, aparecen filas para:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. En la página web de demostración, haga clic en el botón Enviar una solicitud de XHR .

   En la tabla Solicitudes de la herramienta Red, se agrega una data.json fila.

6. En la tabla Solicitudes , haga clic con el botón derecho en la solicitud que desea modificar, como la data.json solicitud, y luego seleccione Editar y reenviar como capturar.

   La herramienta Consola se abre en el cajón situado en la parte inferior de DevTools.

   Una llamada editable fetch() que reproduce la solicitud se agrega al símbolo del sistema de la consola . El código generado incluye comentarios que identifican la solicitud original y su contexto de ejecución.

   Un mensaje por encima del código generado, como Copia reenviable de la solicitud GET a data.json, tiene un vínculo ( a la solicitud original en la herramienta Red :

   

   Nota: Solo puede haber una solicitud pendiente en el símbolo del sistema de la Consola a la vez. Si seleccionas Editar y reenviar como Capturar para otra solicitud, la nueva fetch() llamada reemplaza el mensaje actual de la Consola , sin mostrar una advertencia.

7. Si el comentario generado le indica que seleccione un contexto de ejecución, use la lista desplegable de contexto de JavaScript en la barra de herramientas de la Consola para seleccionar el contexto de ejecución (por ejemplo, top) en el que se reenvía la solicitud de red como una llamada de captura.

8. Modifique la dirección URL, el método, los encabezados o el cuerpo de la llamada generada fetch() .

   Algunos encabezados de solicitud que no puede establecer una fetch() llamada se conservan como comentarios informativos.

9. Presione Entrar para enviar la solicitud modificada.

La nueva solicitud se muestra en la tabla Solicitudes de la herramienta Red. Un icono de terminal en la columna Nombre identifica la solicitud como originada en la consola.

Cambiar comportamiento de carga

Emular a un visitante por primera vez deshabilitando la memoria caché del explorador

Para emular la forma en que un usuario experimenta el sitio por primera vez, active la casilla Deshabilitar caché . DevTools deshabilita la memoria caché del explorador. Esta característica emula con mayor precisión la experiencia de un usuario primerizo, ya que las solicitudes se atienden desde la memoria caché del explorador en visitas repetidas.

La casilla Deshabilitar caché :

Deshabilite la caché del explorador desde la herramienta Condiciones de red

Desde la herramienta Red , puede abrir la herramienta Condiciones de red en el panel Vista rápida en la parte inferior de DevTools y, a continuación, deshabilitar la caché del explorador desde allí:

1. En la herramienta Red , haga clic en el botón Más condiciones de red (). La herramienta Condiciones de red se abre en el panel Vista rápida en la parte inferior de DevTools.

2. En la herramienta Condiciones de red , seleccione la casilla Deshabilitar caché :

   

Vea también:

• Herramienta Condiciones de red

Borrar manualmente la memoria caché del explorador

Para borrar manualmente la caché del explorador en cualquier momento, haz clic con el botón derecho en cualquier lugar de la tabla Solicitudes y, a continuación, selecciona Borrar la caché del explorador:

Vea también:

• Aplicación TODO

Emular sin conexión

Una clase de aplicaciones web, denominadas Progressive Web Apps (PWA), pueden funcionar sin conexión con la ayuda de los trabajadores de servicio. Puede resultarle útil simular rápidamente un dispositivo que no tiene conexión de datos, cuando esté creando este tipo de aplicación.

Para simular una experiencia de red sin conexión, seleccione el menú > desplegable Sin limitaciónPreestablecidos>sin conexión.

El menú desplegable Sin conexión :

Emular conexiones de red lentas

Para emular 4G rápido, 4G lento o 3G, selecciona el ajuste preestablecido correspondiente en el menú desplegable Limitación en la barra de acciones en la parte superior:

Puedes elegir entre diferentes valores preestablecidos, como:

• 4G rápido
• 4G lento
• 3G
• Offline

Para agregar sus propios ajustes preestablecidos personalizados, haga clic en el menú Limitación y, a continuación, seleccioneAgregar personalizado>.

Se muestra un icono de advertencia en la pestaña de la herramienta Red para recordarle que la limitación está habilitada:

Vea también:

• Simular una conexión de red más lenta en Inspeccionar actividad de red.
• Aplicación TODO

Crear un perfil de limitación personalizado

Además de los ajustes preestablecidos, como 4G lento o rápido, también puede agregar sus propios perfiles de limitación personalizados.

Para crear un perfil de limitación personalizado:

1. Vaya a una página web, como la página de demostración Inspeccionar actividad de red , en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. Seleccione la herramienta Red .

4. En el menú Limitación , en la sección Personalizado , seleccione Agregar.

   Seleccione Personalizar y controlarla limitaciónde la configuración>de DevTools>.

   Se abrirá la página Configuración de DevTools, con la página Limitación seleccionada.

5. En la sección Perfiles de limitación de red , haga clic en el botón Agregar perfil .

   A continuación se muestran los valores de ejemplo que se usan en la sección siguiente.

6. En el cuadro de texto Nombre del perfil , escriba 10 kb/s.

7. En el cuadro de texto Descargar , escriba 10 (para 10 kbit/s).

8. En el cuadro de texto Cargar , escriba 10 (para 10 kbit/s).

9. En el cuadro de texto Latencia , escriba 10 (durante 10 ms).

10. En el cuadro de texto Pérdida de paquetes , escriba 1 (para 1%).

11. En el cuadro de texto Longitud de la cola de paquetes , escriba 10.

12. Active la casilla Reordenar paquetes :

    

13. Haga clic en el botón Agregar.

    Se muestra el perfil de limitación personalizado:

    

14. En el panel Configuración , haz clic en el botón Cerrar (X).

15. Seleccione la herramienta Red .

16. En el menú desplegable Limitación , en la sección Personalizado , seleccione el perfil de limitación personalizado, como 10 kb/s:

    

    Se muestra un icono de advertencia () en la pestaña Red para recordarle que la limitación está habilitada.

Vea también:

• Configure el perfil personalizado de limitación de red en Limitación.

Limitar las conexiones de WebSocket

Además de las solicitudes HTTP, DevTools puede limitar las conexiones de WebSocket. Usaremos el perfil de limitación lenta personalizado que se creó en la sección anterior para mostrar el efecto de una conexión WebSocket limitada en la página web.

Para observar la limitación de WebSocket:

1. Siga los pasos descritos en la sección anterior Creación de un perfil de limitación personalizado.

2. Vaya a una página que use WebSockets, como el probador de WebSocket en línea, en una nueva ventana o pestaña.

3. En la página, establezca la conexión WebSocket.

   Si utiliza la página web de WebSocket Tester en línea , haga clic en el botón Conectar .

   Si no crea una cuenta de PieSocket para obtener un token de API, la página web muestra "Connection Established - {"error":"Unknown api key"}".

   Si crea una cuenta de PieSocket para obtener un token de API, la página web simplemente muestra "Conexión establecida".

4. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

5. En DevTools, en la herramienta Red, en el menú desplegable Limitación, seleccione10 kbpspersonalizado>.

   Esa opción se creó en la sección anterior, Crear un perfil de limitación personalizado.

6. En la página web del probador WebSocket en línea , en el cuadro de texto del mensaje, eliminar DevTools sin limitación y entrar en DevTools con limitación.

7. En la página web de WebSocket Tester en línea , haga clic en el botón Enviar .

   La consola de la página web del probador WebSocket en línea muestra DevTools con limitación.

8. En la parte superior de la herramienta Red , seleccione el botón Filtro de socket (como se muestra a continuación).

9. En la tabla, haga clic en el nombre de la conexión, como channel_123?api_key=....

   Aparecen pestañas.

10. Seleccione la pestaña Mensajes (como se muestra a continuación).

    Aparecen los mensajes de WebSocket que se enviaron entre el cliente y el servidor.

    La columna Hora muestra cuándo se reciben o envían los mensajes. Estos valores de tiempo reflejan la conexión de red limitada.

Emulación de conexiones de red lentas desde la herramienta Condiciones de red

Desde la herramienta Red , puede abrir la herramienta Condiciones de red en el panel Vista rápida en la parte inferior de DevTools y, a continuación, limitar la conexión de red desde allí:

1. En la herramienta Red, haga clic en el botón Más condiciones de red ( La herramienta Condiciones de red se abre en el panel Vista rápida en la parte inferior de DevTools.

2. En la herramienta Condiciones de red , en el menú Limitación de red , seleccione una velocidad de conexión.

Vea también:

• Herramienta Condiciones de red

Borrar manualmente las cookies del explorador

Para borrar manualmente las cookies del explorador en cualquier momento, haga clic con el botón derecho en cualquier lugar de la tabla Solicitudes y, a continuación, seleccione Borrar las cookies del explorador.

Invalidar encabezados de respuesta HTTP

Vea también:

• Invalidar recursos de página web con copias locales (pestaña Invalidaciones)
• Invalidar archivos y encabezados de respuesta HTTP en Invalidar localmente el contenido web y los encabezados de respuesta HTTP.

Reemplazar el agente de usuario

Para invalidar manualmente el agente de usuario:

1. En la herramienta Red, haga clic en el botón Más condiciones de red ( La herramienta Condiciones de red se abre en el panel Vista rápida en la parte inferior de DevTools.

2. En la herramienta Condiciones de red , desactive la casilla Usar explorador predeterminado . Los demás controles estarán disponibles.

3. Seleccione una opción de agente de usuario en el menú o escriba un agente de usuario personalizado en el cuadro de texto.

Establecer sugerencias de cliente de agente de usuario

Si el sitio emplea sugerencias de cliente de agente de usuario y desea probarlas, puede establecerlas en la herramienta Condiciones de red o en Emular dispositivos móviles (emulación de dispositivo).

Para establecer sugerencias de cliente de agente de usuario en la herramienta Condiciones de red :

1. En la herramienta Red, haga clic en el botón Más condiciones de red ( La herramienta Condiciones de red se abre en el panel Vista rápida en la parte inferior de DevTools.

2. En la sección Agente de usuario , desactive la casilla Usar explorador predeterminado y, a continuación, expanda Sugerencias de cliente de agente de usuario:

   

3. En la lista desplegable Agente de usuario , seleccione un explorador y un dispositivo predefinidos. O bien, acepte el valor predeterminado de Personalizado..., e introduzca información en el cuadro de texto Introducir un agente de usuario personalizado .

4. Para cualquiera de las opciones (predefinida o personalizada), especifique las sugerencias de cliente del agente de usuario de la siguiente manera:

   • marca y versión , como Edge y 92. Para agregar varios pares de marca/versión, haz clic en + Agregar marca.
   • Versión completa del explorador , como 92.0.1111.0.
   • comoWindows y 10.0.
   • Arquitectura como x86.
   • Modelo de dispositivo , como Galaxy Nexus.

   Puede establecer o cambiar cualquiera de las sugerencias de cliente del agente de usuario; No hay valores obligatorios.

5. Seleccione Actualizar.

6. Para comprobar los cambios, haga clic en Consola y escriba navigator.userAgentData. Expanda los resultados según sea necesario para ver los cambios en los datos del agente de usuario.

Vea también:

• Sugerencias de cliente de agente de usuario para detectar Microsoft Edge desde su sitio web.

Solicitudes de búsqueda

Para buscar en encabezados de solicitud, cargas útiles y respuestas:

1. En la herramienta Red , haga clic en el botón Buscar (). O bien, presione Ctrl+F (Windows, Linux) o Comando+F (macOS).

   Se abrirá la pestaña Buscar en el lado izquierdo de la herramienta Red .

2. En el cuadro de texto Buscar , escriba la cadena de consulta y, a continuación, presione Entrar.

   Opcionalmente, haga clic en el botón Coincidir mayúsculas y minúsculas para activar la distinción entre mayúsculas y minúsculas. Opcionalmente, haga clic en el botón Expresión regular para activar las expresiones regulares.

3. Haga clic en uno de los resultados de la búsqueda. La herramienta Red resalta en amarillo la solicitud que coincide. La herramienta Red también abre la pestaña Encabezados o Respuesta y resalta la cadena que coincide allí, si la hay.

Para actualizar los resultados de la búsqueda, en la pestaña Buscar , haga clic en el botón Actualizar ().

Para borrar los resultados de la búsqueda, en la pestaña Buscar , haga clic en el botón Borrar búsqueda ().

Para obtener más información sobre todas las formas en las que puede buscar en DevTools, consulte Buscar archivos de origen para una página mediante la herramienta de búsqueda

Filtrar solicitudes

Puede filtrar las solicitudes por propiedades, por tipo o por hora, y puede ocultar las direcciones URL de datos. La lista desplegable Más filtros contiene las siguientes opciones y marcas de verificación de estado:

• Ocultar direcciones URL de datos
• Ocultar direcciones URL de extensión
• Cookies de respuesta bloqueadas
• Solicitudes bloqueadas
• Solicitudes de terceros

La lista desplegable tiene un número a la izquierda que te indica cuántos filtros están seleccionados en ella.

Filtrar solicitudes por propiedades

Use el cuadro de texto Filtro para filtrar solicitudes por propiedades, como el dominio o el tamaño de la solicitud.

Si no se muestra el cuadro de texto, es probable que el panel de filtros esté oculto; consulte Ocultar el panel Filtros, a continuación.

El cuadro de texto Filtro :

Para invertir el filtro, active la casilla Invertir situada junto a la casilla Filtro .

Puede usar varias propiedades simultáneamente separando cada propiedad con un espacio. Por ejemplo, mime-type:image/png larger-than:1K muestra todos los PNG que tengan un tamaño superior a 1 kilobyte. Los filtros de propiedades múltiples son equivalentes a AND operaciones. OR operaciones no admitidas.

La lista completa de propiedades admitidas:

Filtrar solicitudes por tipo

Para filtrar las solicitudes por tipo de solicitud, haga clic en los botones de la herramienta Red : Todas, Fetch/XHR,Doc, CSS, JS, Fuente, Img, Media, Manifiesto, WS (WebSocket), Wasm (WebAssembly) u Otro (cualquier otro tipo que no aparezca aquí).

Si los botones no aparecen, es posible que el panel de filtros esté oculto. Consulte Ocultar el panel Filtros, a continuación.

Para habilitar varios filtros de tipo simultáneamente, mantenga presionada la tecla Ctrl (Windows, Linux) o Comando (macOS) y, a continuación, haga clic en los filtros.

Filtrar solicitudes por hora

Haga clic y arrastre a la izquierda o a la derecha en el panel de información general para mostrar solo las solicitudes que estaban activas durante ese período de tiempo. El filtro es inclusivo. Se muestran todas las solicitudes que estaban activas durante el tiempo resaltado.

Filtrando las solicitudes que estaban inactivas hace unos 300 ms:

Ocultar direcciones URL de datos

Las direcciones URL de datos son pequeños archivos incrustados en otros documentos. Cualquier solicitud que aparezca en la tabla Solicitudes que empiece por data: es una URL de datos.

Para ocultar las solicitudes, desactive la casilla Ocultar direcciones URL de datos :

Ocultar direcciones URL de extensión

Para centrarse en el código que crea, puede filtrar solicitudes irrelevantes enviadas por extensiones que pueda haber instalado en Microsoft Edge. Las solicitudes de extensión tienen direcciones URL que comienzan con chrome-extension://.

Para ocultar las solicitudes de extensión, en la barra de acciones filtros , selecciona el menú desplegable Más filtros y, a continuación, selecciona Ocultar direcciones URL de extensiones para que aparezca una marca de verificación junto a ella:

La barra de estado de la parte inferior muestra el número de solicitudes mostradas del total, como 5 / 10 solicitudes.

Mostrar solo las solicitudes con cookies de respuesta bloqueadas

Para filtrar todo excepto las solicitudes con cookies de respuesta bloqueadas por cualquier motivo, en la barra de acciones Filtros , seleccione la lista desplegable Más filtros y, a continuación, seleccione Cookies de respuesta bloqueadas para que aparezca una marca de verificación junto a ella.

Luego, para averiguar por qué se bloqueó una cookie de respuesta, seleccione la solicitud (en Nombre), abra su pestaña Cookies (a la derecha) y luego coloque el cursor sobre el icono de información ().

Por ejemplo:

1. En Microsoft Edge, selecciona Configuración y mucho más>Nueva ventana de InPrivate.

2. En la barra de direcciones, escriba Microsoft.com.

3. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

4. Seleccione la herramienta Red .

5. Asegúrese de que el botón Todos los filtros esté seleccionado.

6. Actualice la página web.

   Muchos mensajes se enumeran en la herramienta Red .

7. En la barra de acciones Filtros , seleccione la lista desplegable Más filtros y, a continuación, seleccione Cookies de respuesta bloqueadas.

   En el menú, aparece una marca de verificación junto a las Cookies de respuesta bloqueadas.

8. Haga clic fuera de la lista desplegable para cerrarla.

   Se muestran las solicitudes que tienen bloqueadas las cookies de respuesta, como id?d_visid_ver=....

9. Seleccione una solicitud, como id?d_visid_ver=....

   Se abrirá la barra lateral con pestañas.

10. Seleccione la pestaña Cookies .

11. Mantenga el puntero sobre el icono de información ().

    La información sobre herramientas dice, por ejemplo: "Este intento de establecer una cookie a través de un encabezado Set-Cookie se bloqueó debido a las preferencias del usuario".

    

    La barra de estado de la parte inferior muestra el número de solicitudes mostradas del total.

Además, la herramienta Red muestra un icono de advertencia () junto a una solicitud con cookies bloqueadas debido a indicadores o configuración de Edge. Pase el cursor sobre el icono para ver una información sobre herramientas con una pista y haga clic en él para ir a la herramienta Problemas para obtener más información.

Mostrar solo solicitudes bloqueadas

Para filtrar todo excepto las solicitudes bloqueadas, en la barra de acciones Filtros , seleccione Más filtros>Solicitudes bloqueadas, de modo que aparezca una marca de verificación. Para probar esto, puede usar la herramienta Bloqueo de solicitudes de red en el panel Vista rápida en la parte inferior de DevTools; consulte Bloquear solicitudes en Inspeccionar actividad de red.

Por ejemplo:

1. Vaya a una página web, como la página de demostración Inspeccionar actividad de red , en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   La tabla Solicitudes enumera .html, .css, .pngy archivos .js .

5. En la lista desplegable Más filtros (con la información sobre herramientas de Mostrar solo u ocultar solicitudes), seleccione Solicitudes bloqueadas.

   En la lista desplegable, se muestra una marca de verificación junto a las solicitudes bloqueadas.

6. Haga clic fuera de la lista desplegable para cerrarla.

   La tabla Solicitudes está vacía porque DevTools no está bloqueando ninguna solicitud y las solicitudes ahora se filtran para mostrar solo las solicitudes bloqueadas.

7. Presione Esc una o dos veces para que el panel Vista rápida se abra en la parte inferior de DevTools.

8. En la barra de herramientas de Vista rápida , haga clic en el botón Más herramientas () y, a continuación, seleccione Bloqueo de solicitudes de red.

   La herramienta Bloqueo de solicitudes de red se abre en el panel Vista rápida .

9. En la herramienta Bloqueo de solicitudes de red, haga clic en el botón Agregar patrón de bloqueo de solicitudes de red (

10. En el cuadro de texto Patrón de texto para bloquear solicitudes coincidentes , escriba *.pngy, después, haga clic en el botón Agregar .

    *.png aparece con una marca de verificación.

    En la herramienta Red , la tabla Solicitudes sigue vacía porque aún no se ha bloqueado ninguna solicitud activamente.

11. Actualice la página web.

    

    • En la página web de demostración, en lugar de un logotipo de Edge junto al encabezado, se muestra un icono de imagen rota, junto con el texto alternativo de la imagen (el logotipo de Microsoft Edge DevTools).

    • En la herramienta Red , la tabla Solicitudes enumera .png solo los archivos. La tabla Solicitudes resalta las solicitudes bloqueadas como texto rojo.

    • En la herramienta Red , la barra de estado de la parte inferior muestra el número de solicitudes mostradas del total, como 2 / 5 solicitudes.

Mostrar solo solicitudes de terceros

Para filtrar todo excepto las solicitudes con un origen diferente del origen de la página, en la barra de acciones Filtros , seleccione Más solicitudes>de terceros de filtros, de modo que aparezca una marca de verificación. Pruébelo en la página de demostración Inspeccionar actividad de red .

La barra de estado de la parte inferior muestra el número de solicitudes mostradas del total.

Ordenar solicitudes

De forma predeterminada, las solicitudes de la tabla Solicitudes se ordenan por hora de inicio, pero puede ordenar la tabla con otros criterios.

Ordenar por columna

Haga clic en el encabezado de cualquier columna de Solicitudes para ordenar las solicitudes por esa columna.

Ordenar por fase de actividad

La columna Cascada está desactivada de forma predeterminada. Para activar la columna Cascada : haga clic con el botón derecho en un encabezado de tabla Solicitudes y, a continuación, seleccione el elemento de menú Cascada normal que no tiene un submenú.

Para cambiar la forma en que la columna Cascada ordena las solicitudes:

• Haga clic con el botón derecho en el encabezado de la tabla Solicitudes , haga clic en Cascada y, a continuación, seleccione una de las siguientes opciones:

  • Hora de inicio : la primera solicitud que se inició se coloca en la parte superior.

  • Tiempo de respuesta : la primera solicitud que comenzó a descargarse se coloca en la parte superior.

  • Hora de finalización : la primera solicitud finalizada se coloca en la parte superior.

  • Duración total : la solicitud con la configuración de conexión y la solicitud o respuesta más cortas se coloca en la parte superior.

  • Latencia : la solicitud que ha esperado menos tiempo para recibir una respuesta se coloca en la parte superior.

Estas descripciones asumen que cada opción respectiva se clasifica de la más corta a la más larga. Haga clic en el encabezado de la columna Cascada para invertir el orden.

A continuación se muestra la ordenación de la cascada por duración total. La parte más clara de cada barra es el tiempo dedicado a esperar y la parte más oscura es el tiempo dedicado a descargar bytes:

Analizar solicitudes

Mientras DevTools esté abierto, registrará todas las solicitudes en la herramienta Red . Utilice la herramienta Red para analizar solicitudes.

Mostrar un registro de solicitudes

Use la tabla Solicitudes para mostrar un registro de todas las solicitudes realizadas mientras DevTools ha estado abierto. Para obtener más información sobre cada elemento, haga clic o mantenga el puntero sobre las solicitudes.

La tabla Solicitudes muestra las siguientes columnas de forma predeterminada:

• Nombre. El nombre de archivo del recurso o un identificador para el recurso.
• Estado. El código de estado HTTP.
• Tipo. El tipo MIME del recurso solicitado.
• Iniciador. Los siguientes objetos o procesos pueden iniciar solicitudes:
  • Analizador. El analizador de HTML.
  • Redirigir. Una redirección HTTP.
  • Guión. Una función de JavaScript.
  • Otros. Algún otro proceso o acción, como navegar a una página a través de un vínculo o escribir una dirección URL en la barra de direcciones.
• Tamaño. El tamaño combinado de los encabezados de respuesta más el cuerpo de la respuesta, tal como lo entrega el servidor.
• Tiempo. La duración total, desde el inicio de la solicitud hasta la recepción del último byte de la respuesta.
• Cumplido por. Si la solicitud la ha cumplido la caché HTTP o el trabajo de servicio de la aplicación.

La columna Cascada está desactivada de forma predeterminada. Para activar la columna Cascada , haga clic con el botón derecho en un encabezado de tabla Solicitudes y, a continuación, seleccione el elemento de menú Cascada normal que no tiene un submenú.

Agregar o quitar columnas

Haga clic con el botón derecho en el encabezado de la tabla Solicitudes y seleccione un nombre de columna para ocultarlo o mostrarlo. Las columnas que se muestran actualmente tienen marcas de verificación junto a ellas.

Agregar columnas personalizadas para los encabezados de respuesta

Para agregar una columna personalizada a la tabla Solicitudes :

1. Haga clic con el botón derecho en el encabezado de la tabla Solicitudes y, a continuación, seleccione Encabezados de> respuestaAdministrar columnas de encabezado.

   Se abre la ventana emergente Administrar columnas de encabezado .

2. Haga clic en el botón Agregar encabezado personalizado , escriba el nombre del encabezado personalizado y, a continuación, haga clic en Agregar.

   

Agrupar solicitudes por fotogramas insertados

Si los marcos insertados en una página inician una gran cantidad de solicitudes, puede hacer que el registro de solicitudes sea más amigable si los agrupa.

Para agrupar solicitudes por iframes:

1. Vaya a una página web, como la demostración de referencia de herramienta de red, en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   En la tabla Solicitudes de la herramienta Red, aparecen filas para:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. En la página web de demostración, haga clic en el botón Cargar iframes .

   Se agregan muchas filas en la tabla Solicitudes :

   

6. En la herramienta Red , haga clic en el botón Configuración de red () y luego active la casilla Agrupar por fotograma .

   En la tabla Solicitudes , se muestran los nombres de marco expandibles.

7. En la tabla Solicitudes , haga clic en un triángulo de expansión en un marco.

   Se muestran las solicitudes iniciadas por el marco insertado:

   

Mostrar la relación de tiempos de las solicitudes

Use la columna Cascada del panel Solicitudes para ver las relaciones de tiempo de las solicitudes. La organización predeterminada de la columna Cascada usa la hora de inicio de las solicitudes. Por lo tanto, las solicitudes que están más a la izquierda se iniciaron antes que las solicitudes que están más a la derecha.

La columna Cascada está desactivada de forma predeterminada. Para activar la columna Cascada , haga clic con el botón derecho en un encabezado de tabla Solicitudes y, a continuación, seleccione el elemento de menú Cascada normal que no tiene un submenú.

Para ver las diferentes formas en que puede ordenar la cascada, consulte Ordenar por fase de actividad, más arriba.

La columna Cascada del panel Solicitudes :

Analizar los mensajes de una conexión WebSocket

Para ver los mensajes de una conexión WebSocket:

1. Vaya a una página web, como el Probador de Websocket en línea.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. Seleccione la herramienta Red .

   El botón Todo el filtro está seleccionado de forma predeterminada. El panel Red está vacío y no muestra ningún mensaje.

4. Actualice la página web.

   En la tabla Solicitudes de la herramienta Red, se enumeran muchas solicitudes.

5. En la parte superior de la herramienta Red , seleccione el botón Filtro de socket , con información sobre herramientas: WebSocket | Transporte web | DirectSocket.

   La lista filtrada de solicitudes está vacía.

6. En la página web de Websocket Tester en línea, haga clic en el botón Conectar .

   Si no has configurado una cuenta y un token de API, la página muestra:

   • Conexión establecida
   • {"error":"Unknown api key"} con un triángulo apuntando hacia abajo; enviado desde el servidor al explorador.

   En la herramienta Red , en la pestaña Mensajes , se muestra la solicitud:

   • channel_123?api_key=...

7. En la lista de solicitudes, seleccione la conexión WebSocket, como channel_123?api_key=....

   Se abrirá la barra lateral con pestañas.

8. Seleccione la pestaña Mensajes .

   Si no se registró para obtener un token de API, la pestaña Mensajes muestra el mensaje:

   • {"error":"Unknown api key"} con una flecha roja hacia abajo; enviado desde el servidor al explorador.

9. En la página web de Online Websocket Tester, en el cuadro de texto, cambie Hello PieSocket! a Hello world!, y luego haga clic en el botón Enviar .

   En la página web, la consola muestra el mensaje ¡Hola mundo! con un triángulo apuntando hacia arriba; enviado desde el explorador al servidor.

   En la herramienta Red , en la pestaña Mensajes , la tabla muestra los últimos 100 mensajes; En este caso, se agrega el mensaje:

   • ¡Hola mundo! con una flecha verde hacia arriba; enviado desde el explorador al servidor:

Nota: Para obtener mensajes rojos de flecha hacia abajo (repetidos desde el servidor), así como mensajes verdes de flecha arriba, debería:

1. Cree una cuenta en el sitio de PieSocket. Esto crea un token de API.

2. Cree un clúster en el sitio de PieSocket.

3. En la página del panel de control de PieSocket , haga clic en el botón Probar en línea .

   Se abrirá la página WebSocket Tester en línea , con sus parámetros de consulta.

4. Haz clic en el botón Conectar .

Para actualizar la tabla Solicitudes , en el panel Nombre , vuelva a hacer clic en el nombre de la conexión WebSocket.

La tabla Solicitudes contiene las tres columnas siguientes:

• Datos: La carga de mensajes. Si el mensaje es de texto sin formato, se muestra aquí. Para los códigos de operación binarios, esta columna muestra el nombre y el código del código de operación. Se admiten los siguientes códigos de operación:

  • Marco de continuación
  • Marco binario
  • Marco de cierre de conexión
  • Marco de ping
  • Marco de pong

• Longitud. La longitud de la carga del mensaje, en bytes.

• Tiempo. La hora en que se recibió o envió el mensaje.

Analizar eventos en una transmisión

Para ver los eventos que los servidores transmiten a través de la API Fetch, la API EventSource y XHR:

1. Vaya a una página web que transmita eventos, como la demostración de referencia de herramienta de red, en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   En la tabla Solicitudes de la herramienta Red, aparecen filas para:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. En la página web de demostración, haga clic en el botón eventos enviados por el servidor de Stream.

   En la tabla Solicitudes , se agrega una sse fila (evento enviado por el servidor).

6. Seleccione la solicitud (evento enviado por el sse servidor).

   Se abre la barra lateral, incluida una pestaña EventStream .

7. Seleccione la pestaña EventStream :

   

   Se recibe un nuevo mensaje de saludo, que se muestra una vez por segundo.

Para filtrar eventos, especifique una expresión regular en la barra de filtros en la parte superior de la pestaña EventStream .

Para borrar la lista de eventos capturados, haga clic en el botón Borrar ().

Vea también:

• Uso de la API Fetch
• Eventos enviados por el servidor : API EventSource.
• XMLHttpRequest - XHR.

Mostrar una vista previa del cuerpo de una respuesta

Para obtener una vista previa del contenido de un cuerpo de respuesta HTTP:

1. En la herramienta Red , En la tabla Solicitudes , en la columna Nombre , haga clic en el nombre de una solicitud.

2. En la barra lateral, seleccione la pestaña Vista previa :

   

La pestaña Vista previa es principalmente útil para ver imágenes.

Mostrar un cuerpo de respuesta

Para mostrar el cuerpo de la respuesta a una solicitud:

1. En la tabla Solicitudes , en la columna Nombre , haga clic en el nombre de la solicitud.

2. En la barra lateral, seleccione la pestaña Respuesta :

   

Mostrar encabezados HTTP

Para mostrar datos de encabezado HTTP sobre una solicitud:

1. En la tabla Solicitudes , haga clic en el nombre de la solicitud.

2. En la barra lateral, seleccione la pestaña Encabezados y, a continuación, desplácese hacia abajo a las distintas secciones:

   • General
   • Encabezados de sugerencias tempranas (opcional)
   • Encabezados de respuesta
   • Encabezados de solicitud

   

Ver origen del encabezado HTTP

De forma predeterminada, la pestaña Encabezados muestra los nombres de encabezado alfabéticamente. Para mostrar los nombres de encabezado HTTP en el orden en que se recibieron:

1. Vaya a una página web que use XHR, como Eliminando -ms-high-contrast y adoptando colores forzados basados en estándares en Microsoft Edge, en una nueva ventana o pestaña.

2. Acepte las cookies en el mensaje de banner, si aparece.

   En las regiones donde se aplica el Reglamento general de protección de datos (RGPD), este sitio muestra un banner de cookies y no enviará una collect solicitud (a continuación) a menos que acepte las cookies en el banner.

3. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

4. Seleccione la herramienta Red .

5. Actualice la página web.

   En la tabla Solicitudes , se enumeran muchas solicitudes.

6. Haz clic en el botón rojo Detener registro de red () en la parte superior.

7. En la tabla Solicitudes , haga clic en la columna Nombre para ordenar las solicitudes alfabéticamente y, a continuación, seleccione una solicitud por cobrar .

   Se abrirá la barra lateral con pestañas.

8. Seleccione la pestaña Encabezados :

   

9. Active la casilla Sin procesar situada junto a la sección Encabezados de respuesta o Encabezados de solicitud .

Vea también:

• Muestre los encabezados HTTP anteriores.

Advertencia de encabezados provisionales

A veces, la pestaña Encabezados muestra el mensaje de advertencia: Se muestran los encabezados provisionales. Esto puede deberse a los siguientes motivos:

• La solicitud no se envió a través de la red, sino que se entregó desde una memoria caché local, que no almacena los encabezados de solicitud originales.
• El recurso de red no es válido.
• Por razones de seguridad.

Supongamos que la solicitud no se envió a través de la red, sino que se entregó desde una memoria caché local, que no almacena los encabezados de solicitud originales. En este caso, puede activar la casilla Deshabilitar caché en la parte superior de la herramienta Red , para ver los encabezados de solicitud completos. Por ejemplo:

1. Vaya a la página de demostración Inspeccionar actividad de red .

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. Seleccione la herramienta Red .

4. Actualice la página web.

5. Seleccione la solicitud de red getstarted.js .

   La sección Encabezados de solicitud muestra el mensaje: Se muestran los encabezados provisionales. Deshabilite la caché para ver los encabezados completos.

   

6. Seleccione la casilla Deshabilitar caché en la parte superior de la herramienta Red .

7. Actualice la página web.

8. Seleccione la solicitud de red getstarted.js .

   La sección Encabezados de solicitud ya no muestra el mensaje; Se muestran los encabezados de solicitud completos.

Vea también:

• Emular a un visitante que visita por primera vez deshabilitando la caché del explorador, como se indica arriba.

Ver la carga de solicitud (cadena de consulta, parámetros y datos de formulario)

Para ver la carga útil de una solicitud HTTP (parámetros de cadena de consulta y datos de formulario), seleccione una solicitud de la tabla Solicitudes y, a continuación, seleccione la pestaña Carga útil en la barra lateral, como se indica a continuación:

1. Vaya a una página web, como la demostración de referencia de herramienta de red, en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   En la tabla Solicitudes de la herramienta Red, aparecen filas para:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js
   • favicon.png

5. En la página web de demostración, haga clic en el botón Enviar datos de formulario .

   En la tabla Solicitudes de la herramienta Red, se agrega una fila:

   • form-data-endpoint?hasfile=true

6. Seleccione la fila form-data-endpoint?hasfile=true.

   Se abre la barra lateral, incluida una pestaña Carga .

7. Seleccione la pestaña Carga útil .

   Se muestra la carga útil de la solicitud, incluida una sección de parámetros de cadena de consulta y una sección de datos de formulario :

En la pestaña Consola de DevTools está el error:

• POST https://microsoftedge.github.io/Demos/devtools-network-reference/form-data-endpoint?hasfile=true 405 (Method Not Allowed) (anonymous) @ script.js:49

Este error inofensivo de Método no permitido aparece en la Consola porque no hay ningún form-data-endpoint controlador POST en el servidor de demostración. El error es esperado, ya que github.io hospedaje no ejecuta servidores de aplicaciones, solo archivos estáticos.

Ver origen de carga

De forma predeterminada, la herramienta Red muestra la carga en un formato legible por humanos.

Para ver en su lugar los orígenes de los parámetros de cadena de consulta o datos de formulario:

1. Siga los pasos de la sección anterior.

   En la pestaña Carga útil, la sección Parámetros de cadena de consulta muestra la carga en un formato legible por humanos, para .hasfile La sección Datos de formulario muestra la carga en un formato legible para , para username, timestampy :file

   

2. Junto al encabezado de la sección Parámetros de cadena de consulta , haga clic en el botón Ver origen .

3. Junto al encabezado de la sección Datos del formulario , haga clic en el botón Ver fuente .

   Se muestra la información de origen de la carga útil:

   

Mostrar parámetros de cadena de consulta codificados en URL

Para mostrar los parámetros de cadena de consulta en un formato legible por humanos, pero conservando las codificaciones:

1. Vaya a una página web que use parámetros de cadena de consulta, como la demostración de referencia de herramienta Red, en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   La tabla Solicitudes enumera .html, .css, .jsy archivos .png .

5. En la página web de demostración, haga clic en el botón Enviar parámetros de consulta codificados .

   La tabla Solicitudes agrega una fila:

   encoded-query-params-endpoint?name=Danas+Barkus&url=https%3A%2F%2Fcontoso.com%2F%C3%A0%C3%A9%C3%A8%C3%B4%C3%A7%D0%BB

6. Seleccione la encoded-query-params-endpoint fila.

   Se abrirá la barra lateral con pestañas.

7. En la barra lateral, seleccione la pestaña Carga útil .

   La sección Parámetros de cadena de consulta muestra la dirección URL descodificada como: https://contoso.com/àéèôçл:

   

8. En la sección Parámetros de cadena de consulta, haga clic en el botón Ver URL codificado.

   La dirección URL ahora se muestra con caracteres codificados (como %3A y %2F); y la etiqueta del botón cambia a Ver descodificado:

   

9. Haz clic en el botón Ver descodificado .

   La dirección URL se muestra de nuevo con caracteres descodificados como: https://contoso.com/àéèôçлy la etiqueta del botón vuelve a cambiar a Ver URL codificada.

Mostrar cookies

Para mostrar las cookies enviadas en el encabezado HTTP de una solicitud:

1. En la tabla Solicitudes , haga clic en el nombre de la solicitud.

2. En la barra lateral, seleccione la pestaña Cookies :

   

Para obtener más información sobre cada una de las columnas, consulte Campos para ver, editar y eliminar cookies.

Para modificar las cookies, consulte Ver, editar y eliminar cookies.

Mostrar el desglose de tiempo de una solicitud

Para mostrar el desglose de tiempo de una solicitud:

1. En la tabla Solicitud, haga clic en el nombre de la solicitud.

2. En la barra lateral, seleccione la pestaña Intervalos .

   

Para obtener una forma más rápida de acceder a los datos, vea Vista previa de un desglose de intervalos.

Para obtener información sobre cada una de las fases que se pueden mostrar en el panel Intervalos , consulte Explicación de las fases de desglose de tiempos, a continuación.

Obtener una vista previa de un desglose de intervalos

Para mostrar una vista previa del desglose de intervalos de una solicitud, en la columna Cascada de la tabla Solicitudes , mantenga el puntero sobre la entrada de la solicitud.

La columna Cascada está desactivada de forma predeterminada. Para activar la columna Cascada , haga clic con el botón derecho en un encabezado de tabla Solicitudes y, a continuación, seleccione el elemento de menú Cascada normal que no tiene un submenú.

Para ver los datos sin pasar el ratón, consulte Mostrar el desglose de intervalos de una solicitud, más arriba.

Explicación de las fases de desglose del tiempo

Cada una de estas fases puede aparecer en la pestaña Intervalos :

• Colas. El explorador pone en cola las solicitudes cuando se cumple cualquiera de las siguientes condiciones

  • Hay solicitudes de prioridad más altas.
  • Ya hay seis conexiones TCP abiertas para este origen, que es el límite. Se aplica solo a HTTP/1.0 y HTTP/1.1.
  • El explorador está asignando espacio brevemente en la memoria caché del disco.

• Estancado. La solicitud podría detenerse por cualquiera de los motivos descritos en Puesta en cola.

• Inicio. Cuando un trabajo de servicio controla la solicitud, el inicio es el tiempo que tardó en iniciarse el trabajo de servicio.

• respondWith. Cuando un trabajo de servicio controla la solicitud, respondWith es el tiempo que tardó el trabajo de servicio en ejecutar la devolución de fetchEvent.respondWith() llamada.

• Búsqueda de DNS. El explorador está resolviendo la dirección IP de la solicitud.

• Conexión inicial. El explorador está estableciendo una conexión, incluidos protocolos de enlace y reintentos TCP, y negociando una capa de socket segura (SSL).

• Negociación de proxy. El explorador está negociando la solicitud con un servidor proxy.

• Solicitud enviada. La solicitud se está enviando.

• Preparación de ServiceWorker. El explorador está iniciando el trabajo de servicio.

• Solicitud a ServiceWorker. La solicitud se envía al trabajo de servicio.

• En espera (TTFB). El explorador está esperando el primer byte de una respuesta. TTFB son las siglas de Time To First Byte. Este tiempo incluye un recorrido de ida y vuelta de latencia y el tiempo que el servidor tardó en preparar la respuesta.

• Descarga de contenido. El explorador está recibiendo la respuesta.

• Recibir push. El explorador recibe datos para esta respuesta a través de la inserción del servidor HTTP/2.

• Reading Push. El explorador está leyendo los datos locales que se recibieron anteriormente.

Analizar el enrutamiento de una solicitud de trabajo de servicio

Para visualizar el enrutamiento de solicitudes, las escalas de tiempo muestran el evento de trabajo de Startup servicio y los respondWith eventos de captura. Puede depurar y visualizar una solicitud de red que pasó a través de un trabajo de servicio.

Para mostrar el desglose de tiempo de una solicitud de trabajo de servicio:

1. Vaya a una página que use un trabajo de servicio, como la página de demostración de pwamp , en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en la página y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. Seleccione la herramienta Red .

4. Vuelva a cargar la página.

5. En la lista de solicitudes, seleccione una solicitud de red que haya pasado por un archivo de trabajo de servicio. Por ejemplo, seleccione about.css.

   Aparece la barra lateral.

6. En la barra lateral, haga clic en la pestaña Intervalos :

   

   La sección Trabajo de servicio muestra información de tiempo sobre las fases Inicio y respondWith .

7. Haga clic en la flecha de expansión de la sección respondWith :

   

8. Dentro de la sección respondWith , haga clic en la flecha de expansión en la solicitud original:

   

9. Al recibir respuesta, haga clic en la flecha de expansión.

Mostrar iniciadores y dependencias

Para mostrar los iniciadores y las dependencias de una solicitud, mantenga presionada la tecla Mayús y mantenga el puntero sobre la solicitud en la tabla Solicitudes .

• Las solicitudes que iniciaron la solicitud al mantener el puntero se muestran en verde.
• Las dependencias de las solicitudes sobre las que se mantiene el puntero se muestran en rojo.

Cuando la tabla Solicitudes se ordena cronológicamente, si mantiene el puntero sobre una línea, la línea anterior muestra una solicitud verde. La solicitud verde es el iniciador de la dependencia. Si se muestra otra solicitud verde en la línea anterior, esa solicitud superior es el iniciador del iniciador. Y así sucesivamente.

Mostrar eventos de carga

DevTools muestra la temporización de los DOMContentLoaded eventos y load en varios lugares de la herramienta Red :

• En el panel de Vista general con líneas verticales.

• En la columna Cascada de la tabla Solicitud con líneas verticales. La columna Cascada está desactivada de forma predeterminada. Para activar la columna Cascada , haga clic con el botón derecho en un encabezado de tabla Solicitudes y, a continuación, seleccione el elemento de menú Cascada normal que no tiene un submenú.

• En el panel Resumen , en la parte inferior de la herramienta Red , con etiquetas de intervalos.

El DOMContentLoaded evento es de color azul y el load evento es rojo.

Mostrar el número total de solicitudes

El número total de solicitudes se muestra en el panel Resumen , en la parte inferior de la herramienta Red .

Precaución: Este número solo realiza un seguimiento de las solicitudes que se han registrado desde que se abrió DevTools. Si se produjeron otras solicitudes antes de abrir DevTools, esas solicitudes no se cuentan.

Mostrar el tamaño total de la descarga

El tamaño total de descarga de las solicitudes se muestra en el panel Resumen , en la parte inferior de la herramienta Red .

Precaución: Este número solo realiza un seguimiento de las solicitudes que se han registrado desde que se abrió DevTools. Si se produjeron otras solicitudes antes de abrir DevTools, las solicitudes anteriores no se cuentan.

Para comprobar el tamaño de los recursos después de que el explorador descomprima cada elemento, consulte Mostrar el tamaño sin comprimir de un recurso.

Mostrar el seguimiento de la pila que provocó una solicitud

Después de que una instrucción de JavaScript solicite un recurso, mueva el puntero sobre la columna Iniciador para mostrar el seguimiento de la pila que conduce a la solicitud.

Mostrar el tamaño sin comprimir de un recurso

Para ver el tamaño transferido y el tamaño sin comprimir de un recurso al mismo tiempo:

1. En la esquina superior derecha de la herramienta Red , haga clic en el icono Configuración de red (engranaje). Aparecerá una fila de casillas de verificación.

2. Active la casilla Filas de solicitud grandes .

3. Examine la columna Tamaño en la tabla Solicitud. El valor superior es el tamaño transferido y el valor inferior es el tamaño del recurso después de que el explorador lo descomprima:

   

Exportar datos de solicitudes

Puede exportar o copiar la lista de solicitudes, con filtros aplicados, de varias formas que se describen a continuación.

Guardar todas las solicitudes de red en un archivo HAR

HAR (HTTP Archivo) es un formato de archivo utilizado por varias herramientas de sesión HTTP para exportar los datos capturados. El formato es un objeto JSON con un conjunto particular de campos. Consulte Analizador HAR.

Para reducir las posibilidades de fugas accidentales de información confidencial, de forma predeterminada puede exportar el registro de red "saneado" en formato HAR que excluye información confidencial como Cookie, , Set-Cookiey Authorization encabezados. Si es necesario, también puede exportar el registro con datos confidenciales.

Para guardar todas las solicitudes de red en un archivo HAR, sin datos confidenciales:

1. Vaya a una página web, como la página de demostración Inspeccionar actividad de red , en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

5. Haga clic con el botón derecho en cualquier solicitud de la tabla Solicitudes y, a continuación, seleccione Copiar>todo como HAR (saneado):

   

   O bien, en la barra de acciones de la parte superior de la herramienta Red , haga clic en el botón Exportar HAR (saneado) ().

DevTools guarda todas las solicitudes que se han producido desde que abrió DevTools en el archivo HAR.

No se pueden filtrar solicitudes y no se puede guardar una sola solicitud.

Para guardar todas las solicitudes de red en un archivo HAR, incluidos los datos confidenciales:

1. En DevTools, seleccione Configuración personalizada y controle DevTools>.

   Se abre la páginaPreferenciasde configuración>.

2. Desplácese hacia abajo hasta la sección Red .

3. Active la casilla Permitir generar HAR con datos confidenciales.

4. Haga clic en el botón Cerrar ().

5. En la herramienta Red, haga clic con el botón derecho en cualquier solicitud de la tabla Solicitudes y, a continuación, seleccione Copiar>Copiar todo como HAR (con datos confidenciales).

   O bien, en la parte superior de la barra de acciones, haga clic en el botón Exportar HAR (saneado o con datos confidenciales) () y, a continuación, seleccione Exportar HAR (con datos confidenciales):

   

Importar un archivo HAR en DevTools para analizarlo

Después de tener un archivo HAR, puede importarlo de nuevo en DevTools para analizarlo mediante el analizador HAR.

Para importar un archivo HAR en DevTools para su análisis:

• En la barra de acciones en la parte superior de la herramienta Red , haga clic en el botón Importar archivo HAR ().

• O bien, arrastre el archivo HAR a la tabla Solicitudes .

La herramienta Red lee y muestra los iniciadores de las solicitudes que se importan desde el archivo HAR. Para los iniciadores, consulte Mostrar un registro de solicitudes, más arriba.

Copiar las solicitudes de red en el Portapapeles

En la columna Nombre de la tabla Solicitudes , haga clic con el botón derecho en una solicitud, mantenga el puntero sobre Copiar y seleccione una de las siguientes opciones.

Para copiar una sola solicitud, su respuesta o el seguimiento de su pila:

Para copiar todas las solicitudes:

Para copiar un conjunto filtrado de solicitudes, aplique un filtro al registro de red, haga clic con el botón derecho en una solicitud y seleccione:

Vea también:

• Filtrar solicitudes, arriba.

Copiar JSON de respuesta con formato en el portapapeles

Para copiar los datos JSON con formato de una respuesta JSON:

1. En la tabla Solicitudes , haga clic en el nombre de la solicitud que ha dado lugar a una respuesta JSON.

2. En la barra lateral, seleccione la pestaña Vista previa .

3. Haga clic con el botón derecho en la primera línea de la vista previa de la respuesta JSON con formato y, a continuación, seleccione Copiar valor.

   

   Ahora puede pegar el valor en cualquier editor.

Copiar los valores de las propiedades de las solicitudes de red en el Portapapeles

Para copiar los valores de las propiedades de las solicitudes de red en el Portapapeles:

1. En la tabla Solicitud, haga clic en el nombre de la solicitud.

2. En la barra lateral, seleccione la pestaña Carga útil :

3. Expanda una de las secciones siguientes.

   • Solicitar carga útil (JSON)
   • Datos de formulario
   • Parámetros de cadena de consulta
   • Encabezados de solicitud
   • Encabezados de respuesta

4. Haga clic con el botón derecho en un valor y seleccione Copiar valor. Ahora puede pegar el valor en cualquier editor.

Cambiar el diseño de la herramienta Red

Puede expandir o contraer secciones de la interfaz de usuario de la herramienta Red para centrar la información importante.

Ocultar el panel de filtros

De forma predeterminada, DevTools muestra el panel de filtros . Para ocultar el panel Filtros , seleccione Filtro ().

Usar filas de solicitud grandes

Use filas de solicitudes grandes cuando quiera más espacio en blanco en la tabla de solicitudes de red. Algunas columnas también proporcionan un poco más de información al usar filas grandes; Por ejemplo:

• El valor inferior de la columna Tamaño es el tamaño sin comprimir de una solicitud.

• La columna Prioridad (no se muestra de forma predeterminada) muestra la prioridad de captura inicial (valor inferior) y final (valor superior).

Para habilitar filas grandes:

1. Vaya a una página web, como la página de demostración Inspeccionar actividad de red , en una nueva ventana o pestaña.

2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   Las solicitudes se muestran en filas pequeñas.

5. En la herramienta Red , haga clic en el botón Configuración de red () y, a continuación, active la casilla Filas de solicitud grandes .

   Las solicitudes se muestran en filas grandes:

   

Ocultar el panel de información general

De forma predeterminada, DevTools muestra el panel Información general . Para ocultar el panel Información general , desactive la casilla Mostrar información general .

Vea también

• Inspeccionar la actividad de red : tutorial paso a paso e introducción a la herramienta Red .

Páginas web de demostración:

• Inspeccionar actividad de red
• Demostración de referencia de herramienta de red
• Aplicación TODO

Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.