Referencia de las funciones de red

Kayce Basques

Sofia Emelianova

Descubre nuevas formas de analizar cómo se carga tu página con esta referencia completa de las funciones de análisis de red de Chrome DevTools.

Cómo registrar solicitudes de red

De forma predeterminada, las Herramientas para desarrolladores registran todas las solicitudes de red en el panel Red, siempre que estén abiertas las Herramientas para desarrolladores.

Cómo dejar de registrar solicitudes de red

Para dejar de registrar solicitudes, haz lo siguiente:

• Haz clic en Stop recording network log en el panel Red. Se vuelve gris para indicar que DevTools ya no está registrando las solicitudes.
• Presiona Command> + E (Mac) o Control + E (Windows, Linux) mientras el panel Network esté seleccionado.

Cómo borrar solicitudes

Haz clic en Borrar en el panel Red para borrar todas las solicitudes de la tabla Solicitudes.

Cómo guardar solicitudes entre cargas de páginas

Para guardar solicitudes entre cargas de páginas, marca la casilla de verificación Preserve log en el panel Network. DevTools guarda todas las solicitudes hasta que inhabilites Preserve log.

Cómo tomar capturas de pantalla durante la carga de una página

Toma capturas de pantalla para analizar lo que ven los usuarios mientras esperan que se cargue la página.

Para habilitar las capturas de pantalla, abre Configuración en el panel Red y marca Capturar capturas de pantalla.

Vuelve a cargar la página con el panel Network seleccionado para tomar capturas de pantalla.

Una vez que las capturas se hayan realizado, podrás interactuar con ellas de las siguientes maneras:

• Desplázate sobre una captura de pantalla para ver en qué momento se capturó. Aparece una línea amarilla en el cronograma de Overview.
• Haz clic en la miniatura de una captura de pantalla para filtrar las solicitudes que se produjeron después de capturarla.
• Haz doble clic en una miniatura para acercarla.

Volver a reproducir la solicitud XHR

Para volver a reproducir una solicitud XHR, haz una de las siguientes acciones en la tabla Solicitudes:

• Selecciona la solicitud y presiona R.
• Haz clic con el botón derecho en la solicitud y selecciona Replay XHR.

Cómo cambiar el comportamiento de carga

Cómo desactivar la caché del navegador para emular un visitante nuevo

Para emular la primera experiencia de un usuario con tu sitio, marca la casilla de verificación Disable cache. DevTools inhabilita la caché del navegador. Esto emula con mayor precisión la primera experiencia del usuario, ya que las solicitudes se entregan desde la caché del navegador en visitas repetidas.

Cómo inhabilitar la caché del navegador desde el panel lateral Network conditions

Si deseas inhabilitar la caché mientras trabajas en otros paneles de DevTools, usa el panel lateral Network conditions.

1. Haz clic en el ícono para abrir el panel lateral Condiciones de la red.
2. Marca o borra la casilla de verificación Disable cache.

Cómo borrar manualmente la caché del navegador

Para borrar manualmente la caché del navegador en cualquier momento, haz clic con el botón derecho en cualquier lugar de la tabla Requests y selecciona Clear browser cache.

Emular sin conexión

Hay una nueva clase de aplicaciones web, llamadas Progressive Web Apps, que pueden funcionar sin conexión con la ayuda de service workers. Cuando desarrollas este tipo de app, es útil poder simular con rapidez un dispositivo que no tenga conexión de datos.

Para simular una experiencia de red completamente sin conexión, selecciona Sin conexión en el menú desplegable Limitación de red junto a la casilla de verificación Inhabilitar caché.

DevTools muestra un ícono de advertencia junto a la pestaña Network para recordarte que está habilitada la opción sin conexión.

Cómo emular conexiones de red lentas

Para emular 4G rápido, 4G lento o 3G, selecciona el parámetro predeterminado correspondiente en el menú desplegable Restricción de la barra de acción en la parte superior.

DevTools muestra un ícono de advertencia de advertencia junto al panel Network para recordarte que está habilitada la limitación.

Crea perfiles de limitación personalizados

Además de los parámetros preestablecidos, como 4G lento o rápido, también puedes agregar tus propios perfiles de limitación personalizados:

1. Abre el menú Restricción y selecciona Personalizar > Agregar….
2. Configura un nuevo perfil de limitación como se describe en configuración Configuración > Regulación.

3. En el panel Red, selecciona tu perfil nuevo en el menú desplegable Restricción.

   

