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 ver un tutorial paso a paso e introducción a la herramienta Red , consulte Inspección de la actividad de red.

Contenido detallado:

• Registro de solicitudes de red
  • Detener la grabación de solicitudes de red
  • Borrar solicitudes
  • Guardar solicitudes entre cargas de página
  • Captura de pantalla de capturas de pantalla durante la carga de la página
  • Reproducir solicitud XHR
• Cambiar el comportamiento de carga
  • Emular un visitante por primera vez deshabilitando la caché del explorador
    • Deshabilitación de la caché del explorador desde la herramienta Condiciones de red
  • Borrar manualmente la memoria caché del explorador
  • Emular sin conexión
  • Emulación de conexiones de red lentas
    • Creación de un perfil de limitación personalizado
    • Limitación de conexiones webSocket
    • Emulación de conexiones de red lentas desde la herramienta Condiciones de red
  • Borrar manualmente las cookies del explorador
  • Invalidación de encabezados de respuesta HTTP
  • Invalidar el agente de usuario
• Establecimiento de sugerencias de cliente del agente de usuario
• Solicitudes de búsqueda
• Solicitudes de filtro
  • Filtrar solicitudes por propiedades
  • Filtrar solicitudes por tipo
  • Filtrar solicitudes por tiempo
  • 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
    • Adición de columnas personalizadas para encabezados de respuesta
  • Agrupar solicitudes por marcos insertados
  • Mostrar la relación de tiempo de las solicitudes
  • Análisis de los mensajes de una conexión WebSocket
  • Análisis de eventos en una secuencia
  • Mostrar una vista previa de un cuerpo de respuesta
  • Mostrar un cuerpo de respuesta
  • Mostrar encabezados HTTP
    • Ver el origen del encabezado HTTP
    • Advertencia de encabezados provisionales
  • Visualización de la carga de la solicitud (parámetros de cadena de consulta y datos de formulario)
    • Ver el origen de carga
    • Mostrar parámetros de cadena de consulta con codificación URL
  • Mostrar cookies
  • Mostrar el desglose de tiempo de una solicitud
    • Vista previa de un desglose de tiempo
    • Fases de desglose de tiempos explicadas
  • Mostrar iniciadores y dependencias
  • Mostrar eventos de carga
  • Mostrar el número total de solicitudes
  • Mostrar el tamaño total de descarga
  • Mostrar el seguimiento de pila que produjo 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
  • Copia de solicitudes de red en el Portapapeles
  • Copia de JSON de respuesta con formato en el Portapapeles
  • Copia de valores de propiedad de solicitudes de red al Portapapeles
• Cambiar el diseño de la herramienta Red
  • Ocultar el panel Filtros
  • Uso de filas de solicitudes grandes
  • Ocultar el panel 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. Haga clic con el botón derecho en la página web y, a continuación, seleccione 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 la grabación de solicitudes de red

Para detener la grabación de solicitudes:

1. En la herramienta Red , haga clic en Detener grabación del 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 entre cargas de página

Para guardar las solicitudes en las 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 de capturas de pantalla durante la carga de la página

Puede capturar capturas de pantalla para analizar lo que se muestra para los usuarios mientras espera a que se cargue la página.

Para habilitar capturas de pantalla:

1. Vaya a una página web, como la aplicación TODO, 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. En DevTools, abra la herramienta Red .

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

5. Active la casilla Capturar capturas de pantalla :

   

Para capturar 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.

   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ó esa captura de pantalla. En el panel Gráfico de información general se muestra una línea vertical amarilla.

   

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 acercar y ver la captura de pantalla.

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

Reproducir solicitud XHR

Para reproducir una solicitud XHR:

1. Vaya a una página web, como la demostración de referencia de herramientas 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. 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 XHR .

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

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

   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 lee Otros:

   

Para obtener información sobre los iniciadores, consulte:

• A continuación se muestran los iniciadores y las dependencias.
• Registre la actividad de red en Inspeccionar actividad de red.

