Referencia de las funciones de red

Descubre nuevas formas de analizar cómo se carga tu página en esta referencia integral de las funciones de análisis de red de las Herramientas para desarrolladores de Chrome.

Cómo registrar solicitudes de red

De forma predeterminada, DevTools registra todas las solicitudes de red en el panel Red, siempre que DevTools esté abierto.

Cómo detener la grabación de solicitudes de red

Para detener la grabación de solicitudes, haz lo siguiente:

• Haz clic en Detener el registro de red en el panel Red. Se volverá gris para indicar que las Herramientas para desarrolladores ya no están registrando solicitudes.
• Presiona Comando + E (Mac) o Control + E (Windows, Linux) mientras el panel Red está enfocado.

Borra las solicitudes

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

Guarda las solicitudes en las cargas de página

Para guardar las solicitudes en las cargas de página, marca la casilla de verificación Guardar el registro en el panel Red. DevTools guarda todas las solicitudes hasta que inhabilitas Preserve log.

Toma capturas de pantalla durante la carga de la página

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

Para habilitar las capturas de pantalla, abre Configuración dentro del panel Red y selecciona Capturar capturas de pantalla.

Vuelve a cargar la página mientras el panel Red está enfocado para tomar capturas de pantalla.

Una vez que se capturen, puedes interactuar con las capturas de pantalla de las siguientes maneras:

• Coloca el cursor sobre una captura de pantalla para ver el momento en que se tomó. Aparecerá una línea amarilla en la línea de tiempo de Overview.
• Haz clic en la miniatura de una captura de pantalla para filtrar las solicitudes que se produjeron después de que se tomó la captura.
• Haz doble clic en una miniatura para acercarla.

Cómo editar y volver a enviar una solicitud

Puedes editar y volver a enviar cualquier solicitud de red recuperable desde la tabla Solicitudes:

1. Haz clic con el botón derecho en la solicitud y selecciona Edit and resend as fetch. Las Herramientas para desarrolladores abren el panel Console con la solicitud completada como una llamada fetch(), lo que conserva los parámetros de solicitud y el contexto de ejecución originales.
2. De manera opcional, edita la llamada a fetch() en la consola y, luego, presiona Intro para volver a enviar la solicitud.

Cambia el comportamiento de carga

Inhabilita la caché del navegador para simular la experiencia de un visitante nuevo

Para emular la experiencia de un usuario nuevo en tu sitio, marca la casilla de verificación Inhabilitar caché. Las Herramientas para desarrolladores inhabilitan la caché del navegador. Esto emula con mayor precisión la experiencia de un usuario nuevo, ya que las solicitudes se publican desde la caché del navegador en las visitas repetidas.

Inhabilita la caché del navegador desde el panel Network conditions

Si quieres inhabilitar la caché mientras trabajas en otros paneles de Herramientas para desarrolladores, usa el panel lateral Condiciones de red.

1. Haz clic en el ícono para abrir el panel lateral Condiciones de red.
2. Marca o desmarca la casilla de verificación Inhabilitar la memoria caché.

Cómo borrar la caché del navegador de forma manual

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

Emula el modo sin conexión

Existe una nueva clase de apps web, llamadas apps web progresivas, que pueden funcionar sin conexión con la ayuda de service workers. Cuando compilas este tipo de app, es útil poder simular rápidamente un dispositivo que no tiene 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 la red junto a la casilla de verificación Inhabilitar caché.

Las Herramientas para desarrolladores muestran un ícono de advertencia junto a la pestaña Red para recordarte que el modo sin conexión está habilitado.

Cómo emular conexiones de red lentas

Para emular una conexión 4G rápida, 4G lenta o 3G, selecciona el ajuste predeterminado correspondiente en el menú desplegable Limitación de la barra de acciones de la parte superior.

Si tienes activadas las métricas de campo en el panel Rendimiento, es posible que una de las opciones de limitación del menú se marque como recomendada según los datos del Chrome User Experience Report.

Las Herramientas para desarrolladores muestran un ícono de advertencia warning junto al panel Red para recordarte que la limitación está habilitada.

Crea perfiles de limitación personalizados

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

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

3. De vuelta en el panel Red, selecciona tu nuevo perfil en el menú desplegable Limitación.

   

Las Herramientas para desarrolladores muestran un ícono de advertencia junto al panel Network para recordarte que la limitación está habilitada.

Limita las conexiones de WebSocket

