Referencia de análisis de red

Descubra nuevas formas de analizar cómo se carga su página en esta referencia completa de las características de análisis de red de Microsoft Edge DevTools.

Registrar solicitudes de red

De forma predeterminada, DevTools graba todas las solicitudes de red en el panel red , siempre y cuando DevTools esté abierto.

Panel red

Detener la grabación de solicitudes de red

Siga los pasos que se indican a continuación para detener la grabación de solicitudes.

  1. En el panel red , seleccione Detener grabación del registro de red \ (  detener la grabación del registro de red ). Se vuelve gris para indicar que DevTools ya no graba solicitudes.
  2. Seleccione Control + E \ (Windows, Linux ) o Command + E \ (MacOS ) mientras el panel red está en el foco.

Borrar solicitudes

Elija Borrar \ (  Borrar ) en el panel red para borrar todas las solicitudes de la tabla solicitudes.

Botón borrar

Guardar solicitudes en la carga de páginas

Para guardar las solicitudes en la carga de la página, en el panel red , active la casilla conservar registro . DevTools guarda todas las solicitudes hasta que Deshabilites conservar registro.

Casilla de verificación conservar registro

Capturar capturas de pantallas durante la carga de la página

Capture las capturas de pantallas para analizar qué se muestra para los usuarios mientras esperan la página que desea cargar.

Para habilitar las capturas de pantalla, elija configuración de redy, en el panel red , active la casilla capturar capturas de pantalla.

Actualice la página mientras el panel red está enfocado para capturar capturas de pantalla.

Después de capturar una captura de pantalla, puede interactuar con ella de las siguientes maneras.

  • Desplace el puntero sobre una captura de pantalla para mostrar el punto en el que se capturó la captura de pantalla. Se muestra una línea amarilla en el panel de información general .
  • Elija la miniatura de una pantalla para filtrar las solicitudes que se produjeron después de que se capturó la captura de pantalla.
  • Haga doble clic en una miniatura para acercarla.

Desplazar el puntero sobre una captura de pantalla

Cambiar el comportamiento de carga

Emular a un primer visitante mediante la deshabilitación de la memoria caché del explorador

Para emular la experiencia de un usuario por primera vez en su sitio, active la casilla deshabilitar caché . DevTools deshabilita la caché del explorador. Esta característica emula con más precisión la experiencia de un usuario por primera vez, ya que las solicitudes se proporcionan desde la memoria caché del explorador al repetir visitas.

Casilla deshabilitar caché

Deshabilitar la memoria caché del explorador en el cajón de condiciones de red

Si desea deshabilitar la caché mientras trabaja en otros paneles de DevTools, use el cajón de condiciones de redes.

  1. Abra el cajón de condiciones de redes .
  2. Activa \ (o desactivada) la casilla deshabilitar caché .

Borrar manualmente la memoria caché del explorador

Para borrar manualmente la memoria caché del explorador en cualquier momento, abra el menú contextual \ (haga clic con el botón secundario del mouse ) en cualquier lugar de la tabla solicitudes y seleccione Borrar caché del explorador.

Elija Borrar caché del explorador

Emular sin conexión

Una nueva clase de aplicaciones Web, denominada aplicaciones web progresivas, funciona sin conexión con la ayuda de los trabajadores de servicio. Es posible que le resulte útil simular rápidamente un dispositivo que no tiene conexión de datos cuando está creando este tipo de aplicación.

Elija el menú desplegable en línea , buscar en preestablecidosy elija sin conexión para simular una experiencia de red sin conexión.

Menú desplegable desconectado

Emular conexiones de red lentas

Emular 3G lento, 3G rápido y otras velocidades de conexión en el menú desplegable en línea .

El menú desplegable limitación de peticiones

Puedes elegir entre diferentes ajustes preestablecidos, como 3G lento o 3G rápido. Para agregar sus propios ajustes preestablecidos personalizados, abra el menú de limitación y **** elija > Agregarpersonalizado.

DevTools muestra un icono de advertencia junto a la pestaña red para recordarle que la limitación está habilitada.

Emular conexiones de red lentas del cajón de condiciones de red

Si desea limitar la conexión de red mientras trabaja en otros paneles de DevTools, use el cajón de condiciones de redes.

  1. Abra el cajón de condiciones de redes .
  2. Elija la velocidad de conexión en el menú limitación .

Borrar manualmente las cookies del explorador

