Descubre nuevas formas de analizar cómo se carga tu página en esta referencia integral de las Herramientas para desarrolladores de Chrome. las funciones de análisis de red.
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 Detener la grabación del registro de red.
en el panel Red. Se vuelve gris para indicar que Herramientas para desarrolladores ya no está registrando solicitudes.
- Presiona Command > + E (Mac) o Control + E (Windows y Linux) mientras el panel Red está enfocado.
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 las solicitudes entre cargas de páginas, marca la casilla de verificación Guardar el registro en el panel Red. Herramientas para desarrolladores guarda todas las solicitudes hasta que inhabilites Guardar el registro.
Cómo tomar capturas de pantalla durante la carga de la 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 la opción Tomar capturas de pantalla.
Vuelve a cargar la página mientras el panel Red esté enfocado para tomar capturas de pantalla.
Una vez hechas las capturas, puedes interactuar con ellas de las siguientes maneras:
- Coloca el cursor sobre una captura de pantalla para ver en qué momento se tomó. Una línea amarilla aparece en el panel Overview.
- Haz clic en la miniatura de la captura de pantalla para filtrar las solicitudes que se produjeron capturada.
- Haz doble clic en una miniatura para acercarla.
Volver a reproducir la solicitud XHR
Para volver a reproducir una solicitud XHR, realiza 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 (Volver a reproducir XHR).
Cambia el comportamiento de carga
Inhabilita 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 Inhabilitar caché. Herramientas para desarrolladores inhabilita la caché del navegador. De esta forma, se emula con mayor precisión la experiencia del usuario que accede por primera vez, 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 de condiciones de red
Si quieres inhabilitar la caché mientras trabajas en otros paneles de Herramientas para desarrolladores, usa la opción Condiciones de red. panel lateral.
- Haz clic en el ícono
para abrir el panel lateral Network Conditions.
- Marca o desmarca la casilla de verificación Inhabilitar caché.
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 Solicitudes y, luego, Selecciona Borrar caché del navegador.
Emular sin conexión
Hay una nueva clase de aplicaciones web, llamada Aplicaciones web progresivas, que pueden funcionar sin conexión con con la ayuda de los service workers. Cuando crees este tipo de app, es útil poder para simular con rapidez 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 Network throttling junto a la casilla de verificación Inhabilitar caché.
Herramientas para desarrolladores muestra un ícono de advertencia junto a la pestaña Red para recordarte que el acceso sin conexión está habilitado.
Emula 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 Throttling en la barra de acciones de la parte superior.
Herramientas para desarrolladores muestra un ícono de advertencia de advertencia junto al panel de Red para recordarte que la limitación está habilitada.
Crea perfiles de limitación personalizados
Además de los ajustes predeterminados, como la conexión 4G lenta o rápida, también puedes agregar perfiles de limitación personalizados:
- Abre el menú Regulación y selecciona Personalizado > Agregar...
- Configura un nuevo perfil de limitación como se describe en configuración Configuración > Regulación.
En el panel Red, selecciona tu perfil nuevo en el menú desplegable Regulación.
Las Herramientas para desarrolladores muestran un ícono de advertencia junto al panel Red para recordarte que la limitación está habilitada.
Limitar 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:
- Inicia una conexión nueva, por ejemplo, con una herramienta de prueba.
- En el panel Red, selecciona No throttling y envía un mensaje a través de la conexión.
- Crea un perfil de limitación personalizado muy lento, por ejemplo,
10 kbit/s
. Un perfil tan lento te ayudará a notar la diferencia. - En el panel Red, selecciona el perfil y envía otro mensaje.
- 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 limitar la conexión de red mientras trabajas en otros paneles de Herramientas para desarrolladores, usa el Panel lateral Network conditions.
- Haz clic en el ícono
para abrir el panel lateral Network Conditions.
- 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 Solicitudes y selecciona Borra las cookies del navegador.
Anula los encabezados de respuesta HTTP
Consulta Anula archivos y encabezados de respuesta HTTP de forma local.
Anular el usuario-agente
Para anular manualmente el usuario-agente, haz lo siguiente:
- Haz clic en el ícono
para abrir el panel lateral Network Conditions.
- Borra Seleccionar automáticamente.
- 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 la solicitud, las cargas útiles y las respuestas, haz lo siguiente:
Presiona la siguiente combinación de teclas para abrir la pestaña Buscar a la derecha:
- En macOS, Command + F.
- En Windows o Linux, presiona Control + F.
En la pestaña Buscar, ingresa tu consulta 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 expresiones regulares, respectivamente.
Haz clic en uno de los resultados de la búsqueda. El panel Network destaca en amarillo la solicitud y la cadena que coincidió en las pestañas Headers, Paload o Response.
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 de buscar en Herramientas para desarrolladores, consulta Búsqueda: Encuentra texto en todos los recursos cargados.
Filtrar solicitudes
Filtrar solicitudes por propiedades
Usa el cuadro Filtro para filtrar las solicitudes por propiedades, como dominio o tamaño de la para cada solicitud.
Si no ves el cuadro, es probable que el panel Filters esté oculto. Consulta Cómo ocultar el panel de Filtros.
Para invertir el filtro, marca la casilla de verificación Invertir junto a la casilla Filtro.
Puedes usar varias propiedades simultáneamente si separas cada propiedad con un espacio. Para
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 las 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
. Las Herramientas para desarrolladores muestran un menú desplegable de autocompletar con todos los dominios que haya encontrado.has-overrides
Muestra las solicitudes que anularoncontent
,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. Herramientas para desarrolladores propaga el menú desplegable de autocompletar con todos los encabezados de respuesta que tiene. que encuentran.is
Usais:running
para encontrar recursosWebSocket
.larger-than
Muestra recursos de tamaño superior al especificado, en bytes. Establece un valor de1000
equivale a configurar un valor de1k
.method
Muestra los recursos que se recuperaron con un tipo de método HTTP especificado. Se propagan las Herramientas para desarrolladores el menú desplegable de Autocomplete con todos los métodos HTTP que haya encontrado.mime-type
Muestra los recursos de un tipo de MIME especificado. Herramientas para desarrolladores propaga el menú desplegable de autocompletar con todos los tipos de MIME que encuentre.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. Herramientas para desarrolladores completa Menú desplegable de autocompletar con todos los tipos de recursos que encontró.response-header-set-cookie
Muestra encabezados Set-Cookie sin procesar en la pestaña Problemas. Cookies con formato incorrecto con encabezadosSet-Cookie
incorrectos se marcarán en el panel Red.scheme
Mostrar recursos recuperados a través de HTTP no protegido (scheme:http
) o HTTPS protegido (scheme:https
).set-cookie-domain
Mostrar los recursos que tienen un encabezadoSet-Cookie
con un atributoDomain
que coincida con el valor especificado. Las Herramientas para desarrolladores propagan el autocompletado con todas las cookies. dominios que encontró.set-cookie-name
Muestra los recursos que tienen un encabezadoSet-Cookie
con un nombre que coincide con el un valor específico. Herramientas para desarrolladores propaga el menú desplegable de autocompletar con todos los nombres de las cookies que contiene. que encuentran.set-cookie-value
Mostrar los recursos que tienen un encabezadoSet-Cookie
con un valor que coincide el valor especificado. Herramientas para desarrolladores propaga el menú desplegable de autocompletar con todos los valores de las cookies que contiene. que encuentran.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 encontrados.url
Muestra los recursos que tienen unurl
que coincide con el valor especificado.
Filtrar solicitudes por tipo
Para filtrar solicitudes por tipo de solicitud, haz clic en Todas, Explorar/XHR, JS, CSS, Img, Media y Fuente, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest, o bien Otro (cualquier otro tipo que no se enumere aquí) botones del panel Network.
Si no ves estos botones, es probable que el panel Filters esté oculto. Consulta Cómo ocultar los filtros del panel.
Para habilitar varios tipos de filtros simultáneamente, mantén presionada la tecla Comando (Mac) o Control (Windows, Linux) y y, luego, haz clic.
Filtrar solicitudes por tiempo
Arrastra hacia la izquierda o la derecha sobre el panel Overview para mostrar solo las solicitudes que estuvieron activas durante durante ese plazo. El filtro es inclusivo. Cualquier solicitud que estuvo activa durante el tiempo destacado se que se muestra.
Ocultar URLs de datos
Las URL de datos son archivos pequeños incorporados en otros documentos. Cualquier solicitud que veas en la
La tabla de Requests que comienza con data:
es una URL de datos.
Para ocultar estas solicitudes, marca Ocultar URLs de datos.
La barra de estado en la parte inferior muestra la cantidad de solicitudes mostradas del total.
Ocultar las URLs de extensión
Para enfocarte en el código que creas, puedes filtrar las solicitudes irrelevantes enviadas por extensiones que hayas instalado en Chrome. Las solicitudes de extensión tienen URLs que comienzan con chrome-extension://
.
Para ocultar las solicitudes de extensión, marca Ocultar las URLs de extensión.
La barra de estado en la parte inferior muestra la cantidad de solicitudes mostradas del total.
Mostrar únicamente solicitudes con cookies de respuesta bloqueadas
Para filtrar todo, excepto las solicitudes con cookies de respuesta bloqueadas por cualquier motivo, marca Cookies de respuesta bloqueadas. Pruébala en esta página de demostración.
La barra de estado en la parte inferior muestra la cantidad de solicitudes mostradas del total.
Para averiguar el motivo por el que se bloqueó una cookie de respuesta, selecciona la solicitud, abre la pestaña Cookies y coloca el cursor sobre el ícono de información .
Además, el panel Red muestra un ícono de advertencia de advertencia junto a una solicitud que se vio afectada por la eliminación gradual de las cookies de terceros o que está exenta de ella. 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, consulta Solicitudes bloqueadas. Para probar esto, puedes usar la pestaña del panel lateral Bloqueo de solicitudes de red.
La tabla Solicitudes destaca las solicitudes bloqueadas en rojo. La barra de estado en la parte inferior muestra la cantidad de solicitudes mostradas del total.
Mostrar solo solicitudes de terceros
Para filtrar todo, excepto las solicitudes cuyo origen difiere del origen de la página, consulta solicitudes de terceros. Pruébala en esta página de demostración.
La barra de estado en la parte inferior muestra la cantidad de solicitudes mostradas del total.
Ordenar solicitudes
De forma predeterminada, las solicitudes de la tabla Requests se ordenan por tiempo de inicio, pero puedes ordenarlas. con otros criterios.
Ordenar por columna
Haz clic en el encabezado de cualquier columna de la tabla Solicitudes para ordenar las solicitudes en función de esa columna.
Ordenar por fase de actividad
Para cambiar la forma en que Waterfall ordena las solicitudes, haz clic con el botón derecho en el encabezado de la tabla Solicitudes y coloca el cursor 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 finalizó se encuentra en la parte superior.
- Duración total. La solicitud con la menor configuración de conexión y solicitud / respuesta se encuentra en en la parte superior.
- Latencia. La solicitud que esperó menos tiempo por una respuesta se muestra en la parte superior.
En estas descripciones, se supone que cada opción respectiva se clasifica de más corta a más larga. Hacer clic en el encabezado de la columna Waterfall, se invierte el orden.
En este ejemplo, la cascada está ordenada por duración total. La parte más clara de cada barra es de tiempo que pasaste esperando. La parte más oscura corresponde al tiempo que se dedica a descargar bytes.
Analizar solicitudes
Siempre que Herramientas para desarrolladores esté abierto, registrará todas las solicitudes en el panel Red. Usa el panel Red para analizar 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. Hacer clic o si colocas el cursor sobre las solicitudes, verás más información sobre ellas.
La tabla Solicitudes 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
o404
. CORS error
para las solicitudes fallaron 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 información sobre la herramienta con una pista sobre qué salió mal.(failed)
seguido del mensaje de error.
- Código de estado HTTP, por ejemplo,
Tipo. El tipo de MIME del recurso solicitado.
Iniciador. Los siguientes objetos o procesos pueden iniciar solicitudes:
- Parser: Analizador HTML de Chrome.
- Redireccionamiento. Un redireccionamiento HTTP.
- Secuencia de comandos: Es una función de JavaScript.
- Otro. Es algún otro proceso o acción, como navegar a una página mediante un vínculo o ingresar un URL en la barra de direcciones.
Size (Tamaño). El tamaño combinado de los encabezados de respuesta más el cuerpo de la respuesta, tal como lo entrega el servidor.
Hora. La duración total, desde el inicio de la solicitud hasta la recepción del último byte de la respuesta.
Waterfall. 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 a su lado.
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:
- Haz clic con el botón derecho en el encabezado de la tabla Solicitudes y selecciona Encabezados de respuesta > Administra columnas de encabezado.
- 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 solicitudes por iframe, abre Configuración en el panel Red y marca
Agrupar por marco.
Para ver una solicitud iniciada por un marco intercalado, expándela en el registro de solicitudes.
Cómo ver el momento de las solicitudes en relación con las demás
Usa Waterfall para ver los tiempos de las solicitudes en relación con las demás. De forma predeterminada, el La cascada se organiza según la hora de inicio de las solicitudes. Entonces, las solicitudes que están más a la izquierda comenzaron antes que los 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 Waterfall.
Analiza los mensajes de una conexión de WebSocket
Para ver los mensajes de una conexión de WebSocket, haz lo siguiente:
- En la columna Nombre de la tabla Solicitudes, haz clic en la URL de la conexión de WebSocket.
- 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 debajo de la columna Nombre de la Requests.
La tabla contiene tres columnas:
- Data. Es la carga útil del mensaje. Si el mensaje es texto sin formato, se muestra aquí. Para objetos binarios opcodes, esta columna muestra 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 longitud de la carga útil del mensaje en bytes.
- Hora. Indica 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 de WebSocket son de color amarillo claro.
- Los errores son 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:
- Grabar 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.
- 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:
- Haz clic en la URL de la solicitud, en la columna Name de la tabla Requests.
- 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:
- Haz clic en la URL de la solicitud, en la columna Nombre de la tabla Solicitudes.
- Haz clic en la pestaña Respuesta.
Ver encabezados HTTP
Para ver los datos del encabezado HTTP de una solicitud, haz lo siguiente:
- Haz clic en una solicitud de la tabla Solicitudes.
- Abre la pestaña Headers y desplázate hacia abajo hasta General, Response Headers, Request Headers y, de manera opcional, Early Hints Headers.
En la sección General, Herramientas para desarrolladores te 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.
Ver la fuente del encabezado HTTP
De forma predeterminada, la pestaña Encabezados muestra los nombres de los encabezados en orden alfabético. Para ver los nombres de encabezados HTTP en la orden en que se recibieron:
- Abre la pestaña Encabezados de la solicitud que te interesa. Consulta Cómo ver encabezados HTTP.
- Haz clic en Ver fuente, junto a la sección Encabezado de la solicitud o Encabezado de respuesta.
Advertencia de encabezados provisionales
En ocasiones, 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 razones de seguridad, las Herramientas para desarrolladores también pueden 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 los datos del formulario, selecciona una solicitud de la tabla Solicitudes y abre la pestaña Carga útil.
Ver fuente de 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 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.
Ver cookies
Para ver las cookies enviadas en el encabezado HTTP de una solicitud, haz lo siguiente:
- Haz clic en la URL de la solicitud, en la columna Nombre de la tabla Solicitudes.
- Haz clic en la pestaña Cookies.
Para obtener una descripción de cada una de las columnas, consulta Campos.
Para modificar cookies, consulte 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:
- Haz clic en la URL de la solicitud, en la columna Name de la tabla Requests.
- 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 las 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, coloca el cursor sobre la entrada de la solicitud en La columna Waterfall de la tabla Solicitudes
Consulta Cómo ver el desglose de tiempo de una solicitud para conocer una forma de acceder a estos datos sin necesidad de hacerlo que se desplaza por arriba.
Explicación de las fases de desglose de tiempo
Aquí hay más información sobre cada una de las fases que pueden aparecer en la pestaña Timing:
- Fila. El navegador pone en cola las solicitudes antes de que comience la conexión y cuando sucede lo siguiente:
- Hay solicitudes de mayor prioridad.
- Ya hay seis conexiones TCP abiertas para este origen, que es el límite. Se aplica a Solo HTTP/1.0 y HTTP/1.1
- El navegador está asignando espacio brevemente en la caché del disco.
- Suspendida. La solicitud podría detenerse después de que comience la conexión por cualquiera de los motivos descritos en Filas.
- 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 la negociación de una SSL.
- Negociación de proxy. El navegador está negociando la solicitud con un servidor proxy.
- Solicitud enviada. Se está enviando la solicitud.
- Preparación del service worker. 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 significa tiempo hasta el primer byte. Este tiempo incluye un proceso de ida y vuelta de latencia y el tiempo que el servidor tardó en y prepararás 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 empleado en leer el cuerpo de la respuesta. Los valores mayores de lo esperado podrían indicar que la red es lenta o que el navegador está ocupado realizando otras tareas que retrasan la lectura de la respuesta.
Ver iniciadores y 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 Tabla de solicitudes. Las Herramientas para desarrolladores colorean a los iniciadores de verde y las dependencias a rojo.
Cuando la tabla de Solicitudes está ordenada cronológicamente, la primera solicitud verde sobre la solicitud que sobre el que te desplazas es el iniciador de la dependencia. Si hay otra solicitud verde arriba es decir, esa solicitud más alta es el iniciador del iniciador. Y así sucesivamente.
Ver eventos de carga
Las Herramientas para desarrolladores muestran el tiempo de los eventos DOMContentLoaded
y load
en varios lugares de la
Panel Network. El evento DOMContentLoaded
es de color azul, y el evento load
, de color rojo.
Cómo ver la cantidad total de solicitudes
La cantidad total de solicitudes se muestra en el panel Summary, en la parte inferior del panel Network.
Visualiza el tamaño total de los recursos transferidos y cargados
Herramientas para desarrolladores muestra el tamaño total de los recursos transferidos y cargados (sin comprimir) en el panel Resumen, en la parte inferior del panel Red.
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.
Cómo ver 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 Initiator. para ver el seguimiento de pila que lleva a la solicitud.
Visualiza el tamaño sin comprimir de un recurso
Revisa la Configuración > Filas de solicitud grandes y, luego, mira el valor inferior de la columna Tamaño.
En este ejemplo, el tamaño comprimido del documento www.google.com
que se envió a través de la red se
43.8 KB
, mientras que el tamaño sin comprimir era 136 KB
.
Exporta datos de solicitudes
Cómo guardar todas las solicitudes de red en un archivo HAR
HAR (HTTP Archive) 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.
Puedes guardar todas las solicitudes de red en un archivo HAR de dos maneras:
- Haz clic con el botón derecho en cualquier solicitud de la tabla Requests y selecciona Save all as HAR with content.
- Haz clic en
Exportar HAR en la barra de acciones ubicada en la parte superior del panel Red.
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
Importar HAR en la barra de acciones ubicada en la parte superior del panel Red.
Cómo copiar 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 y coloca el cursor sobre Copiar. selecciona una de las siguientes opciones.
Para copiar una sola solicitud, su respuesta o seguimiento de pila, haz lo siguiente:
- Copiar URL. Copia la URL de la solicitud en el portapapeles.
- Copia 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.
- Copia el seguimiento de pila. Copia el seguimiento de pila de la solicitud en el portapapeles.
Para copiar todas las solicitudes, haz lo siguiente:
- Copia todas las URLs. Copiar las URLs de todas las solicitudes en el portapapeles.
- Copia todo como cURL. Copia todas las solicitudes como una cadena de comandos cURL.
- Copia todo como PowerShell. Copia todas las solicitudes como una cadena de comandos de PowerShell.
- Copia 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.
- Copia todo como HAR. Copia todas las solicitudes como datos HAR.
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:
- Copia todas las URLs de la lista. 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 recuperación. 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. Copia todas las solicitudes filtradas como datos HAR.
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 el panel de Filtros
De forma predeterminada, las Herramientas para desarrolladores muestra el panel Filtros. Haz clic en 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 se usan filas grandes. Por ejemplo, el valor inferior de la La columna Size corresponde al tamaño sin comprimir de una solicitud, y la columna Priority muestra la prioridad de recuperación inicial (valor inferior) y la 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, las Herramientas para desarrolladores muestran el segmento Descripción general. Abre Configuración y desmarca la casilla de verificación Mostrar descripción general para ocultarla.