Además de las solicitudes HTTP, las Herramientas para desarrolladores limitan 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 Red, selecciona Sin limitación 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 Messages y verifica la diferencia de tiempo entre los mensajes enviados y los repetidos con y sin limitación. Por ejemplo:

Emula conexiones de red lentas desde el panel Network conditions

Si deseas limitar la conexión de red mientras trabajas en otros paneles de Herramientas para desarrolladores, usa el panel Condiciones de red.

1. Haz clic en el ícono para abrir el panel lateral Condiciones de red.
2. Selecciona una velocidad de conexión en el menú Limitación de la 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 Anula archivos y encabezados de respuesta HTTP de forma local.

Cómo anular el usuario-agente

Para anular manualmente el usuario-agente, sigue estos pasos:

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

Solicitudes de búsqueda

Para buscar en los encabezados de la solicitud, las cargas útiles y las respuestas, sigue estos pasos:

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 Buscar, 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. El panel Red 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 coincidió allí, si la hay.

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

Para obtener más información sobre todas las formas en que puedes buscar en DevTools, consulta Búsqueda: Cómo encontrar texto en todos los recursos cargados.

Filtrar solicitudes

Filtra las solicitudes por propiedades

Usa el cuadro Filtro para filtrar las solicitudes por propiedades, como el dominio o el tamaño de la solicitud, o ingresa una cadena de texto para que coincida con la URL, el dominio, el nombre de host o el puerto de la solicitud (por ejemplo, localhost o example.com), incluidas las solicitudes del mismo sitio.

Si no ves el cuadro, es probable que la barra Filtros esté oculta. Consulta Oculta la barra de filtros.

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

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

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

• cookie-domain: Muestra los recursos que establecen un dominio de cookie 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 cookie específica.
• cookie-value: Muestra los recursos que establecen un valor de cookie específico.
• domain: Solo se muestran los 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 autocompletado 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 Tiene anulaciones correspondiente a la tabla de solicitudes.
• has-response-header: Muestra los recursos que contienen el encabezado de respuesta HTTP especificado. Las Herramientas para desarrolladores completan el menú desplegable de autocompletar con todos los encabezados de respuesta que encontró.
• is. Usa is:running para encontrar recursos de WebSocket.
• larger-than: Muestra los recursos que son más grandes que el tamaño especificado, en bytes. Establecer un valor de 1000 equivale a establecer un valor de 1k.
• method: Muestra los recursos que se recuperaron con un tipo de método HTTP específico. DevTools completa el menú desplegable de autocompletar con todos los métodos HTTP que encontró.
• mime-type: Muestra recursos de un tipo de MIME especificado. DevTools propaga el menú desplegable de autocompletado con todos los tipos de MIME que encontró.
• 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. Mostrar recursos de un tipo de recurso, por ejemplo, una imagen DevTools propaga el menú desplegable de autocompletado con todos los tipos de recursos que encontró.
• response-header-set-cookie: Se muestran los encabezados Set-Cookie sin procesar en la pestaña Problemas. Las cookies con formato incorrecto y encabezados Set-Cookie incorrectos se marcarán en el panel de red.
• scheme: Muestra los recursos recuperados a través de HTTP sin protección (scheme:http) o HTTPS protegido (scheme:https).
• set-cookie-domain: Muestra los recursos que tienen un encabezado Set-Cookie con un atributo Domain que coincide con el valor especificado. DevTools completa automáticamente la función de autocompletar con todos los dominios de cookies que encontró.
• 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 completan automáticamente el campo con todos los nombres de cookies que encontraron.
• set-cookie-value: Muestra los recursos que tienen un encabezado Set-Cookie con un valor que coincide con el valor especificado. Las Herramientas para desarrolladores propagan la función de autocompletar con todos los valores de cookies que encontraron.
• status-code. Solo muestra los recursos cuyo código de estado HTTP coincida con el código especificado. DevTools propaga el menú desplegable de autocompletado con todos los códigos de estado que encontró.
• url: Muestra los recursos que tienen un url que coincide con el valor especificado.

Filtrar solicitudes por tipo

Para filtrar las solicitudes por tipo de recurso, haz clic en los botones Todo, Fetch/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 presionada la tecla Comando (Mac) o Control (Windows, Linux) y, luego, haz clic en varios filtros de tipo.

Cómo filtrar solicitudes por hora

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 muestra cualquier solicitud que haya estado activa durante el período destacado.

Ocultar URLs de datos