DevTools muestra un ícono de advertencia junto al panel Network para recordarte que está habilitada la limitación.

Limita las conexiones de WebSocket

Además de las solicitudes HTTP, Herramientas para desarrolladores limita las conexiones de WebSocket desde la versión 99.

Para observar la limitación de WebSocket, haz lo siguiente:

1. Inicia una conexión nueva, por ejemplo, con una herramienta de prueba.
2. En el panel Network, selecciona No throttling y envía un mensaje a través de la conexión.
3. Crea un perfil de limitación personalizado muy lento, por ejemplo, 10 kbit/s. Un perfil tan lento te ayudará a notar la diferencia.
4. En el panel Red, selecciona el perfil y envía otro mensaje.
5. Activa o desactiva el filtro WS, haz clic en el nombre de tu conexión, abre la pestaña Mensajes y verifica la diferencia de tiempo entre los mensajes enviados y en los que se reprodujo eco con y sin limitación. Por ejemplo:

Emula conexiones de red lentas desde el panel lateral Network conditions

Si deseas restringir la conexión de red mientras trabajas en otros paneles de DevTools, usa el panel lateral Network conditions.

1. Haz clic en el ícono para abrir el panel lateral Network Conditions.
2. Selecciona una velocidad de conexión en el menú Restricción de red.

Cómo borrar manualmente las cookies del navegador

Para borrar manualmente las cookies del navegador en cualquier momento, haz clic con el botón derecho en cualquier lugar de la tabla Requests y selecciona Clear browser cookies.

Anula los encabezados de respuesta HTTP

Consulta Cómo anular archivos y encabezados de respuesta HTTP de forma local.

Cómo anular el usuario-agente

Para anular manualmente el usuario-agente, haz lo siguiente:

1. Haz clic en el ícono para abrir el panel lateral Condiciones de la red.
2. Borra la opción Seleccionar automáticamente.
3. Elige una opción de usuario-agente del menú o ingresa una personalizada en el cuadro.

Solicitudes de búsqueda

Para buscar en los encabezados de solicitud, las cargas útiles y las respuestas, haz lo siguiente:

1. Presiona la siguiente combinación de teclas para abrir la pestaña Buscar a la derecha:

   • En macOS, Comando + F.
   • En Windows o Linux, Control + F.

2. En la pestaña Búsqueda, ingresa tu búsqueda y presiona Intro. De manera opcional, haz clic en match_case o regular_expression para activar la distinción entre mayúsculas y minúsculas o las expresiones regulares, respectivamente.

3. Haz clic en uno de los resultados de la búsqueda. En el panel Red, se destaca en amarillo la solicitud que coincidió. Además, el panel también abre la pestaña Encabezados o Respuesta y destaca la cadena que coincide allí, si la hay.

Para actualizar los resultados de la búsqueda, haz clic en Actualizar Actualizar. Para borrar los resultados, haz clic en Bloquear Borrar.

Para obtener más información sobre todas las formas en que puedes realizar búsquedas en DevTools, consulta Búsqueda: Busca texto en todos los recursos cargados.

Filtrar solicitudes

Filtrar solicitudes por propiedades

Usa el cuadro Filtro para filtrar solicitudes según sus propiedades, como el dominio o el tamaño de la solicitud.

Si no ves el cuadro, es probable que la barra Filtros esté oculta. Consulta Cómo ocultar la barra de filtros.

Para invertir el filtro, marca la casilla de verificación Invertir junto al cuadro Filtrar.

Puedes usar varias propiedades simultáneamente si separas cada propiedad con un espacio. Por ejemplo, mime-type:image/gif larger-than:1K muestra todos los GIF de más de un kilobyte. Estos filtros de varias propiedades son equivalentes a operaciones AND. No se admiten las operaciones OR.

A continuación, se incluye una lista completa de las propiedades compatibles.