Después de hacer clic en el botón Enviar una solicitud XHR de la demostración (lo que hace que JavaScript envíe una solicitud), aparece el elemento de menú Copiar seguimiento de pila en el > menú Copiar para solicitudes. Consulte Copia de solicitudes de red en el Portapapeles, a continuación.

Cambiar el comportamiento de carga

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

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

Casilla Deshabilitar caché :

Deshabilitación de 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 , active 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, haga clic con el botón derecho en cualquier lugar de la tabla Solicitudes y, a continuación, seleccione Borrar caché del explorador:

Vea también:

• Aplicación TODO

Emular sin conexión

Una clase de aplicaciones web, denominada Web Apps progresiva (PWA), puede funcionar sin conexión con la ayuda de los trabajadores del servicio. Es posible que le resulte útil simular rápidamente un dispositivo que no tiene conexión de datos al compilar este tipo de aplicación.

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

Menú desplegable Sin conexión :

Emulación de conexiones de red lentas

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

Puede elegir entre diferentes valores preestablecidos, como:

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

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

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

Creación de un perfil de limitación personalizado

Además de los valores 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 seleccione Inspeccionar.

   Se abre DevTools.

3. Seleccione la herramienta Red .

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

   O bien, seleccione Personalizar y controlarla limitaciónde configuración de>DevTools>.

   Se abre 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 .

   Los valores de ejemplo se muestran a continuación y se usan en la sección siguiente.

6. En el cuadro de texto Nombre de perfil , escriba 10 kbps.

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 (para 10 ms).

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

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

12. Active la casilla Reordenación de paquetes :

    

13. Haga clic en el botón Agregar.

    Se muestra el perfil de limitación personalizada:

    

14. En el panel Configuración , haga 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 personalizada, como 10 kbps:

    

    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 de limitación de red personalizado en Limitación.

Limitación de conexiones webSocket

Además de las solicitudes HTTP, DevTools puede limitar las conexiones WebSocket. Usaremos el perfil de limitación personalizada lenta 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 de la sección anterior, Crear un perfil de limitación personalizado.

2. Vaya a una página que use WebSockets, como Online WebSocket Tester, en una nueva ventana o pestaña.

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

   Si usa la página web Online WebSocket Tester , 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 "Conexión establecida - {"error":"Clave de api desconocida"}".

   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 seleccione Inspeccionar.

   Se abre DevTools.

5. En DevTools, en la herramienta Red , en el menú desplegable Limitación , seleccione Personalizado>10 kbps.

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