Las URLs de datos son archivos pequeños incorporados 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 Filtros, selecciona Más filtros > check_box Ocultar URLs de datos.

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

Ocultar las URLs de extensión

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

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

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

Mostrar únicamente 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, selecciona Más filtros > check_box Cookies de respuesta bloqueadas.

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

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

Además, el panel Network muestra un ícono de advertencia junto a una solicitud con cookies bloqueadas debido a las funciones experimentales de Chrome o a la configuración. Coloca el cursor sobre el ícono para ver una sugerencia 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 Requests, 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 las solicitudes de terceros

Para filtrar todo, excepto las solicitudes con un origen que difiera del origen de la página, en la barra de acciones Filtros, selecciona Más filtros > check_box Solicitudes de terceros.

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

Solicitudes de ordenamiento

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

Ordenar por columna

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

Ordenar por fase de actividad

Para cambiar la forma en que la Cascada ordena las solicitudes, haz clic con el botón derecho en el encabezado de la tabla Solicitudes, coloca el cursor sobre Cascada y selecciona una de las siguientes opciones:

• Hora de inicio La primera solicitud que se inició se encuentra en la parte superior.
• Tiempo de respuesta: La primera solicitud que comenzó a descargarse se encuentra en la parte superior.
• Hora de finalización. La primera solicitud que se completó se encuentra en la parte superior.
• Duración total. La solicitud con la configuración de conexión y la solicitud o respuesta más cortas se encuentra en la parte superior.
• Latencia. La solicitud que esperó menos tiempo para obtener una respuesta se encuentra en la parte superior.

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

En este ejemplo, la cascada se ordena por duración total. La parte más clara de cada barra es el tiempo que se pasa esperando. La parte más oscura es el tiempo que se dedica a descargar bytes.

Analiza las solicitudes

Mientras las Herramientas para desarrolladores estén abiertas, se registrarán todas las solicitudes en el panel de Red. Usa el panel Red para analizar las solicitudes.

Visualiza un registro de solicitudes

Usa la tabla Solicitudes para ver un registro de todas las solicitudes realizadas mientras las Herramientas para desarrolladores estuvieron abiertas. Si haces clic en las solicitudes o colocas el cursor sobre ellas, se mostrará más información.

De forma predeterminada, en la tabla Solicitudes, se muestran las siguientes columnas:

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

• Estado. En esta columna, se pueden mostrar los siguientes valores:

  

  • Código de estado HTTP, por ejemplo, 200 o 404.
  • CORS error para las solicitudes que fallaron debido al uso compartido de recursos de origen cruzado (CORS).
  • (blocked:origin) para las solicitudes con encabezados configurados de forma incorrecta. 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: Es el tipo de MIME del recurso solicitado.

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

  • Analizador. Analizador HTML de Chrome.
  • Redirigir Un redireccionamiento HTTP.
  • Script. Es una función de JavaScript. En este caso, el panel Red proporciona un vínculo a la línea correspondiente en el archivo de origen.
  • Sugerencias iniciales. Es una respuesta HTTP 103 Early Hints.
  • Otro Algún otro proceso o acción, como navegar a una página con un vínculo o ingresar una URL en la barra de direcciones.

• Size (Tamaño). Es el tamaño combinado de los encabezados de respuesta y el cuerpo de la respuesta, según lo que 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. Un desglose visual de la actividad de cada solicitud.

Agregar o eliminar columnas

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

Puedes agregar o quitar las siguientes columnas adicionales:

• Solicitud núm. : Es el orden absoluto de inicio de la solicitud, que, de forma predeterminada, se fija en la primera posición de la tabla Solicitudes.
• Ruta de acceso. Es la parte de la ruta de acceso de la URL.
• URL. Es la URL completa de la solicitud.
• Método. Método HTTP de la solicitud (por ejemplo, GET, POST, PUT, DELETE)
• Protocol. Es el protocolo de la solicitud (por ejemplo, h2 para HTTP/2, h3 para HTTP/3, etcétera).
• Esquema. Es la parte del esquema de la URL.
• Dominio. Es la parte del dominio de la URL.
• Dirección remota. La dirección IP remota y el puerto de la solicitud.
• Espacio de direcciones remoto. Es el espacio de direcciones remoto de la solicitud. Public para IPs públicas y Private para IPs privadas.
• Espacio de direcciones del iniciador Es el espacio de direcciones del iniciador de la solicitud. Igual que el trabajo remoto.
• Cookies. Es la cantidad de cookies en la solicitud.
• Establecer cookies Es la cantidad de cookies en la respuesta.
• Priority. Es la prioridad de la solicitud.
• ID de conexión. Es el ID de conexión de la solicitud en una sesión del cliente, si corresponde.
• Tiene anulaciones. Indica si la solicitud tiene anulaciones (sí, no, contenido o encabezados).
• Está relacionado con los anuncios. ¿Verdadero o falso?
• Precargado. Indica si la solicitud se inició con la precarga especulativa.
• Bloqueo de renderización Indica si la solicitud bloquea la renderización, si podría bloquearla o si no la bloquea.
• Cascada. Un desglose visual de la actividad de cada solicitud.