• cookie-domain. Muestra los recursos que configuran un dominio de cookies específico.
• cookie-name. Muestra los recursos que establecen un nombre de cookie específico.
• cookie-path. Muestra los recursos que establecen una ruta de acceso a cookies específica.
• cookie-value. Muestra los recursos que establecen un valor de cookie específico.
• domain. Solo muestra recursos del dominio especificado. Puedes usar un carácter comodín (*) para incluir varios dominios. Por ejemplo, *.com muestra recursos de todos los nombres de dominio que terminan en .com. DevTools muestra un menú desplegable de autocompletar con todos los dominios que encontró.
• has-overrides. Muestra las solicitudes que anularon content, headers, cualquier anulación (yes) o ninguna anulación (no). Puedes agregar la columna correspondiente Tiene anulaciones a la tabla de solicitudes.
• has-response-header: Muestra los recursos que contienen el encabezado de respuesta HTTP especificado. DevTools completa el menú desplegable de autocompletar con todos los encabezados de respuesta que encuentra.
• is. Usa is:running para encontrar WebSocket recursos.
• larger-than. Muestra recursos de tamaño superior al especificado, en bytes. Establecer un valor de 1000 equivale a establecer un valor de 1k.
• method. Muestra recursos recuperados con un tipo de método HTTP especificado. Las Herramientas para desarrolladores propagan el menú desplegable de autocompletar con todos los métodos HTTP que encuentra.
• mime-type: Muestra recursos de un tipo de MIME especificado. Las Herramientas para desarrolladores propagan el menú desplegable de autocompletar con todos los tipos de MIME que encuentra.
• mixed-content. Muestra todos los recursos de contenido mixto (mixed-content:all) o solo los que se muestran (mixed-content:displayed).
• priority. Muestra los recursos cuyo nivel de prioridad coincide con el valor especificado.
• resource-type: Muestra recursos de un tipo de recurso, por ejemplo, una imagen. Las Herramientas para desarrolladores propagan el menú desplegable de autocompletar con todos los tipos de recursos que encuentra.
• response-header-set-cookie. Muestra los encabezados Set-Cookie sin procesar en la pestaña Problemas. Las cookies con formato incorrecto con encabezados Set-Cookie incorrectos se marcarán en el panel Red.
• scheme. Muestra los recursos recuperados a través de una conexión HTTP no protegida (scheme:http) o HTTPS protegida (scheme:https).
• set-cookie-domain: Muestra los recursos que tienen un encabezado Set-Cookie con un atributo Domain que coincide con el valor especificado. Las Herramientas para desarrolladores propagan el autocompletado con todos los dominios de cookies que encuentra.
• set-cookie-name. Muestra los recursos que tienen un encabezado Set-Cookie con un nombre que coincide con el valor especificado. Las Herramientas para desarrolladores propagan el autocompletado con todos los nombres de las cookies que encuentra.
• set-cookie-value: Muestra los recursos que tienen un encabezado Set-Cookie con un valor que coincide con el valor especificado. DevTools completa el menú desplegable de autocompletar con todos los valores de las cookies que encuentra.
• status-code. Solo muestra los recursos cuyo código de estado HTTP coincide con el código especificado. DevTools completa el menú desplegable de autocompletar con todos los códigos de estado que encuentra.
• url. Muestra los recursos que tienen un url que coincide con el valor especificado.

Filtrar solicitudes por tipo

Para filtrar solicitudes por tipo de recurso, haz clic en los botones Todos, Obtención/XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifiesto o Otro (cualquier otro tipo que no se mencione aquí) en el panel Red.

Si no ves estos botones, es probable que la barra de acciones Filtros esté oculta. Consulta Cómo ocultar la barra de filtros.

Para mostrar recursos de varios tipos de forma simultánea, mantén presionado Command (Mac) o Control (Windows, Linux) y, luego, haz clic en varios filtros de tipo.

Cómo filtrar solicitudes por tiempo

Arrastra hacia la izquierda o la derecha en el cronograma de Overview para mostrar solo las solicitudes que estuvieron activas durante ese período. El filtro es inclusivo. Se muestran todas las solicitudes que hayan estado activas por el tiempo destacado.

Oculta las URLs de datos

Las URLs de datos son archivos pequeños insertados en otros documentos. Cualquier solicitud que veas en la tabla Solicitudes que comience con data: es una URL de datos.

Para ocultar estas solicitudes, en la barra de acciones de Filtros, selecciona Más filtros > check_box Ocultar URLs de datos.

La barra de estado que se encuentra en la parte inferior muestra la cantidad de solicitudes que se muestran del total.

Oculta las URLs de extensión

Para enfocarte en el código que escribes, puedes filtrar las solicitudes irrelevantes que envían las extensiones que instalaste en Chrome. Las solicitudes de extensión tienen URLs que comienzan con chrome-extension://.

Para ocultar las solicitudes de extensión, en la barra de acciones Filtros, selecciona Más filtros > check_box Ocultar URLs de extensión.

La barra de estado que se encuentra en la parte inferior muestra la cantidad de solicitudes que se muestran del total.