6. En la página web Del evaluador de WebSocket en línea , en el cuadro de texto del mensaje, elimine DevTools sin limitación y escriba DevTools con limitación.

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

   La consola de la página web del probador de 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 (que 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 (que 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 recibieron o enviaron 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 cookies del explorador.

Invalidación de encabezados de respuesta HTTP

Vea también:

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

Invalidar el agente de usuario

Para invalidar manualmente el agente de usuario:

1. En la herramienta Red, haga clic en el icono 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 el valor predeterminado del explorador . Los demás controles está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.

Establecimiento de sugerencias de cliente del agente de usuario

Si el sitio emplea sugerencias de cliente del 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 del 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 el explorador predeterminado y, a continuación, expanda Sugerencias de cliente del 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 Custom...y escriba información en el cuadro de texto Escriba un agente de usuario personalizado .

4. Para cualquiera de las opciones (predefinidas o personalizadas), especifique las sugerencias de cliente del agente de usuario como se indica a continuación:

   • Marca y versión como Edge y 92. Para agregar varios pares de marca/versión, haga clic en + Agregar marca.
   • Versión completa del explorador , como 92.0.1111.0.
   • Plataforma y versión como Windows 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 necesarios.

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 del agente de usuario en Detección de Microsoft Edge desde el sitio web.

Solicitudes de búsqueda

Para buscar en encabezados de solicitud, cargas 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).

   La pestaña Buscar se abre en el lado izquierdo de la herramienta Red .

2. En el cuadro de texto Buscar , escriba la cadena de consulta y 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 coincidió. La herramienta Red también abre la pestaña Encabezados o Respuesta y resalta la cadena que coincidió allí, si existe.

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 que puede buscar en DevTools, consulte Buscar archivos de origen para una página mediante la herramienta de búsqueda.

Solicitudes de filtro

Puede filtrar las solicitudes por propiedades, por tipo o por tiempo, y puede ocultar 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 indica cuántos filtros están seleccionados en la lista desplegable.

Filtrar solicitudes por propiedades

Use el cuadro de texto Filtrar para filtrar las 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 Filtros esté oculto; vea Ocultar el panel Filtros, a continuación.

El cuadro de texto Filtrar :

Para invertir el filtro, active la casilla Invertir situada junto al cuadro 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 tienen más de 1 kilobyte. Los filtros de varias propiedades son equivalentes a AND las operaciones. OR no se admiten las operaciones.

Lista completa de propiedades admitidas:

Propiedad	Detalles
cookie-domain	Mostrar los recursos que establecen un dominio de cookie específico.
cookie-name	Mostrar los recursos que establecen un nombre de cookie específico.
cookie-path	Mostrar los recursos que establecen una ruta de acceso de cookie específica.
cookie-value	Mostrar los recursos que establecen un valor de cookie específico.
domain	Solo muestra los recursos del dominio especificado. Puede usar un carácter comodín (*) para incluir varios dominios. Por ejemplo, *.com muestra los recursos de todos los nombres de dominio que terminan en .com. DevTools rellena el menú desplegable autocompletar con todos los dominios que se encuentran.
has-overrides	Mostrar solicitudes que han invalidado contenido, encabezados, invalidaciones (sí) o no invalidaciones (no). Puede agregar la columna Has overrides correspondiente a la tabla de solicitudes.
has-response-header	Muestra los recursos que contienen el encabezado de respuesta HTTP especificado. DevTools rellena el menú desplegable autocompletar con todos los encabezados de respuesta que se encuentran.
is	Use is:running para buscar WebSocket recursos.
larger-than	Muestra recursos que son mayores que el tamaño especificado, en bytes. Establecer un valor de 1000 es equivalente a establecer un valor de 1k.
method	Muestra los recursos recuperados a través de un tipo de método HTTP especificado. DevTools rellena el menú desplegable con todos los métodos HTTP que se encuentran.
mime-type	Muestra los recursos de un tipo MIME especificado. DevTools rellena el menú desplegable con todos los tipos MIME que se encuentran.
mixed-content	Mostrar todos los recursos de contenido mixto (mixed-content:all) o solo los que se muestran actualmente (mixed-content:displayed).
priority	Mostrar los recursos cuyo nivel de prioridad coincide con el valor especificado.
resource-type	Mostrar recursos de un tipo de recurso, por ejemplo, imagen. DevTools rellena la lista desplegable autocompletar con todos los tipos de recursos que ha encontrado.
response-header-set-cookie	Mostrar encabezados sin formato Set-Cookie en la pestaña Problemas . Las cookies con formato incorrecto con encabezados incorrectos Set-Cookie se marcarán en la herramienta Red .
scheme	Muestra los recursos recuperados a través de HTTP no protegido (scheme:http) o HTTPS protegido (scheme:https).
set-cookie-domain	Muestra los recursos que tienen un Set-Cookie encabezado con un Domain atributo que coincide con el valor especificado. DevTools rellena el autocompletar con todos los dominios de cookies que se encuentran.
set-cookie-name	Muestra los recursos que tienen un Set-Cookie encabezado con un nombre que coincide con el valor especificado. DevTools rellena el autocompletar con todos los nombres de cookies que se encuentran.
set-cookie-value	Muestra los recursos que tienen un Set-Cookie encabezado con un valor que coincide con el valor especificado. DevTools rellena el autocompletar con todos los valores de cookie que se encuentran.
status-code	Muestra los recursos que coinciden con el código de estado HTTP específico. DevTools rellena el menú desplegable autocompletar con todos los códigos de estado que se encuentran.
url	Mostrar los recursos que tienen una dirección URL que coincide con el valor especificado.

Filtrar solicitudes por tipo

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

Si los botones no aparecen, es posible que el panel 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 tiempo

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

Filtrar las solicitudes que estaban inactivas alrededor de 300 ms:

Ocultar direcciones URL de datos

Las direcciones URL de datos son archivos pequeños insertados en otros documentos. Cualquier solicitud que se muestra en la tabla Solicitudes que comienza por data: es una dirección 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 cree, puede filtrar las solicitudes irrelevantes enviadas por las extensiones que haya instalado en Microsoft Edge. Las solicitudes de extensión tienen direcciones URL que comienzan por chrome-extension://.

Para ocultar las solicitudes de extensión, en la barra de acciones Filtros , seleccione el menú desplegable Más filtros y, a continuación, seleccione Ocultar direcciones URL de extensión 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 fuera 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.

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

Por ejemplo:

1. En Microsoft Edge, seleccione Configuración y más>nueva ventana InPrivate.

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

3. Haga clic con el botón derecho en la página web y, a continuación, seleccione 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 aparecen 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 bloqueada.

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

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

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

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

   Se abre 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 lee, por ejemplo: "Este intento de establecer una cookie a través de un encabezado de 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 marcas o configuración de Edge. Mantenga el puntero sobre el icono para ver una información sobre herramientas con una pista y haga clic en ella 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 para que aparezca una marca de verificación. Para probar esto, puede usar la herramienta de bloqueo de solicitudes de red en el panel Vista rápida en la parte inferior de DevTools; vea 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. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   En la tabla Solicitudes se enumeran los .htmlarchivos , .css, .pngy .js .

5. En la lista desplegable Más filtros (con 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 Solicitudes bloqueadas.

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

   La tabla Requests está vacía, ya que 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 esté abierto en la parte inferior de DevTools.

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

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

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

10. En el cuadro de texto Patrón de texto para bloquear solicitudes coincidentes , escriba *.pngy, a continuación, 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, ya que todavía no se ha bloqueado activamente ninguna solicitud.

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 muestra .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 origen que difieren del origen de página, en la barra de acciones Filtros , seleccione Más filtros>solicitudes de terceros para 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 Requests se ordenan por hora de inicio, pero puede ordenar la tabla mediante otros criterios.

Ordenar por columna

Haga clic en el encabezado de cualquier columna de la columna 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 sin formato 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 Cascaday, a continuación, seleccione una de las siguientes opciones:

  • Hora de inicio : la primera solicitud iniciada 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 que ha finalizado se coloca en la parte superior.

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

  • Latencia : la solicitud que esperó el menor tiempo para obtener una respuesta se coloca en la parte superior.

En estas descripciones se supone que cada opción respectiva se clasifica entre la más corta y la más larga. Haga clic en el encabezado de la columna Cascada para invertir el orden.

A continuación se muestra cómo ordenar la cascada por duración total. La parte más ligera de cada barra es el tiempo de espera y la parte más oscura es el tiempo dedicado a descargar bytes:

Analizar solicitudes

Siempre que DevTools esté abierto, registra todas las solicitudes en la herramienta Red . Use la herramienta Red para analizar las solicitudes.

Mostrar un registro de solicitudes

Use la tabla Requests (Solicitudes ) para mostrar un registro de todas las solicitudes realizadas mientras DevTools está abierto. Para mostrar 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. Nombre de archivo del recurso o identificador del recurso.
• Estado. El código de estado HTTP.
• Escriba. Tipo MIME del recurso solicitado.
• Iniciador. Los siguientes objetos o procesos pueden iniciar solicitudes:
  • Analizador. Analizador HTML.
  • Redireccionamiento. Redireccionamiento HTTP.
  • Script. 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. Tamaño combinado de los encabezados de respuesta más el cuerpo de la respuesta, tal como lo entrega el servidor.
• Hora. La duración total, desde el inicio de la solicitud hasta la recepción del byte final en la respuesta.
• Cumplido por. Si la caché HTTP o el trabajador del servicio de la aplicación han cumplido 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 sin formato 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 mostradas actualmente tienen marcas de verificación junto a ellas.

Adición de columnas personalizadas para encabezados de respuesta

Para agregar una columna personalizada a la tabla Requests :

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 marcos 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 fácil de usar agrupando.

Para agrupar solicitudes por iframes:

1. Vaya a una página web, como la demostración de referencia de herramientas 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. 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 .

   Muchas filas se agregan en la tabla Solicitudes :

   

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

   En la tabla Solicitudes , se muestran los nombres de marco que se pueden expandir.

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

   Se muestran las solicitudes iniciadas por el marco insertado:

   

Mostrar la relación de tiempo 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 Waterfall 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 sin formato que no tiene un submenú.

Para ver las distintas formas en que puede ordenar la cascada, consulte Ordenar por fase de actividad anterior.

Columna Cascada del panel Solicitudes :

Análisis de 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. 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 .

   El botón Todos los filtros 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 online de Websocket Tester, haga clic en el botón Conectar .

   Si no ha configurado una cuenta ni un token de API, la página muestra lo siguiente:

   • Conexión establecida
   • {"error":"Clave de API desconocida"} 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 abre la barra lateral, con pestañas.

8. Seleccione la pestaña Mensajes .

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

   • {"error":"Clave de API desconocida"} con una flecha abajo roja; enviado desde el servidor al explorador.

9. En la página web 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 hacia arriba verde; enviado desde el explorador al servidor:

Nota: Para obtener mensajes de flecha abajo rojos (eco del servidor), así como mensajes de flecha arriba verdes, tendría que:

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 PieSocket , haga clic en el botón Probar en línea .

   Se abre la página Probador de WebSocket en línea , con los parámetros de consulta.

4. Haga 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 Requests contiene las tres columnas siguientes:

• Datos: Carga del mensaje. Si el mensaje es 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
  • Ping Frame
  • Marco de pong

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

• Hora. Hora en que se recibió o envió el mensaje.

Análisis de eventos en una secuencia

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

1. Vaya a una página web que transmita eventos, como la demostración de referencia de herramientas 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. 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 Stream eventos enviados por el servidor.

   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 "hello" y se muestra una vez por segundo.

Para filtrar eventos, especifique una expresión regular en la barra de filtros de 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 fetch API
• Eventos enviados por el servidor : EventSource API.
• XMLHttpRequest : XHR.

Mostrar una vista previa de un cuerpo de 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 los 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 desplácese hacia abajo hasta las distintas secciones:

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

   

Ver el 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 Quitar -ms-high-contrast y adoptar colores forzados basados en estándares en Microsoft Edge, en una nueva ventana o pestaña.

2. Acepte 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 cookies en el banner.

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

   Se abre DevTools.

4. Seleccione la herramienta Red .

5. Actualice la página web.

   En la tabla Solicitudes , se muestran muchas solicitudes.

6. Haga clic en el botón rojo Detener grabación de registro de red () situado 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 de recopilación .

   Se abre 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:

• Mostrar encabezados HTTP, arriba.

Advertencia de encabezados provisionales

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

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

Supongamos que la solicitud no se envió a través de la red, sino que se atendió desde una caché local, que no almacena los encabezados de solicitud originales. En este caso, puede seleccionar 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 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 encabezados provisionales. Deshabilite la memoria caché para ver los encabezados completos.

   

6. Active 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 por primera vez deshabilitando la caché del explorador, anteriormente.

Visualización de la carga de la solicitud (parámetros de cadena de consulta y datos de formulario)

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

1. Vaya a una página web, como la demostración de referencia de herramientas 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. 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 del 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.

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

En la pestaña Consola de DevTools se muestra 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 de método no permitido inofensivo aparece en la consola, porque no hay ningún form-data-endpoint controlador POST en el servidor de demostración. Se espera el error, ya que github.io hospedaje no ejecuta servidores de aplicaciones, solo archivos estáticos.

Ver el origen de carga

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

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

1. Siga los pasos descritos en la sección anterior, anteriormente.

   En la pestaña Carga , la sección Parámetros de cadena de consulta muestra la carga en un formato legible para hasfile. La sección Datos del formulario muestra la carga en un formulario legible 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 origen .

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

   

Mostrar parámetros de cadena de consulta con codificación URL

Para mostrar los parámetros de cadena de consulta en un formato legible, pero con codificaciones conservadas:

1. Vaya a una página web que use parámetros de cadena de consulta, como la demostración de referencia de herramientas 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. En DevTools, seleccione la herramienta Red .

4. Actualice la página web.

   En la tabla Solicitudes se enumeran los .htmlarchivos , .css, .jsy .png .

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

   La tabla Requests 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 abre 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 codificación URL .

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

   

9. Haga 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 la dirección 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, vea Campos en Ver, editar y eliminar cookies.

Para modificar las cookies, consulte Visualización, edición y eliminación de 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 Temporización .

   

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

Para obtener más información sobre cada una de las fases que se pueden mostrar en el panel De tiempo , vea Fases de desglose de tiempos explicadas.

Vista previa de un desglose de tiempo

Para mostrar una vista previa del desglose de tiempo 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 sin formato que no tiene un submenú.

Para ver los datos sin mantener el puntero, vea la parte superior de la sección presente , Mostrar el desglose de tiempo de una solicitud.

Fases de desglose de tiempos explicadas

Cada una de estas fases puede aparecer en la pestaña Temporización :

• Puesta en cola. Las colas del explorador solicitan cuando se cumple alguna de las siguientes condiciones

  • Hay solicitudes de mayor prioridad.
  • Ya hay seis conexiones TCP abiertas para este origen, que es el límite. Solo se aplica a HTTP/1.0 y HTTP/1.1.
  • El explorador asigna brevemente espacio en la memoria caché del disco.

• Estancado. La solicitud se podría detener por cualquiera de los motivos descritos en Queueing.

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

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

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

• Solicitud enviada. Se está enviando la solicitud.

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

• Solicitud a ServiceWorker. La solicitud se envía al trabajador del servicio.

• Esperando (TTFB). El explorador espera el primer byte de una respuesta. TTFB significa Tiempo para el primer 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 recibe la respuesta.

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

• Lectura push. El explorador lee los datos locales que se recibieron anteriormente.

Mostrar iniciadores y dependencias

Para mostrar los iniciadores y 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 con el puntero se muestran en verde.
• Las dependencias de las solicitudes con el puntero se muestran en rojo.

Cuando la tabla Requests 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 el tiempo de los DOMContentLoaded eventos y load en varios lugares de la herramienta Red :

• En el panel Información 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 sin formato que no tiene un submenú.

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

El DOMContentLoaded evento está coloreado en 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 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, no se cuentan las solicitudes anteriores.

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

Mostrar el seguimiento de pila que produjo una solicitud

Después de que una instrucción de JavaScript solicite un recurso, mantenga el puntero sobre la columna Iniciador para mostrar el seguimiento de 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). Aparece una fila de casillas.

2. Active la casilla Filas de solicitud grande .

3. Examine la columna Tamaño de 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 maneras 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 determinado de campos. Consulte Analizador de HAR.

Para reducir las posibilidades de pérdidas accidentales de información confidencial, de forma predeterminada puede exportar el registro de red "desinfectado" 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. Haga clic con el botón derecho en la página web y, a continuación, seleccione 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 (desinfectado):

   

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

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

No se pueden filtrar las 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 Personalizar y controlarLa configuraciónde DevTools>.

   Se abrela página Preferenciasde 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>todo como HAR (con datos confidenciales).

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

   

Importación de un archivo HAR en DevTools para su análisis

Después de tener un archivo HAR, puede volver a importarlo en DevTools para su análisis mediante el analizador HAR.

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

• En la barra de acciones de 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, anteriormente.

Copia de 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 única solicitud, su respuesta o su seguimiento de pila:

Nombre	Detalles
Copiar dirección URL	Copie la dirección URL de la solicitud en el Portapapeles.
Copiar como cURL (cmd)	Copie la solicitud como un comando cURL.
Copiar como cURL (bash)
Copiar como PowerShell	Copie la solicitud como un comando de PowerShell.
Copiar como captura	Copie la solicitud como una llamada de captura.
Copiar como captura (Node.js)	Copie la solicitud como una llamada de captura de Node.js.
Copia de la respuesta	Copie el cuerpo de la respuesta en el Portapapeles.
Copia del seguimiento de la pila	Copie el seguimiento de pila de la solicitud en el Portapapeles. Este elemento de menú solo aparece para las solicitudes desencadenadas por código JavaScript, como las solicitudes Fetch o XHR. Consulte La solicitud XHR de reproducción, anteriormente.

Para copiar todas las solicitudes:

Nombre	Detalles
Copia de todas las direcciones URL	Copie las direcciones URL de todas las solicitudes en el Portapapeles.
Copiar todo como cURL (cmd)	Copie todas las solicitudes como una cadena de comandos cURL.
Copiar todo como cURL (bash)
Copiar todo como PowerShell	Copie todas las solicitudes como una cadena de comandos de PowerShell.
Copiar todo como captura	Copie todas las solicitudes como una cadena de llamadas de captura.
Copiar todo como captura (Node.js)	Copie todas las solicitudes como una cadena de llamadas de captura de Node.js.
Copiar todo como HAR (desinfectado)	Copie todas las solicitudes como datos HAR sin datos confidenciales como Cookie, Set-Cookiey Authorization encabezados.
Copiar todo como HAR (con datos confidenciales)	Copie todas las solicitudes como datos HAR con datos confidenciales. El comando aparece si activa la casilla Personalizar y controlarLas preferenciasde configuración>de DevTools> página >Red sección >Permitir generar HAR con datos confidenciales.

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, a continuación, seleccione:

Nombre	Detalles
Copia de todas las direcciones URL enumeradas	Copie las direcciones URL de todas las solicitudes filtradas en el Portapapeles.
Copiar todo como cURL (cmd)	Copie todas las solicitudes filtradas como una cadena de comandos cURL.
Copiar todo como cURL (bash)	Copie todas las solicitudes filtradas como una cadena de comandos cURL.
Copia de todo lo que aparece como PowerShell	Copie todas las solicitudes filtradas como una cadena de comandos de PowerShell.
Copia de todo lo que aparece como captura	Copie todas las solicitudes filtradas como una cadena de llamadas de captura.
Copiar todo lo que aparece como captura (Node.js)	Copie todas las solicitudes filtradas como una cadena de llamadas de captura de Node.js.
Copie todo lo que aparece como HAR (desinfectado)	Copie todas las solicitudes filtradas como datos HAR sin datos confidenciales como Cookie, Set-Cookiey Authorization encabezados.
Copie todo lo que aparece como HAR (con datos confidenciales)	Copie todas las solicitudes filtradas como datos HAR con datos confidenciales. El comando aparece si activa la casilla Personalizar y controlarLas preferenciasde configuración>de DevTools> página >Red sección >Permitir generar HAR con datos confidenciales.

Vea también:

• Solicitudes de filtro, anteriormente.

Copia de 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 condujo 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.

Copia de valores de propiedad de solicitudes de red al Portapapeles

Para copiar los valores de propiedad de las solicitudes de red al Portapapeles:

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

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

3. Expanda una de las secciones siguientes.

   • Carga de solicitud (JSON)
   • Datos del 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, a continuación, 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 de red para centrar información importante.

Ocultar el panel Filtros

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

Uso de filas de solicitudes grandes

Use filas de solicitudes grandes cuando desee más espacios 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. Haga clic con el botón derecho en la página web y, a continuación, seleccione 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, seleccione la casilla Filas de solicitud grande .

   Las solicitudes se muestran en filas grandes:

   

Ocultar el panel 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 la actividad de red
• Demostración de referencia de herramientas de red
• Aplicación TODO

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques.

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