Agrega columnas personalizadas

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

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

Agrupa las solicitudes por marcos intercalados

Si los marcos intercalados de una página inician muchas solicitudes, puedes agruparlas para que el registro de solicitudes sea más fácil de leer.

Para agrupar las solicitudes por iframes, abre Configuración dentro del panel Red y marca check_box Agrupar por marco.

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

Visualiza el tiempo de las solicitudes en relación con las demás

Usa la cascada para ver el tiempo de las solicitudes en relación con las demás. De forma predeterminada, la cascada se organiza según la hora de inicio de las solicitudes. Por lo tanto, las solicitudes que están más a la izquierda comenzaron antes que las que están más a la derecha.

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

Analiza 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 Nombre de la tabla Solicitudes, haz clic en la URL de la conexión de WebSocket.
2. Abre la pestaña Mensajes. En la tabla, se muestran los últimos 100 mensajes.

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

La tabla contiene tres columnas:

• Data. Es la carga útil del mensaje. Si el mensaje es de texto sin formato, se muestra aquí. En el caso de los códigos de operación binarios, en esta columna se muestran el nombre y el código de operación. Se admiten los siguientes códigos de operación: Marco de continuación, marco binario, marco de cierre de conexión, marco de ping y marco de pong.
• Longitud. Es la longitud de la carga útil del mensaje, en bytes.
• Hora. Es la hora en que se recibió o envió el mensaje.

Los mensajes se codifican por color 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 operación de WebSocket son de color amarillo claro.
• Los errores son de color rojo claro.

Analiza eventos en un flujo

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 transmita eventos.
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 que se encuentra en la parte superior de la pestaña EventStream.

Para borrar la lista de eventos capturados, haz clic en block Clear.

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

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

1. Selecciona una solicitud en la columna Nombre de la tabla Solicitudes.
2. Abre la pestaña Vista previa.

Esta pestaña es más ú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. Selecciona una solicitud en la columna Nombre de la tabla Solicitudes.
2. Abre la pestaña Respuesta.

Para las respuestas binarias o comprimidas, selecciona un método de decodificación (Base64, Hex o UTF-8) en el menú desplegable que se encuentra en la parte inferior de la pestaña Response.

Visualiza los encabezados HTTP

Para ver los datos del encabezado HTTP de una solicitud, sigue estos pasos:

1. Selecciona una solicitud en la columna Nombre de la tabla Solicitudes.
2. Abre la pestaña Encabezados y desplázate hacia abajo hasta las secciones General, Encabezados de respuesta, Encabezados de la solicitud y, de manera opcional, Encabezados de sugerencias tempranas.

En la sección General, las Herramientas para desarrolladores te muestran 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 el valor de un encabezado y hacer clic en el botón editar Editar para anular el encabezado de respuesta de forma local.

Cómo ver la fuente del encabezado HTTP

De forma predeterminada, en la pestaña Encabezados, se muestran los nombres de los encabezados en orden alfabético. Para ver los nombres de los encabezados HTTP en el orden en que se recibieron, haz lo siguiente:

1. Abre la pestaña Encabezados de la solicitud que te interesa. Consulta Cómo ver los encabezados HTTP.
2. Haz clic en view source, junto a la sección encabezado de la solicitud o encabezado de respuesta.

Advertencia de encabezados provisionales

A veces, la pestaña Encabezados 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 la consola.

Por motivos de seguridad, las Herramientas para desarrolladores también pueden mostrar solo encabezados provisionales.

Ver la 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 la fuente de la carga útil

De forma predeterminada, las Herramientas para desarrolladores muestran la carga útil en un formato legible por humanos.

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

Visualiza los parámetros de consulta y de formulario codificados en URL