Mostrar solo las solicitudes con cookies de respuesta bloqueadas

Para filtrar todo, excepto las solicitudes con cookies de respuesta bloqueadas por algún motivo, en la barra de acciones Filtros, selecciona Más filtros > check_box Cookies de respuesta bloqueadas. Pruébala en esta página de demostración.

La barra de estado que se encuentra en la parte inferior muestra la cantidad de solicitudes que se muestran del total.

Para averiguar por qué se bloqueó una cookie de respuesta, selecciona la solicitud, abre la pestaña Cookies y coloca el cursor sobre el ícono de información info.

Además, el panel Red muestra un ícono de advertencia warning junto a una solicitud con cookies bloqueadas debido a las funciones experimentales o la configuración de Chrome. Coloca el cursor sobre el ícono para ver información sobre la herramienta con una pista y haz clic en él para ir al panel Problemas y obtener más información.

Mostrar solo las solicitudes bloqueadas

Para filtrar todo excepto las solicitudes bloqueadas, en la barra de acciones Filtros, selecciona Más filtros > check_box Solicitudes bloqueadas. Para probar esto, puedes usar la pestaña Bloqueo de solicitudes de red en el panel lateral.

En la tabla Solicitudes, se destacan las solicitudes bloqueadas en rojo. La barra de estado que se encuentra en la parte inferior muestra la cantidad de solicitudes que se muestran del total.

Mostrar solo solicitudes de terceros

Para filtrar todo excepto las solicitudes con un origen que difiere del origen de la página, en la barra de acciones Filtros, selecciona Más filtros > check_box Solicitudes de terceros. Pruébala en esta página de demostración.

La barra de estado que se encuentra en la parte inferior muestra la cantidad de solicitudes que se muestran del total.

Ordenar solicitudes

De forma predeterminada, las solicitudes de la tabla Requests se ordenan por tiempo de inicio, pero puedes ordenar la tabla con otros criterios.

Cómo ordenar por columna

Haz clic en el encabezado de cualquier columna de la tabla Solicitudes para ordenar las solicitudes según esa columna.

Cómo ordenar por fase de actividad

Para cambiar la manera en la que Waterfall ordena las solicitudes, haz clic con el botón secundario en el encabezado de la tabla Requests, desplázate sobre Waterfall y selecciona una de las siguientes opciones:

• Hora de inicio. La primera solicitud que se inició está en la parte superior.
• Tiempo de respuesta: La primera solicitud que comenzó la descarga es en la parte superior.
• Hora de finalización. La primera solicitud que se finalizó está en la parte superior.
• Duración total: La solicitud con la menor configuración de conexión y solicitud / respuesta es la primera de la lista.
• Latencia. La solicitud que esperó menos tiempo por una respuesta es la primera de la lista.

En estas descripciones se supone que cada opción respectiva se ordena de más corta a más larga. Si haces clic en el encabezado de la columna Waterfall, se invertirá el orden.

En este ejemplo, la cascada está ordenada por duración total. La parte más clara de cada barra es el tiempo de espera. La porción más oscura indica el tiempo que se pasó descargando bytes.

Analizar solicitudes

Mientras DevTools está abierta, registra todas las solicitudes en el panel Network. Usa el panel Network para analizar las solicitudes.

Visualiza un registro de solicitudes

Usa la tabla Requests para ver un registro de todas las solicitudes realizadas mientras las Herramientas para desarrolladores estaban abiertas. Si haces clic o te desplazas sobre una solicitud, se muestra más información sobre ella.

La tabla Requests muestra las siguientes columnas de forma predeterminada:

• Name. Es el nombre de archivo o identificador del recurso.

• Estado. Esta columna puede mostrar los siguientes valores:

  

  • Código de estado HTTP, por ejemplo, 200 o 404
  • CORS error para las solicitudes falló debido al uso compartido de recursos entre dominios (CORS).
  • (blocked:origin) para solicitudes con encabezados mal configurados. Coloca el cursor sobre este valor de estado para ver un cuadro de información con una sugerencia sobre lo que salió mal.
  • (failed) seguido del mensaje de error.

• Tipo: El tipo de MIME del recurso solicitado.

• Iniciador. Los siguientes objetos o procesos pueden iniciar solicitudes:

  • Analizador. Es el analizador HTML de Chrome.
  • Redireccionamiento: Es un redireccionamiento HTTP.
  • Secuencia de comandos: Es una función de JavaScript.
  • Otro. Es algún otro proceso o acción, como la navegación a una página a través de un vínculo o el ingreso de una URL en la barra de direcciones.

