Referencia de las funciones de red

Descubre nuevas formas de analizar cómo se carga tu página en esta referencia exhaustiva 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 esté abierto.

Detener la grabación de solicitudes de red

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

• Haz clic en Stop recording network log en el panel Red. Se volverá gris para indicar que DevTools ya no está grabando 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.

Cómo guardar solicitudes en todas las cargas de páginas

Para guardar las solicitudes en las cargas de página, marca la casilla de verificación Guardar el registro en el panel Red. Las Herramientas para desarrolladores guardan todas las solicitudes hasta que inhabilitas la opción Preserve log.

Cómo capturar 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 en el panel Red y marca Capturar capturas de pantalla.

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

Una vez que se tomen, podrás interactuar con las capturas de pantalla de las siguientes maneras:

• Coloca el cursor sobre una captura de pantalla para ver el punto en el que se capturó. Aparece una línea amarilla en el cronograma de Resumen.
• Haz clic en la miniatura de una captura de pantalla para filtrar las solicitudes que se produjeron después de que se capturó.
• Haz doble clic en una miniatura para acercarla.

Cómo 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

Inhabilita la caché del navegador para emular a un visitante nuevo

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

Inhabilita la caché del navegador desde el panel Condiciones de red

Si quieres inhabilitar la caché mientras trabajas en otros paneles de DevTools, 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 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.

Emular sin conexión

Hay 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 red junto a la casilla de verificación Inhabilitar caché.

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

Emula conexiones de red lentas

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

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

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 > Limitación.

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

   

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

Limita las conexiones de WebSocket

Además de las solicitudes HTTP, DevTools 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 Messages y verifica la diferencia de tiempo entre los mensajes enviados y los que se repiten con y sin limitación. Por ejemplo:

Emula conexiones de red lentas desde el panel Condiciones de red

Si deseas reducir la velocidad de la conexión de red mientras trabajas en otros paneles de DevTools, 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ú 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 Solicitudes y selecciona Borrar cookies del navegador.

Anula los encabezados de respuesta HTTP

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

Anula el usuario-agente

Para anular el usuario-agente de forma manual, sigue estos pasos:

1. Haz clic en el ícono para abrir el panel lateral Condiciones de red.
2. Borra la opción Seleccionar automáticamente.
3. Elige una opción de usuario-agente del menú o ingresa uno personalizado 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

Cómo filtrar solicitudes por propiedades

Usa el cuadro Filtro para filtrar las solicitudes por 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.

Para usar varias propiedades de forma simultánea, separa cada una 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 equivalen a operaciones AND. No se admiten operaciones O.

A continuación, se muestra 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 muestra recursos del dominio especificado. Puedes 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 muestra un menú desplegable de autocompletado propagado 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. DevTools propaga el menú desplegable de autocompletado con todos los encabezados de respuesta que encontró.
• is. Usa is:running para encontrar recursos 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 a través de un tipo de método HTTP especificado. Las Herramientas para desarrolladores completan el menú desplegable de autocompletado 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: Muestra 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. Muestra 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 no protegido (scheme:http) o HTTPS protegido (scheme:https).
• set-cookie-domain: Muestra los recursos que tienen un encabezado Set-Cookie con un atributo Domain que coincida con el valor especificado. DevTools propaga el autocompletado 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. DevTools propaga la función de autocompletar con todos los nombres de cookies que encontró.
• set-cookie-value: Muestra los recursos que tienen un encabezado Set-Cookie con un valor que coincida con el valor especificado. DevTools propaga el autocompletado con todos los valores de cookies que encontró.
• status-code. Muestra solo los recursos cuyo código de estado HTTP coincida con el código especificado. DevTools propaga el menú desplegable de autocompletar con todos los códigos de estado que encontró.
• url: Muestra los recursos que tienen un url que coincide con el valor especificado.

Cómo filtrar solicitudes por tipo

Para filtrar las 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 aparezca 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 Comando (Mac) o Control (Windows, Linux) y, luego, haz clic en varios filtros de tipo.

Cómo filtrar solicitudes por hora

Arrastra el cursor hacia la izquierda o la derecha en el cronograma de Descripción general para mostrar solo las solicitudes que estuvieron activas durante ese período. El filtro es inclusivo. Se mostrará cualquier solicitud que estuvo 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 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 marcas experimentales o la configuración de Chrome. Coloca el cursor sobre el ícono para ver un cuadro de información 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 las 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.

Cómo ordenar solicitudes

De forma predeterminada, las solicitudes de la tabla Solicitudes se ordenan por hora 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.

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ó está 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 finalizó está 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ó el menor tiempo para recibir una respuesta se encuentra en la parte superior.

En estas descripciones, se da por sentado 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 invertirá 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 pasó esperando. La parte más oscura es el tiempo dedicado a descargar bytes.

Cómo analizar solicitudes

Mientras DevTools esté abierto, registrará todas las solicitudes en el panel Red. Usa el panel Red para analizar las solicitudes.

Cómo ver un registro de solicitudes

Usa la tabla Solicitudes para ver un registro de todas las solicitudes realizadas mientras DevTools estaba abierto. Si haces clic en las solicitudes o colocas el cursor sobre ellas, se revelará más información al respecto.

La tabla Solicitudes muestra las siguientes columnas de forma predeterminada:

• Name. El nombre del archivo o un 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 las 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: Es el tipo MIME del recurso solicitado.

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

  • Analizador. Es el analizador HTML de Chrome.
  • Redireccionamiento: Un redireccionamiento HTTP
  • Secuencia de comandos. Una función de JavaScript.
  • Otro. Cualquier 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 más el cuerpo de la respuesta, tal como lo 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 ocultarlo o mostrarlo. Las opciones que se muestran tienen marcas de verificació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.

Agrega 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 Solicitudes y selecciona Encabezados de respuesta > Administrar columnas de encabezado.
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 agruparlos para que el registro de solicitudes sea más amigable.

Para agrupar las solicitudes por iframes, abre Configuración