De forma predeterminada, las Herramientas para desarrolladores muestran los parámetros de la cadena de consulta y los datos del formulario en un formato decodificado de URL. Para activar o desactivar la codificación de URL de los argumentos en la pestaña Carga útil, haz clic en Ver codificación de URL o Ver decodificación.

Visualiza cargas útiles binarias y comprimidas

Para las cargas útiles de solicitudes binarias o comprimidas, selecciona un método de decodificación (Base64, Hex o UTF-8) en el menú desplegable que se encuentra en la parte inferior de la pestaña Payload.

Cómo ver las cookies

Para ver las cookies enviadas en el encabezado HTTP de una solicitud, sigue estos pasos:

1. Selecciona una solicitud en la columna Nombre de la tabla Solicitudes.
2. Abre la pestaña Cookies.

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

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

Cómo ver las sesiones vinculadas a dispositivos

En la pestaña Sesiones vinculadas al dispositivo, se muestra la información de aplazamiento (actualización) asociada con la solicitud seleccionada para todas las sesiones vinculadas al dispositivo activas en un sitio.

Para ver la información de aplazamiento (actualización), sigue estos pasos:

1. Selecciona una solicitud en la columna Nombre de la tabla Solicitudes.
2. Abre la pestaña Sesiones vinculadas al dispositivo.

La pestaña Sesiones vinculadas al dispositivo solo se muestra para las solicitudes pertinentes con cookies. En la pestaña, se enumeran todas las sesiones activas vinculadas al dispositivo y se indica si las sesiones aplazaron la solicitud (y, si no lo hicieron, por qué). Las opciones de aplazamiento posibles son las siguientes:

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

Cómo ver el desglose de los tiempos de una solicitud

Para ver el desglose de los tiempos de una solicitud, sigue estos pasos:

1. Selecciona una solicitud en la columna Nombre de la tabla Solicitudes.
2. Abre la pestaña Timing.

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

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

Obtén una vista previa de un desglose de tiempos

Para obtener una vista previa del desglose de tiempos de una solicitud, coloca el cursor sobre la entrada de la solicitud en la columna Waterfall de la tabla Requests.

Consulta Cómo ver el desglose de los tiempos de una solicitud para acceder a estos datos sin necesidad de colocar el cursor sobre ellos.

Explicación de las fases de desglose de tiempos

A continuación, se incluye más información sobre cada una de las fases que puedes ver en la pestaña Tiempo:

• Filas. El navegador pone en cola las solicitudes antes de que se inicie la conexión y en los siguientes casos:
  • Hay solicitudes con mayor prioridad. La prioridad de la solicitud se determina según factores como el tipo de recurso y su ubicación dentro del documento. Para obtener más información, lee la sección sobre la prioridad de los recursos de la guía de fetchpriority.
  • Ya hay seis conexiones TCP abiertas para este origen, que es el límite. (Se aplica solo a HTTP/1.0 y HTTP/1.1).
  • El navegador asigna espacio brevemente en la memoria caché del disco.
• Detenido. La solicitud podría detenerse después de que se inicie la conexión por cualquiera de los motivos descritos en En cola.
• 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 los reintentos de TCP, y negociando un SSL.
• Negociación de proxy. El navegador está negociando la solicitud con un servidor proxy.
• Se envió la solicitud. Se está enviando la solicitud.
• Preparación de ServiceWorker. El navegador está iniciando el service worker.
• Solicitud a ServiceWorker. La solicitud se envía al service worker.
• Espera (TTFB) El navegador está esperando el primer byte de una respuesta. TTFB significa Time To First Byte (tiempo hasta el primer byte). Este tiempo incluye 1 ida y vuelta de latencia y el tiempo que tardó el servidor en preparar la respuesta.
• Descarga de contenido. El navegador recibe 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 más grandes de lo esperado podrían indicar una red lenta o que el navegador está ocupado realizando otro trabajo que retrasa la lectura de la respuesta.

Cómo ver los iniciadores y las dependencias

Para ver los iniciadores y las dependencias de una solicitud, mantén presionada la tecla Mayúsculas y coloca el cursor sobre la solicitud en la tabla Requests. Las Herramientas para desarrolladores colorean los iniciadores de verde y las dependencias de rojo.

Cuando la tabla Requests se ordena cronológicamente, la primera solicitud verde que se encuentra sobre la solicitud sobre la que se desplaza el cursor es el iniciador de la dependencia. Si hay otra solicitud verde por encima de esa, esa solicitud superior es la iniciadora de la iniciadora. Y así sucesivamente.