• Size (Tamaño). Es el tamaño combinado de los encabezados de la respuesta y el cuerpo de la respuesta, como los entrega el servidor.

• Hora. Es la duración total, desde el inicio de la solicitud hasta la recepción del último byte de la respuesta.

• Cascada: Es un desglose visual de cada actividad de la solicitud.

Agregar o eliminar columnas

Haz clic con el botón derecho en el encabezado de la tabla Requests y selecciona una opción para ocultarla o mostrarla. Las opciones que se muestran tienen marcas de selección junto a ellas.

Puedes agregar o quitar las siguientes columnas adicionales: Ruta, URL, Método, Protocolo, Esquema, Dominio, Dirección remota, Espacio de direcciones remotas, Espacio de direcciones del iniciador, Cookies, Establecer cookies, Prioridad, ID de conexión, Tiene anulaciones y Cascada.

Agregar columnas personalizadas

Para agregar una columna personalizada a la tabla Solicitudes, sigue estos pasos:

1. Haz clic con el botón derecho en el encabezado de la tabla Requests y selecciona Response Headers > Manage Header Columns.
2. En la ventana de diálogo, haz clic en Agregar encabezado personalizado, ingresa su nombre y haz clic en Agregar.

Agrupar solicitudes por marcos intercalados

Si los marcos intercalados de una página inician muchas solicitudes, puedes hacer que el registro de solicitudes sea más fácil de usar agrupándolos.

Para agrupar las solicitudes por iframes, abre Configuración en el panel Red y marca la check_box Agrupar por marco.

Para ver una solicitud iniciada por un marco intercalado, expándela en el registro de solicitudes.

Cómo ver el tiempo de las solicitudes en relación a otras solicitudes

Usa la cascada para ver el tiempo de las solicitudes en relación con otras. De forma predeterminada, la cascada se organiza por hora de inicio de las solicitudes. Así, las solicitudes que están más hacia la izquierda comenzaron antes que las que están más hacia la derecha.

Consulta Cómo ordenar por fase de actividad para ver las diferentes formas en que puedes ordenar la cascada.

Cómo analizar los mensajes de una conexión de WebSocket

Para ver los mensajes de una conexión de WebSocket, haz lo siguiente:

1. En la columna Name de la tabla Requests, haz clic en la URL de la conexión de WebSocket.
2. Haz clic en la pestaña Mensajes. La tabla muestra los últimos 100 mensajes.

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

La tabla contiene tres columnas:

• Data. Es la carga útil del mensaje. Si el mensaje es texto sin formato, se muestra aquí. Para los códigos de operación binarios, en esta columna se muestran el nombre y el código correspondientes. Se admiten los siguientes códigos de operación: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame y Pong Frame.
• Longitud: Es la extensión de la carga útil del mensaje, en bytes.
• Hora. Es la hora a la que se recibió o envió el mensaje.

Los mensajes se codifican por colores según su tipo:

• Los mensajes de texto salientes son de color verde claro.
• Los mensajes de texto entrantes son blancos.
• Los códigos de operaciones WebSocket son amarillos claros.
• Los errores son de color rojo claro.

Cómo analizar eventos en una transmisión

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

1. Registra las solicitudes de red en una página que transmite eventos. Por ejemplo, abre esta página de demostración y haz clic en cualquiera de los tres botones.
2. En Red, selecciona una solicitud y abre la pestaña EventStream.

Para filtrar eventos, especifica 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, haz clic en bloquear Borrar.

Cómo obtener una vista previa del cuerpo de una respuesta

Para obtener una vista previa del cuerpo de una respuesta, haz lo siguiente:

1. Haz clic en la URL de la solicitud, debajo de la columna Nombre de la tabla Solicitudes.
2. Haz clic en la pestaña Vista previa.

Esta pestaña es principalmente útil para ver imágenes.

Cómo ver el cuerpo de una respuesta

Para ver el cuerpo de la respuesta a una solicitud, haz lo siguiente:

1. Haz clic en la URL de la solicitud, en la columna Nombre de la tabla Solicitudes.
2. Haz clic en la pestaña Response.

Cómo ver encabezados HTTP

Para ver los datos del encabezado HTTP de una solicitud, haz lo siguiente:

1. Haz clic en una solicitud de la tabla Solicitudes.
2. Abre la pestaña Headers y desplázate hacia abajo hasta las secciones General, Response Headers, Request Headers y, de manera opcional, Early Hints Headers.

En la sección General, DevTools muestra un mensaje de estado legible por humanos junto al código de estado HTTP recibido.

En la sección Encabezados de respuesta, puedes colocar el cursor sobre un valor de encabezado y hacer clic en el botón editar Editar para anular el encabezado de respuesta de forma local.

Cómo ver el origen de encabezados HTTP

De forma predeterminada, la pestaña Headers muestra los nombres de los encabezados ordenados alfabéticamente. Para ver los nombres de los encabezados HTTP en el orden en el que se los recibió, haz lo siguiente:

1. Abre la pestaña Headers de la solicitud que te interesa. Consulta Cómo ver encabezados HTTP.
2. Haz clic en Ver código fuente, junto a la sección Encabezado de solicitud o Encabezado de respuesta.

Advertencia de encabezados provisionales

A veces, la pestaña Headers muestra el mensaje de advertencia Provisional headers are shown.... Esto podría deberse a las siguientes razones:

• La solicitud no se envió a través de la red, sino que se entregó desde una caché local, que no almacena los encabezados de la solicitud originales. En este caso, puedes inhabilitar el almacenamiento en caché para ver los encabezados de la solicitud completos.

• El recurso de red no es válido. Por ejemplo, ejecuta fetch("https://jec.fish.com/unknown-url/") en Console.

Por motivos de seguridad, DevTools también puede mostrar solo encabezados provisionales.

Ver carga útil de la solicitud

Para ver la carga útil de la solicitud, es decir, sus parámetros de cadena de consulta y datos de formulario, selecciona una solicitud de la tabla Solicitudes y abre la pestaña Carga útil.

Ver fuente de carga útil

De forma predeterminada, DevTools muestra la carga útil en un formato legible.

Para ver las fuentes de los parámetros de cadena de consulta y los datos del formulario, en la pestaña Carga útil, haz clic en ver fuente junto a las secciones Parámetros de cadena de consulta o Datos de formulario.

Cómo ver los argumentos decodificados de URL de los parámetros de la cadena de consulta

Para activar o desactivar la codificación de URLs para argumentos, en la pestaña Carga útil, haz clic en ver decodificado o ver codificación en URL.

Cómo ver las cookies

Para ver las cookies enviadas en el encabezado HTTP de una solicitud, haz lo siguiente:

1. Haz clic en la URL de la solicitud, debajo de la columna Nombre de la tabla Solicitudes.
2. Haz clic en la pestaña Cookies.

Para obtener una descripción de cada una de las columnas, consulta Campos.

Para modificar las cookies, consulta Cómo ver, editar y borrar cookies.

Cómo ver el desglose de tiempo de una solicitud

Para ver el desglose de tiempo de una solicitud, haz lo siguiente:

1. Haz clic en la URL de la solicitud, debajo de la columna Nombre de la tabla Solicitudes.
2. Haz clic en la pestaña Timing.

Consulta Cómo obtener una vista previa de un desglose de tiempo para acceder a estos datos de una forma más rápida.

Consulta la Explicación de fases de desglose de tiempo para obtener más información sobre cada una de las fases que puedes ver en la pestaña Timing.

Cómo obtener una vista previa de un desglose de tiempo

Para obtener una vista previa del desglose de tiempo de una solicitud, desplázate sobre la entrada de la solicitud en la columna Waterfall de la tabla Requests.

Consulta Cómo ver el desglose de tiempo de una solicitud para conocer una forma de acceder a estos datos que no requiere desplazarse sobre un elemento.

Explicación de las fases de desglose de tiempo

A continuación, se presenta más información acerca de cada una de las fases que pueden aparecer en la pestaña Timing:

• Filas: El navegador agrega solicitudes a la cola antes de que comience la conexión y en los siguientes casos:
  • Hay solicitudes de mayor prioridad.
  • Ya hay seis conexiones TCP abiertas para este origen, que es el límite. Esto se aplica solo a HTTP/1.0 y HTTP/1.1.
  • El navegador está asignando espacio brevemente en la caché del disco.