Para borrar manualmente las cookies del explorador en cualquier momento, mantenga el mouse en cualquier lugar de la tabla solicitudes, abra el menú contextual \ (haga clic con el botón derecho ) y seleccione Borrar cookies del explorador.

Elija Borrar cookies del explorador

Invalidar el agente de usuario

Para anular manualmente el agente de usuario, siga estos pasos.

  1. Abra el cajón de condiciones de redes .
  2. Desactive la casilla seleccionar automáticamente .
  3. Elija una opción de agente de usuario en el menú o escriba una personalizada en el cuadro de texto.

Filtrar solicitudes

Filtrar las 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.
Para obtener más información, vaya a ocultar el panel de filtros.

El cuadro de texto filtro

Puede usar varias propiedades simultáneamente al separar cada propiedad con un espacio. Por ejemplo, mime-type:image/png larger-than:1K se muestran todos los PNGs que tengan más de 1 kilobyte. Los filtros de varias propiedades son equivalentes a AND las operaciones. OR Actualmente no se admiten las operaciones.

La lista completa de propiedades compatibles.

Propiedad Detalles
domain Mostrar solo 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 rellenar el menú desplegable de autocompletar con todos los dominios que se encuentran.
has-response-header Muestra los recursos que contienen el encabezado de respuesta HTTP especificado. DevTools rellenar la lista desplegable de autocompletar con todos los encabezados de respuesta que se encuentran.
is Usar is:running para buscar WebSocket recursos.
larger-than Muestra los 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 que se recuperaron en un tipo de método HTTP especificado. DevTools rellenar la lista desplegable con todos los métodos HTTP que se encuentran.
mime-type Muestra los recursos de un tipo MIME especificado. DevTools rellenar la lista 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 ).
scheme Muestra los recursos recuperados en HTTP \ ( scheme:http ) no protegidos o en https \ ( 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 rellenar 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 rellenar autocompletar con todos los nombres de cookies que se encuentren.
set-cookie-value Muestra los recursos que tienen un Set-Cookie encabezado con un valor que coincide con el valor especificado. DevTools rellenar autocompletar con todos los valores de las cookies que se encuentran.
status-code Muestra los recursos que coinciden con el código de Estado HTTP específico. DevTools rellena el menú desplegable de autocompletar con todos los códigos de estado que se encuentran.

Filtrar solicitudes por tipo

Para filtrar las solicitudes por tipo de solicitud, elija uno de los siguientes botones en el panel red .

XHR

 

JS

 

CSS

 

IMG

 

Multimedia

 

Fuente

 

Dividir

 

EB

WebSocket.

Manifiesta

 

Otros

Cualquier otro tipo no incluido en la lista.

Si los botones no se muestran, es posible que el panel filtros esté oculto.
Para obtener más información, vaya a ocultar el panel de filtros.

Para habilitar varios filtros de tipo simultáneamente, mantenga Control \ (Windows, Linux ) o Command \ (MacOS ) y, a continuación, elija.

Usar los filtros de tipo para mostrar los recursos JS, CSS y Document

Filtrar solicitudes por tiempo

Elige y arrastra a la izquierda o a la derecha en el panel de Descripción 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 la hora resaltada.

Filtrar las solicitudes que hayan estado inactivas aproximadamente 300 ms

Ocultar direcciones URL de datos

Las direcciones URL de datos son pequeños archivos incrustados en otros documentos. Cualquier solicitud que se muestre en la tabla solicitudes que comienza por data: es una dirección URL de datos.

Para ocultar las solicitudes, desactive la casilla ocultar URL de datos .

La casilla ocultar direcciones URL de datos

Ordenar solicitudes

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

Ordenar por columna

Elija el encabezado de cualquier columna en las solicitudes de ordenación de solicitudes de esa columna.

Ordenar por fase de actividad

Para cambiar la forma en que la cascada ordena las solicitudes, desplace el puntero sobre el encabezado de la tabla solicitudes, abra el menú contextual \ (haga clic con el botón derecho ), desplace el puntero en cascaday elija una de las siguientes opciones.

Hora de inicio

La primera solicitud iniciada se encuentra en la parte superior.

Tiempo de respuesta

La primera solicitud que comenzó a descargarse está en la parte superior.

Hora de finalización

La primera solicitud que ha finalizado se encuentra en la parte superior.

Duración total

La solicitud con la configuración de conexión más corta, solicitud o respuesta, se encuentra en la parte superior.

Latencia

La solicitud que esperó el tiempo más breve para una respuesta está en la parte superior.

En estas descripciones se supone que cada opción respectiva está clasificada de menor a mayor. Elija el encabezado de la columna cascada para invertir el orden.

Ordenar la cascada por duración total

Analizar solicitudes

Siempre que DevTools estén abiertos, registra todas las solicitudes en el panel red .
Use el panel red para analizar las solicitudes.

Mostrar un registro de solicitudes

Use la tabla solicitudes para mostrar un registro de todas las solicitudes realizadas mientras DevTools abierto. Para obtener más información sobre cada elemento, elige o mantiene el mouse en las solicitudes.

La tabla solicitudes

De forma predeterminada, en la tabla solicitudes se muestran las siguientes columnas.

Nombre

El nombre de archivo de un recurso o un identificador de él.

Estado

El código de Estado HTTP.

Tipo

Tipo MIME del recurso solicitado.

Inició

Los siguientes objetos o procesos inician solicitudes.

  • Analizador El analizador HTML para Microsoft Edge.
  • Redirigir Una redirección de HTTP.
  • Script Una función de JavaScript.
  • Otros Otro proceso o acción, como navegar a una página con 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 y como lo proporciona el servidor.

Tiempo

La duración total, desde el inicio de la solicitud hasta la recepción del byte final en la respuesta.

Un desglose visual de la actividad de cada solicitud.

Agregar o quitar columnas

Desplace el puntero en el encabezado de la tabla solicitudes, abra el menú contextual \ (haga clic con el botón derecho ) y elija una opción para ocultarlo o mostrarlo. Las opciones mostradas actualmente tienen marcas de verificación junto a cada elemento.

Agregar una columna a la tabla solicitudes

Agregar columnas personalizadas

Para agregar una columna personalizada a la tabla solicitudes, desplace el puntero sobre el encabezado de la tabla solicitudes, abra el menú contextual \ (haga clic con el botón derecho ) y elija encabezados de respuestapara > administrar columnas de encabezado.

Agregar una columna personalizada a la tabla solicitudes

Mostrar la relación de sincronización de las solicitudes

Use la cascada para mostrar las relaciones de temporización de las solicitudes.
La organización predeterminada de la cascada usa la hora de inicio de las solicitudes.
Por lo tanto, las solicitudes que se encuentren más lejanas a la izquierda iniciadas antes que las solicitudes más lejanas a la derecha.

Para revisar las diferentes maneras en las que puede ordenar la cascada, vaya a ordenar por fase de actividad.

La columna cascada del panel solicitudes

Mostrar una vista previa del cuerpo de una respuesta

Para mostrar una vista previa del cuerpo de una respuesta, siga estos pasos.

  1. Elija la dirección URL de la solicitud en la columna nombre de la tabla solicitudes.
  2. Elija la pestaña vista previa .

La ficha vista previa es principalmente útil para mostrar imágenes.

La ficha vista previa

Mostrar cuerpo de respuesta

Para mostrar el cuerpo de la respuesta a una solicitud, siga estos pasos.

  1. Elija la dirección URL de la solicitud en la columna nombre de la tabla solicitudes.
  2. Elija la pestaña respuesta .

La ficha respuesta

Mostrar encabezados HTTP

Para mostrar los datos del encabezado HTTP sobre una solicitud, siga estos pasos.

  1. Elija la dirección URL de la solicitud en la columna nombre de la tabla solicitudes.
  2. Elija la pestaña encabezados .

La pestaña encabezados

Mostrar el origen del encabezado HTTP

De forma predeterminada, la pestaña encabezados muestra los nombres de encabezado alfabéticamente. Para deshabilitada los nombres de encabezado HTTP en el orden recibido, siga estos pasos.

  1. Abre la pestaña encabezados para la solicitud que te interese. Para obtener más información, vaya a Mostrar encabezados HTTP.
  2. Elija Ver origen, junto a la sección solicitar encabezado o respuesta de encabezado .

Mostrar parámetros de cadena de consulta

Para mostrar los parámetros de cadena de consulta de una dirección URL en un formato legible, siga estos pasos.

  1. Abre la pestaña encabezados para la solicitud que te interese. Para obtener más información, vaya a Mostrar encabezados HTTP.
  2. Vaya a la sección parámetros de cadena de consulta .

Sección parámetros de cadena de consulta

Mostrar parámetros de cadena de consulta origen

Para mostrar el origen de parámetro de cadena de consulta de una solicitud, realice los siguientes pasos.

  1. Vaya a la sección parámetros de cadena de consulta. Para obtener más información, vaya a Mostrar parámetros de cadena de consulta.
  2. Elija Ver origen.

Mostrar parámetros de cadena de consulta codificados por URL

Para mostrar parámetros de cadena de consulta en un formato legible, pero con las codificaciones conservadas, siga estos pasos.

  1. Vaya a la sección parámetros de cadena de consulta. Para obtener más información, vaya a Mostrar parámetros de cadena de consulta.
  2. Elija Ver dirección URL codificada.

Mostrar cookies

Para mostrar las cookies enviadas en el encabezado HTTP de una solicitud, siga estos pasos.

  1. Elija la dirección URL de la solicitud en la columna nombre de la tabla solicitudes.
  2. Elija la pestaña cookies .

La ficha cookies

Mostrar el desglose de intervalos de una solicitud

Para mostrar el desglose de intervalos de una solicitud, siga estos pasos.

  1. Elija la dirección URL de la solicitud en la columna nombre de la tabla solicitudes.
  2. Elija la pestaña intervalos .

Para obtener acceso a los datos de una manera más rápida, navegue para obtener una vista previa de un desglose por intervalos.

Para obtener más información acerca de cada una de las fases que se pueden mostrar en la pestaña intervalos , vaya a fases de desglose por intervalos explicadas.

La ficha intervalos

Más información sobre cada una de las fases.

Para obtener más información sobre cómo obtener acceso a la pantalla, vaya a Mostrar desglose de intervalos.

Obtener una vista previa de intervalos

Para mostrar una vista previa del desglose de intervalos de una solicitud, en la columna cascada de la tabla solicitudes, desplace el puntero sobre la entrada de la solicitud.

Para obtener más información sobre cómo obtener acceso a los datos sin mantener el mouse, navegue para Mostrar el desglose de intervalos de una solicitud.

> obtener una vista previa del desglose de intervalos de una solicitud

Explicación de fases de desglose de intervalos

Más información sobre cada una de las fases que pueden mostrarse en la pestaña intervalos .

Poner en cola

El explorador pone en cola las solicitudes cuando cualquiera de las siguientes condiciones es verdadera.

  • Hay solicitudes de prioridad más alta.
  • Hay seis conexiones TCP abiertas para el mismo origen, que es el límite. Solo se aplica a HTTP/1.0 y HTTP/1.1.
  • El explorador está asignando un poco de espacio en la caché de disco.

Paralizado

La solicitud se detiene por cualquiera de las razones descritas en puesta en cola.

Búsqueda de DNS

El explorador está resolviendo la dirección IP de la solicitud.

Conexión inicial

El explorador establece una conexión que incluye los protocolos de enlace TCP, los reintentos de TCP y negocia una capa de sockets seguros.

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 del servicio.

Solicitud para ServiceWorker

La solicitud se está enviando al trabajador del servicio.

Esperando \ (TTFB )

El explorador está esperando el primer byte de una respuesta. TTFB es el primer byte. Este intervalo incluye un recorrido de ida y vuelta de la latencia y el tiempo que el servidor tomó para preparar la respuesta.

Descarga de contenido

El explorador está recibiendo la respuesta.

Recepción de envío

El explorador está recibiendo datos de esta respuesta a través de la inserción de servidor HTTP/2.

Insertar inserción

El explorador está leyendo los datos locales recibidos anteriormente.

Mostrar iniciadores y dependencias

Para mostrar los iniciadores y las dependencias de una solicitud, mantenga presionado el Shift puntero en la solicitud de la tabla solicitudes. Colores de DevTools: los iniciadores se muestran en verde y las dependencias en rojo.

Mostrar los iniciadores y las dependencias de una solicitud

Cuando la tabla solicitudes está ordenada cronológicamente, si coloca 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 antes de ella, esa solicitud superior es el iniciador del iniciador. Etcétera.

Mostrar eventos de carga

DevTools muestra la temporización de los DOMContentLoaded load eventos y en varios lugares del panel red . El DOMContentLoaded evento está coloreado en azul y el load evento es rojo.

Las ubicaciones de la DOMContentLoaded y cargar eventos en el panel red

Mostrar el número total de solicitudes

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

Precaución

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

El número total de solicitudes desde que DevTools se abrieron

Mostrar el tamaño total de descarga

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

Precaución

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

El tamaño total de las solicitudes de descarga

Para comprobar cómo los recursos grandes están después de que el explorador descomprime cada elemento, navegue para Mostrar el tamaño descomprimido de un recurso.

Mostrar el seguimiento de la pila que causó una solicitud

Después de que una instrucción de JavaScript solicite un recurso, sitúe el puntero en la columna del iniciador para mostrar el seguimiento de la pila que se dirige a la solicitud.

El seguimiento de la pila que lleva a una solicitud de recursos

Mostrar el tamaño descomprimido de un recurso

Active la casilla usar filas de solicitud grandes y, a continuación, revise el valor inferior de la columna tamaño .

Ejemplo de recursos sin comprimir

Exportar datos de solicitudes

Guardar todas las solicitudes de red en un archivo HAR

Para guardar todas las solicitudes de red en un archivo HAR, siga los pasos que se indican a continuación.

  1. Mantenga el mouse sobre cualquier solicitud de la tabla solicitudes y abra el menú contextual \ (haga clic con el botón derecho ).
  2. Elija Guardar como Har with Content. DevTools guarda todas las solicitudes que se han producido desde que abrió DevTools en el archivo HAR. No puedes filtrar solicitudes. Tampoco puedes guardar una sola solicitud.

Una vez que haya guardado un archivo HAR, podrá volver a importarlo en DevTools para analizarlo. Simplemente arrastre y coloque el archivo HAR en la tabla solicitudes.

Elija Guardar como HAR with Content

Copiar una o más solicitudes en el portapapeles

En la columna nombre de la tabla solicitudes, desplace el puntero sobre una solicitud y abra el menú contextual \ (haga clic con el botón derecho ), mantenga el puntero sobre copiary elija una de las opciones siguientes.

Nombre Detalles
Copiar dirección del vínculo Copie la dirección URL de la solicitud en el portapapeles.
Copiar respuesta Copie el cuerpo de la respuesta en el portapapeles.
Copiar como fetch  
Copiar como rizo Copie la solicitud como un comando de rizo.
Copiar todo como fetch  
Copiar todo como rizo Copiar todas las solicitudes como una cadena de comandos de rizo.
Copiar todo como HAR Copie todas las solicitudes como datos de HAR.

Elija copiar respuesta

Copiar JSON de respuesta con formato en el portapapeles

Elija una solicitud de red y navegue hasta el panel encabezados . Para copiar el valor JSON de una respuesta, navegue a solicitar carga, desplace el puntero sobre el contenido de la respuesta JSON, abra el menú contextual \ (haga clic con el botón secundario del mouse ) y seleccione Copiar valor.

Copiar valores de propiedades de solicitudes de red en el portapapeles

Para copiar los valores de propiedad de las solicitudes de red en el portapapeles, complete las siguientes acciones.

  1. Abra el panel encabezados .
  2. Abra una de las siguientes secciones de encabezado.
    • Solicitar carga \ (JSON )
    • Datos de formulario
    • Parámetros de cadena de consulta
    • Solicitar encabezados
    • Encabezados de respuesta
  3. Abra el menú contextual \ (haga clic con el botón derecho ) > Copiar valor. Ahora puede pegar el valor en cualquier editor para revisarlo.

Cambiar el diseño del panel red

Puede expandir o contraer secciones de la interfaz de usuario del panel red para destacar información importante.

Ocultar el panel de filtros

De forma predeterminada, DevTools muestra el panel filtros .
Elija filtro \ (  filtro ) para ocultarlo.

El botón ocultar filtros

Usar filas de solicitudes grandes

Use filas grandes cuando desee más espacios en blanco en la tabla solicitudes de red. Algunas columnas también proporcionan un poco más de información cuando se usan filas grandes. Por ejemplo, el valor inferior de la columna tamaño es el tamaño descomprimido de una solicitud.

Ejemplo de filas de solicitudes grandes en el panel solicitudes

Para habilitar las filas grandes, active la casilla de verificación usar filas de solicitudes grandes .

Casilla de verificación usar filas de solicitudes grandes

Ocultar el panel de información general

De forma predeterminada, DevTools muestra el panel de información general . Para ocultarla, desactive la casilla Mostrar Descripción general .

La casilla Mostrar información general

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

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

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.