Cómo ver los eventos de carga

Las Herramientas para desarrolladores muestran el tiempo de los eventos DOMContentLoaded y load en varios lugares del panel Red. El evento DOMContentLoaded es de color azul y el evento load es de color rojo.

Consulta la cantidad total de solicitudes

La cantidad total de solicitudes se indica en la barra de estado que se encuentra en la parte inferior del panel Red.

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 ubicada en la parte inferior del panel Network.

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

Visualiza el seguimiento de pila que causó una solicitud

Cuando una instrucción de JavaScript hace que se solicite un recurso, coloca el cursor sobre la columna Iniciador para ver el seguimiento de pila que lleva a la solicitud.

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

Selecciona Configuración > Filas de solicitudes grandes y, luego, observa el valor inferior de la columna Tamaño.

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

Exporta datos de solicitudes

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

Guarda 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 específico de campos.

Para reducir las posibilidades de que se filtre información sensible de forma accidental, puedes exportar de forma predeterminada el registro de red "limpio" 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 todos los elementos [de la lista] como HAR (limpios) o Guardar todos los elementos [de la lista] como HAR (con datos sensibles).

  

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

  Para exportar con datos sensibles, primero activa settings Configuración > Preferencias > Red > check_box Permitir generar HAR con datos sensibles, luego haz clic en el botón download Exportar y selecciona Exportar HAR (con datos sensibles) en el menú desplegable.

  

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

• Arrastra y suelta el archivo HAR en la tabla Solicitudes.
• Haz clic en Subir Importar HAR en la barra de acciones que se encuentra en la parte superior del panel Red.

Copia una solicitud, un conjunto filtrado de solicitudes o todas ellas en el portapapeles

En la columna Nombre de la tabla Solicitudes, haz clic con el botón derecho en una solicitud, coloca el cursor 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 un comando cURL.
• Copiar como PowerShell. Copia la solicitud como un comando de PowerShell.
• Copiar como recuperación. Copia la solicitud como una llamada de recuperación.
• Copiar como fetch (Node.js). Copia la solicitud como una llamada de recuperación de Node.js.
• Copiar como elemento de precarga. Copia la solicitud como una etiqueta HTML <link rel="preload">.
• Copiar respuesta Copia el cuerpo de la respuesta en el portapapeles.
• Copiar el 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.
• Copiar todo como cURL Copia todas las solicitudes como una cadena de comandos cURL.
• Copiar todo como PowerShell Copia todas las solicitudes como una cadena de comandos de PowerShell.
• Copiar todo como fetch. Copia todas las solicitudes como una cadena de llamadas de recuperación.
• Copiar todo como fetch (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) Copiar 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 una de las siguientes opciones:

• Copiar todas las URLs incluidas: Copia las URLs de todas las solicitudes filtradas en el portapapeles.
• Copiar todos los comandos incluidos como cURL. Copia todas las solicitudes filtradas como una cadena de comandos cURL.
• Copiar todos los comandos incluidos como PowerShell. Copia todas las solicitudes filtradas como una cadena de comandos de PowerShell.
• Copiar todos los comandos incluidos como fetch. Copia todas las solicitudes filtradas como una cadena de llamadas de recuperación.
• Copia todos los comandos incluidos como fetch (Node.js). Copia todas las solicitudes filtradas como una cadena de llamadas de recuperación de Node.js.
• Copiar todos los elementos de la lista como HAR (limpios). Copia todas las solicitudes filtradas como datos HAR sin datos sensibles, como los encabezados Cookie, Set-Cookie y Authorization.
• Copiar todos los elementos que figuran como HAR (con datos sensibles). Copia todas las solicitudes filtradas como datos de HAR con datos sensibles.

Cómo cambiar el diseño del panel Network

Expande o contrae secciones de la IU del panel Red para enfocarte en lo que te importa.

Ocultar la barra de acciones de filtros

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

Usa filas de solicitud grandes

Usa filas grandes cuando quieras 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 se usan filas grandes. Por ejemplo, el valor inferior de la columna Tamaño es el tamaño sin comprimir de una solicitud, y la columna Prioridad muestra la prioridad de recuperación inicial (valor inferior) y final (valor superior).

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

Oculta el segmento Overview

De forma predeterminada, las Herramientas para desarrolladores muestran la pista Descripción general. Abre Configuración y desmarca la casilla de verificación Mostrar vista general para ocultarla.