• Suspendida. La solicitud se puede detener después de que se inicia la conexión por cualquiera de los motivos que se describen en Queueing.
• Búsqueda de DNS. El navegador está resolviendo la dirección IP de la solicitud.
• Conexión inicial. El navegador está estableciendo una conexión, incluidos los protocolos de enlace o reintentos de TCP y la negociación de un SSL.
• Negociación de proxy. El navegador está negociando la solicitud con un servidor proxy.
• Solicitud enviada. Se está enviando la solicitud.
• Preparación de ServiceWorker. El navegador está iniciando el service worker.
• Solicitud a ServiceWorker. Se está enviando la solicitud al service worker.
• Esperando (TTFB). El navegador está esperando el primer byte de una respuesta. TTFB es la sigla de Time To First Byte, o tiempo hasta el primer byte. Este tiempo incluye un viaje de ida y vuelta de latencia y el tiempo que el servidor tardó en preparar la respuesta.
• Descarga de contenido. El navegador está recibiendo la respuesta, ya sea directamente de la red o de un service worker. Este valor es la cantidad total de tiempo que se dedicó a leer el cuerpo de la respuesta. Los valores superiores a los esperados pueden indicar que la red es lenta o que el navegador está ocupado realizando otro trabajo, lo que retrasa la lectura de la respuesta.

Cómo ver iniciadores y dependencias

Para ver los iniciadores y las dependencias de una solicitud, mantén presionada la tecla Mayúsculas y desplázate sobre la solicitud en la tabla Solicitudes. DevTools marca los iniciadores de color verde y las dependencias de color rojo.

Cuando la tabla Requests está ordenada cronológicamente, la primera solicitud verde que se encuentra arriba de la solicitud sobre la que te estás desplazando es el iniciador de la dependencia. Si hay otra solicitud verde arriba de esa, esa solicitud más arriba es el iniciador del iniciador. Y así sucesivamente.

Cómo ver eventos de carga

DevTools muestra el tiempo de los eventos DOMContentLoaded y load en varios lugares del panel Network. El evento DOMContentLoaded es de color azul y el evento load es de color rojo.

Cómo ver la cantidad total de solicitudes

La cantidad total de solicitudes se muestra en la barra de estado, en la parte inferior del panel Network.

Precaución: Precaución: Esta cifra solo sigue las solicitudes que se hayan registrado después de abrir DevTools. Si hubo otras solicitudes antes de abrir DevTools, esas no se cuentan.

Consulta el tamaño total de los recursos transferidos y cargados

DevTools muestra el tamaño total de los recursos transferidos y cargados (sin comprimir) en la barra de estado que se encuentra en la parte inferior del panel Network.

Precaución: Precaución: Esta cifra solo sigue las solicitudes que se hayan registrado después de abrir DevTools. Si se produjeron otras solicitudes antes de abrir las Herramientas para desarrolladores, estas no se cuentan.

Consulta Cómo ver el tamaño sin comprimir de un recurso para saber cuánto pesan los recursos después de que el navegador los descomprime.

Cómo ver el seguimiento de pila que causó una solicitud

Cuando una instrucción de JavaScript hace que se solicite un recurso, desplázate sobre la columna Initiator para ver el seguimiento de pila que lleva a la solicitud.

Cómo ver el tamaño sin comprimir de un recurso

Consulta Configuración > Big request rows y, luego, observa el valor inferior de la columna Size.

En este ejemplo, el tamaño comprimido del documento www.google.com que se envió a través de la red fue 43.8 KB, mientras que el tamaño sin comprimir fue 136 KB.

Cómo exportar datos de solicitudes

Puedes exportar o copiar la lista de solicitudes, con los filtros aplicados, de varias maneras, como se describe a continuación.

Cómo guardar todas las solicitudes de red en un archivo HAR

HAR (archivo HTTP) es un formato de archivo que usan varias herramientas de sesión HTTP para exportar los datos capturados. El formato es un objeto JSON con un conjunto particular de campos.

Para reducir las posibilidades de filtraciones accidentales de información sensible, de forma predeterminada, puedes exportar el registro de red "limpiado" en formato HAR que excluye la información sensible, como los encabezados Cookie, Set-Cookie y Authorization. Si es necesario, también puedes exportar el registro con datos sensibles.

Para guardar todas las solicitudes de red en un archivo HAR, elige una de las siguientes dos opciones:

• Haz clic con el botón derecho en cualquier solicitud de la tabla Solicitudes y selecciona Copiar > Guardar todas [las listas] como HAR (limpiadas) o Guardar todas [las listas] como HAR (con datos sensibles).

  

• Haz clic en descargar Exportar HAR (limpiado)… en la barra de acciones en la parte superior del panel Red.

  Para exportar con datos sensibles, primero activa Configuración Configuración > Preferencias > Red > check_box Permitir generar HAR con datos sensibles. Luego, mantén presionado el botón Descargar Exportar y selecciona Exportar HAR (con datos sensibles).

  

Una vez que tengas un archivo HAR, puedes volver a importarlo a las Herramientas para desarrolladores para análisis de dos maneras:

• Arrastra y suelta el archivo HAR en la tabla Requests.
• Haz clic en subir Importar HAR en la barra de acciones de la parte superior del panel Red.

Nota: El panel Red lee y muestra los iniciadores de las solicitudes importadas desde los archivos HAR.

Cómo copiar una solicitud, un conjunto filtrado de solicitudes o todas en el portapapeles

En la columna Nombre de la tabla Solicitudes, haz clic con el botón derecho en una solicitud, desplázate sobre Copiar y selecciona una de las siguientes opciones.

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

• Copiar URL. Copia la URL de la solicitud en el portapapeles.
• Copiar como cURL. Copia la solicitud como comando cURL.
• Copiar como PowerShell. Copia la solicitud como un comando de PowerShell.
• Copiar como recuperado. Copia la solicitud como una llamada de recuperación.
• Copiar como recuperación (Node.js). Copia la solicitud como una llamada de recuperación de Node.js.
• Copiar respuesta. Copia el cuerpo de la respuesta en el portapapeles.
• Copiar seguimiento de pila. Copia el seguimiento de pila de la solicitud en el portapapeles.

Para copiar todas las solicitudes, haz lo siguiente:

• Copiar todas las URLs: Copia las URLs de todas las solicitudes en el portapapeles.
• Copia todo como cURL. Copia todas las solicitudes como cadena de comandos cURL.
• Copiar todo como PowerShell. Copia todas las solicitudes como cadena de comandos de PowerShell.
• Copiar todo como recuperado. Copia todas las solicitudes como una cadena de llamadas de recuperación.
• Copia todo como recuperado (Node.js). Copia todas las solicitudes como una cadena de llamadas de recuperación de Node.js.
• Copiar todo como HAR (limpio). Copia todas las solicitudes como datos HAR sin datos sensibles, como los encabezados Cookie, Set-Cookie y Authorization.
• Copiar todo como HAR (con datos sensibles). Copia todas las solicitudes como datos HAR con datos sensibles.

Para copiar un conjunto filtrado de solicitudes, aplica un filtro al registro de red, haz clic con el botón derecho en una solicitud y selecciona lo siguiente:

• Copiar todas las URLs incluidas: Copia las URLs de todas las solicitudes filtradas en el portapapeles.
• Copia todo lo que aparece como cURL. Copia todas las solicitudes filtradas como una cadena de comandos cURL.
• Copia todo lo que aparece como PowerShell. Copia todas las solicitudes filtradas como una cadena de comandos de PowerShell.
• Copia todo lo que aparece como recuperado. Copia todas las solicitudes filtradas como una cadena de llamadas de recuperación.
• Copia todo lo que aparece como recuperación (Node.js). Copia todas las solicitudes filtradas como una cadena de llamadas de recuperación de Node.js.
• Copia todo lo que aparece como HAR (limpio). Copia todas las solicitudes filtradas como datos HAR sin datos sensibles, por ejemplo, los encabezados Cookie, Set-Cookie y Authorization.
• Copia todo lo que aparece como HAR (con datos sensibles). Copia todas las solicitudes filtradas como datos HAR con datos sensibles.

Cómo cambiar el diseño del panel Network

Expande o contrae secciones de la IU del panel Network para enfocarte en lo que más te importa.

Ocultar la barra de acciones Filtros

De forma predeterminada, DevTools muestra la barra de filtros en la parte superior del panel Network. Haz clic en filter_alt Filtrar para ocultarlo.

Usa filas de solicitud grandes

Usa filas grandes cuando quieras tener más espacio en blanco en la tabla de solicitudes de red. Algunas columnas también proporcionan un poco más de información cuando usas filas grandes. Por ejemplo, el valor inferior de la columna Size es el tamaño sin comprimir de una solicitud, y la columna Priority muestra la prioridad de recuperación inicial (valor inferior) y final (valor superior).

Abre Configuración y haz clic en Filas de solicitud grandes para ver las filas grandes.

Cómo ocultar el segmento Recientes

De forma predeterminada, DevTools muestra el segmento Descripción general. Abre Configuración y desmarca la casilla de verificación Mostrar descripción general para ocultarla.