Referencia de características de red

Este artículo es un esquema de las distintas características de la herramienta Red , que se usa para el análisis de red y la inspección de la actividad de red de una página web.

Consulte también Inspeccionar la actividad de red, que es un tutorial paso a paso de la herramienta Red .

Registro de solicitudes de red

De forma predeterminada, DevTools registra todas las solicitudes de red en la herramienta Red , siempre y cuando DevTools esté abierto.

Panel Red

Detener la grabación de solicitudes de red

Para detener la grabación de solicitudes:

  1. En la herramienta Red , haga clic en Detener grabación del registro de red (Detener grabación del registro de red). Se vuelve gris para indicar que DevTools ya no está grabando solicitudes.

  2. Presione Ctrl+E (Windows, Linux) o Command+E (macOS) mientras la herramienta Red está en el foco.

Borrar solicitudes

Haga clic en el botón Borrar (borrar) de la herramienta Red para borrar todas las solicitudes de la tabla Solicitudes.

Botón Borrar

Guardar solicitudes entre cargas de página

Para guardar las solicitudes en las cargas de página, en la herramienta Red , active la casilla Conservar registro :

Casilla Conservar registro

DevTools guarda todas las solicitudes hasta que deshabilita Conservar registro.

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

Puede capturar capturas de pantalla para analizar lo que se muestra para los usuarios mientras espera a que se cargue la página.

Para habilitar capturas de pantalla:

  1. En DevTools, abra la herramienta Red .

  2. En la esquina superior derecha de la herramienta Red , haga clic en el icono Configuración de red (engranaje). Aparece una fila de casillas.

  3. Active la casilla Capturar capturas de pantalla :

Habilitación de

Para capturar una captura de pantalla:

  1. Mientras la herramienta Red tiene el foco, presione Ctrl+F5 Actualizar la página. Captura de pantalla capturada y miniaturas debajo de la fila de casillas.

    Puede interactuar con las capturas de pantalla de la siguiente manera.

  2. Mantenga el puntero sobre una captura de pantalla para mostrar el punto en el que se capturó esa captura de pantalla. En el panel Gráfico de información general se muestra una línea vertical amarilla.

    Mantener el puntero en una captura de pantalla

  3. Haga clic en la miniatura de una captura de pantalla para filtrar las solicitudes que se produjeron después de capturar la captura de pantalla.

  4. Haga doble clic en una miniatura de captura de pantalla para acercar y ver la captura de pantalla.

  5. Presione Esc para cerrar el visor de captura de pantalla.

Cambiar el comportamiento de carga

Emular un visitante por primera vez deshabilitando la caché del explorador

Para emular cómo experimenta el sitio un usuario por primera vez, active la casilla Deshabilitar caché . DevTools deshabilita la caché del explorador. Esta característica emula con mayor precisión la experiencia de un usuario por primera vez, ya que las solicitudes se atienden desde la memoria caché del explorador en las visitas repetidas.

Casilla Deshabilitar caché :

Casilla Deshabilitar caché

Deshabilitación de la caché del explorador en el cajón Condiciones de red

Si desea deshabilitar la memoria caché mientras trabaja en otros paneles de DevTools, use el cajón Condiciones de red:

  1. Abra el cajón Condiciones de red .

  2. Active o desactive la casilla Deshabilitar caché .

Borrar manualmente la memoria caché del explorador

Para borrar manualmente la caché del explorador en cualquier momento, haga clic con el botón derecho en cualquier lugar de la tabla Solicitudes y, a continuación, haga clic en Borrar caché del explorador.

Seleccione Borrar caché del explorador:

Selección de Borrar caché del explorador

Emular sin conexión

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

Para simular una experiencia de red sin conexión, seleccione el menú > desplegable Sin limitaciónValores preestablecidos>sin conexión.

Menú desplegable Sin conexión :

Menú desplegable Sin conexión

Emulación de conexiones de red lentas

Emula slow 3G, fast 3G y otras velocidades de conexión en el menú desplegable Sin limitación .

El menú desplegable Limitación :

Menú desplegable Limitación

Puede elegir entre diferentes valores preestablecidos, como Slow 3G o Fast 3G. Para agregar sus propios valores preestablecidos personalizados, abra el menú Limitación y seleccioneAgregarpersonalizado>.

DevTools muestra un icono de advertencia junto a la herramienta Red para recordarle que la limitación está habilitada.

Consulte también Simulación de una conexión de red más lenta en Inspeccionar actividad de red.

Emulación de conexiones de red lentas desde el cajón condiciones de red

Si desea limitar la conexión de red mientras trabaja en otros paneles de DevTools, use la herramienta de cajón Condiciones de red :

  1. Abra el cajón Condiciones de red .

  2. Seleccione la velocidad de conexión en el menú Limitación .

Borrar manualmente las cookies del explorador

Para borrar manualmente las cookies del explorador en cualquier momento, haga clic con el botón derecho en cualquier lugar de la tabla Solicitudes y, a continuación, seleccione Borrar cookies del explorador.

Seleccionar

Invalidar el agente de usuario

Para invalidar manualmente el agente de usuario:

  1. Abra la herramienta de cajón Condiciones de red .

  2. Desactive la casilla Seleccionar automáticamente .

  3. Seleccione una opción de agente de usuario en el menú o escriba un agente de usuario personalizado en el cuadro de texto.

Establecimiento de sugerencias de cliente del agente de usuario

Si el sitio emplea sugerencias de cliente del agente de usuario, use el panel Condiciones de red para proporcionar sugerencias de cliente de agente de usuario diferentes.

  1. Haga clic con el botón derecho en la página web y seleccione Inspeccionar.

  2. Seleccione Condiciones de red>.

  3. En el panel Agente de usuario, desactive la casilla Usar el explorador predeterminado y, a continuación, seleccione Sugerencias de cliente del agente de usuario.

    Configuración de sugerencias de cliente del agente de usuario

  4. Acepte el valor predeterminado de Custom..., o seleccione un explorador y un dispositivo predefinidos en la lista desplegable.

  5. Para cualquiera de las dos opciones, establezca sugerencias de cliente del agente de usuario como se indica a continuación:

    • Marca y versión como Edge y 92. Haga clic en + Agregar marca para agregar varios pares de marca y versión.
    • Versión completa del explorador , como 92.0.1111.0.
    • Plataforma y versión como Windows y 10.0.
    • Arquitectura como x86.
    • Modelo de dispositivo como Galaxy Nexus.

    Nota:

    Establezca o cambie cualquiera de las sugerencias de cliente del agente de usuario. No hay valores obligatorios.

  6. Seleccione Actualizar.

  7. Para comprobar los cambios, haga clic en Consola y escriba navigator.userAgentData. Expanda los resultados según sea necesario para ver los cambios en los datos del agente de usuario.

También puede establecer sugerencias de cliente del agente de usuario en Emulación de dispositivos móviles (emulación de dispositivo).

Solicitudes de filtro

Puede filtrar las solicitudes por propiedades, por tipo o por tiempo, y puede ocultar direcciones URL de datos.

Filtrar solicitudes por propiedades

Use el cuadro de texto Filtrar para filtrar las solicitudes por propiedades, como el dominio o el tamaño de la solicitud.

Si no se muestra el cuadro de texto, es probable que el panel Filtros esté oculto. Para obtener más información, vea Ocultar el panel Filtros.

El cuadro de texto Filtrar :

Cuadro de texto Filtrar

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

Lista completa de propiedades admitidas:

Propiedad Detalles
domain Solo muestra los recursos del dominio especificado. Puede usar un carácter comodín (*) para incluir varios dominios. Por ejemplo, *.com muestra los recursos de todos los nombres de dominio que terminan en .com. DevTools rellena el menú desplegable autocompletar con todos los dominios que se encuentran.
has-response-header Muestra los recursos que contienen el encabezado de respuesta HTTP especificado. DevTools rellena el menú desplegable autocompletar con todos los encabezados de respuesta que se encuentran.
is Use is:running para buscar WebSocket recursos.
larger-than Muestra recursos que son mayores que el tamaño especificado, en bytes. Establecer un valor de 1000 es equivalente a establecer un valor de 1k.
method Muestra los recursos recuperados a través de un tipo de método HTTP especificado. DevTools rellena el menú desplegable con todos los métodos HTTP que se encuentran.
mime-type Muestra los recursos de un tipo MIME especificado. DevTools rellena el menú desplegable con todos los tipos MIME que se encuentran.
mixed-content Mostrar todos los recursos de contenido mixto (mixed-content:all) o solo los que se muestran actualmente (mixed-content:displayed).
scheme Muestra los recursos recuperados a través de HTTP no protegido (scheme:http) o HTTPS protegido (scheme:https).
set-cookie-domain Muestra los recursos que tienen un Set-Cookie encabezado con un Domain atributo que coincide con el valor especificado. DevTools rellena el autocompletar con todos los dominios de cookies que se encuentran.
set-cookie-name Muestra los recursos que tienen un Set-Cookie encabezado con un nombre que coincide con el valor especificado. DevTools rellena el autocompletar con todos los nombres de cookies que se encuentran.
set-cookie-value Muestra los recursos que tienen un Set-Cookie encabezado con un valor que coincide con el valor especificado. DevTools rellena el autocompletar con todos los valores de cookie que se encuentran.
status-code Muestra los recursos que coinciden con el código de estado HTTP específico. DevTools rellena el menú desplegable autocompletar con todos los códigos de estado que se encuentran.

Filtrar solicitudes por tipo

Para filtrar las solicitudes por tipo de solicitud, haga clic en los botones del panel Red :

  • XHR
  • JS
  • CSS
  • Img
  • Media
  • Font
  • Doc
  • WS : WebSocket.
  • Manifiesto
  • Otro : cualquier otro tipo que no aparezca aquí.

Si los botones no aparecen, es posible que el panel Filtros esté oculto. Consulte Ocultar el panel Filtros.

Para habilitar varios filtros de tipo simultáneamente, mantenga presionados Ctrl (Windows, Linux) o Command (macOS) y, a continuación, haga clic en los filtros.

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

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

Filtrar solicitudes por tiempo

Haga clic y arrastre a la izquierda o a la derecha en el panel Información general para mostrar solo las solicitudes que estaban activas durante ese período de tiempo. El filtro es inclusivo. Se muestra cualquier solicitud que estuviera activa durante el tiempo resaltado.

Filtrado de las solicitudes que estaban inactivas alrededor de 300 ms:

Filtrado de las solicitudes que estaban inactivas alrededor de 300 ms

Ocultar direcciones URL de datos

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

Para ocultar las solicitudes, desactive la casilla Ocultar direcciones URL de datos :

Casilla Ocultar direcciones URL de datos

Ordenar solicitudes

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

Ordenar por columna

Haga clic en el encabezado de cualquier columna de la columna Solicitudes para ordenar las solicitudes por esa columna.

Ordenar por fase de actividad

Para cambiar la forma en que la cascada ordena las solicitudes:

  • Haga clic con el botón derecho en el encabezado de la tabla Solicitudes, mantenga el puntero sobre Cascada y, a continuación, seleccione una de las siguientes opciones:

    • Hora de inicio : la primera solicitud iniciada se coloca en la parte superior.

    • Tiempo de respuesta : la primera solicitud que comenzó a descargarse se coloca en la parte superior.

    • Hora de finalización : la primera solicitud que ha finalizado se coloca en la parte superior.

    • Duración total : la solicitud con la configuración de conexión más corta y la solicitud o respuesta se coloca en la parte superior.

    • Latencia : la solicitud que esperó el menor tiempo para obtener una respuesta se coloca en la parte superior.

En estas descripciones se supone que cada opción respectiva se clasifica entre la más corta y la más larga. Haga clic en el encabezado de la columna Cascada para invertir el orden.

A continuación se muestra cómo ordenar la cascada por duración total. La parte más ligera de cada barra es el tiempo de espera y la parte más oscura es el tiempo dedicado a descargar bytes:

Ordenación de la cascada por duración total

Analizar solicitudes

Siempre que DevTools esté abierto, registra todas las solicitudes en la herramienta Red . Use el panel Red para analizar las solicitudes.

Mostrar un registro de solicitudes

Use la tabla Requests (Solicitudes ) para mostrar un registro de todas las solicitudes realizadas mientras DevTools está abierto. Para mostrar más información sobre cada elemento, haga clic o mantenga el puntero sobre las solicitudes.

Tabla Solicitudes

La tabla Solicitudes muestra las siguientes columnas de forma predeterminada:

  • Nombre. El nombre de archivo del recurso o un identificador de .
  • Estado. El código de estado HTTP.
  • Escriba. Tipo MIME del recurso solicitado.
  • Iniciador. Los siguientes objetos o procesos pueden iniciar solicitudes:
    • Analizador. Analizador HTML.
    • Redireccionamiento. Redireccionamiento HTTP.
    • Script. Una función de JavaScript.
    • Otros. Algún otro proceso o acción, como navegar a una página a través de un vínculo o escribir una dirección URL en la barra de direcciones.
  • Tamaño. 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 byte final en la respuesta.
  • Cascada. Un desglose visual de la actividad de cada solicitud.

Agregar o quitar columnas

Haga clic con el botón derecho en el encabezado de la tabla Solicitudes y seleccione una opción para ocultarla o mostrarla. Las opciones mostradas actualmente tienen marcas de verificación junto a ellas.

Adición de una columna a la tabla Requests

Agregar columnas personalizadas

Para agregar una columna personalizada a la tabla Solicitudes, haga clic con el botón derecho en el encabezado de la tabla Solicitudes y, a continuación, seleccione Encabezados> de respuestaAdministrar columnas de encabezado.

Adición de una columna personalizada a la tabla Requests

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

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

Para ver las distintas formas en que puede ordenar la cascada, vaya a Ordenar por fase de actividad.

Columna Cascada del panel Solicitudes :

Columna Cascada del panel Solicitudes

Mostrar una vista previa de un cuerpo de respuesta

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

  1. Haga clic en la dirección URL de la solicitud, en la columna Nombre de la tabla Solicitudes.
  2. Seleccione la pestaña Vista previa .

La pestaña Vista previa es principalmente útil para mostrar imágenes.

Panel Vista previa

Mostrar un cuerpo de respuesta

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

  1. Haga clic en la dirección URL de la solicitud, en la columna Nombre de la tabla Solicitudes.
  2. Haga clic en la pestaña Respuesta .

Panel Respuesta

Mostrar encabezados HTTP

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

  1. Haga clic en la dirección URL de la solicitud, en la columna Nombre de la tabla Solicitudes.

  2. Haga clic en la pestaña Encabezados .

Panel Encabezados

Mostrar el origen del encabezado HTTP

De forma predeterminada, el panel Encabezados muestra los nombres de encabezado alfabéticamente. Para mostrar los nombres de encabezado HTTP en el orden recibido, siga estos pasos.

  1. Abra el panel Encabezados para la solicitud que le interese. Para obtener más información, vea Mostrar encabezados HTTP.

  2. Haga clic en Ver origen, junto a la sección Encabezado de solicitud o Encabezado de respuesta .

Mostrar parámetros de cadena de consulta

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

  1. Abra el panel Encabezados para la solicitud que le interese. Para obtener más información, vea Mostrar encabezados HTTP.

  2. Vaya a la sección Parámetros de cadena de consulta .

Sección Parámetros de cadena de consulta

Mostrar origen de parámetros de cadena de consulta

Para mostrar el origen del parámetro de cadena de consulta de una solicitud, siga estos pasos.

  1. Vaya a la sección Parámetros de cadena de consulta . Para obtener más información, vea Mostrar parámetros de cadena de consulta.

  2. Seleccione Ver origen.

Mostrar parámetros de cadena de consulta con codificación URL

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

  1. Vaya a la sección Parámetros de cadena de consulta . Para obtener más información, vea Mostrar parámetros de cadena de consulta.

  2. Haga clic en Ver dirección URL codificada.

Mostrar cookies

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

  1. Haga clic en la dirección URL de la solicitud, en la columna Nombre de la tabla Solicitudes.
  2. Haga clic en la pestaña Cookies .

Panel Cookies

Mostrar el desglose de tiempo de una solicitud

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

  1. Haga clic en la dirección URL de la solicitud, en la columna Nombre de la tabla Solicitudes.
  2. Haga clic en la pestaña Temporización .

Para obtener una manera más rápida de acceder a los datos, consulte Vista previa de un desglose de tiempo, en el artículo presente.

Para obtener más información sobre cada una de las fases que se pueden mostrar en el panel De tiempo , vea Fases de desglose de tiempos explicadas, en el presente artículo.

El panel Control de tiempo :

Panel Control de tiempo

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

Para obtener más información sobre el acceso a la pantalla, consulte Visualización del desglose de tiempo.

Vista previa de un desglose de tiempo

Para mostrar una vista previa del desglose de tiempo de una solicitud, en la columna Cascada de la tabla Solicitudes, mantenga el puntero sobre la entrada de la solicitud.

Vista previa del desglose de tiempo de una solicitud:

Vista previa del desglose de tiempo de una solicitud

Para ver los datos sin mantener el puntero, vea la parte superior de la sección presente , Mostrar el desglose de tiempo de una solicitud.

Fases de desglose de tiempos explicadas

Cada una de estas fases puede aparecer en la pestaña Temporización :

  • Puesta en cola. Las colas del explorador solicitan cuando se cumple alguna de las siguientes condiciones

    • Hay solicitudes de mayor prioridad.
    • Ya hay seis conexiones TCP abiertas para este origen, que es el límite. Solo se aplica a HTTP/1.0 y HTTP/1.1.
    • El explorador asigna brevemente espacio en la memoria caché del disco.
  • Estancado. La solicitud se podría detener por cualquiera de los motivos descritos en Queueing.

  • Búsqueda dns. El explorador está resolviendo la dirección IP de la solicitud.

  • Conexión inicial. El explorador está estableciendo una conexión, incluidos los protocolos de enlace TCP y los reintentos, y negociando una capa de sockets seguros (SSL).

  • Negociación de proxy. El explorador está negociando la solicitud con un servidor proxy.

  • Solicitud enviada. Se está enviando la solicitud.

  • Preparación de ServiceWorker. El explorador está iniciando el trabajo de servicio.

  • Solicitud a ServiceWorker. La solicitud se envía al trabajador del servicio.

  • Esperando (TTFB). El explorador espera el primer byte de una respuesta. TTFB significa Tiempo para el primer byte. Este tiempo incluye un recorrido de ida y vuelta de latencia y el tiempo que el servidor tardó en preparar la respuesta.

  • Descarga de contenido. El explorador recibe la respuesta.

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

  • Lectura push. El explorador lee los datos locales que se recibieron anteriormente.

Mostrar iniciadores y dependencias

Para mostrar los iniciadores y las dependencias de una solicitud, mantenga presionada Shift la tecla y mantenga el puntero sobre la solicitud en la tabla Solicitudes .

Colores de DevTools:

  • Los iniciadores se muestran en verde.
  • Las dependencias se muestran en rojo.

Mostrar los iniciadores y dependencias de una solicitud:

Mostrar los iniciadores y dependencias de una solicitud

Cuando la tabla Requests se ordena cronológicamente, si mantiene el puntero sobre una línea, la línea anterior muestra una solicitud verde. La solicitud verde es el iniciador de la dependencia. Si se muestra otra solicitud verde en la línea anterior, esa solicitud superior es el iniciador del iniciador. Y así sucesivamente.

Mostrar eventos de carga

DevTools muestra el tiempo de los DOMContentLoaded eventos y load en varios lugares de la herramienta Red . El DOMContentLoaded evento está coloreado en azul y el load evento es rojo.

Ubicaciones de los DOMContentLoaded eventos y load en la herramienta Red :

Ubicaciones de los eventos DOMContentLoaded y load en el panel Red

Mostrar el número total de solicitudes

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

Precaución

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

Número total de solicitudes desde que se abrieron DevTools

Número total de solicitudes desde que se abrieron DevTools

Mostrar el tamaño total de descarga

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

Precaución

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

Tamaño total de descarga de las solicitudes:

Tamaño total de descarga de las solicitudes

Para comprobar el tamaño de los recursos después de que el explorador descomprima cada elemento, vea Mostrar el tamaño sin comprimir de un recurso.

Mostrar el seguimiento de pila que produjo una solicitud

Después de que una instrucción de JavaScript solicite un recurso, mantenga el puntero sobre la columna Iniciador para mostrar el seguimiento de pila que conduce a la solicitud.

Seguimiento de pila que conduce a una solicitud de recurso:

Seguimiento de pila que conduce a una solicitud de recurso

Mostrar el tamaño sin comprimir de un recurso

Active la casilla Usar filas de solicitud grandes y examine el valor inferior de la columna Tamaño .

A continuación se muestra un ejemplo de recursos sin comprimir. El tamaño comprimido del jquery-3.3.1.min.js archivo que se envió a través de la red era 29.9 KB, mientras que el tamaño sin comprimir era 84.9 KB:

Un ejemplo de recursos sin comprimir

Exportar datos de solicitudes

Guardar todas las solicitudes de red en un archivo HAR

Para guardar todas las solicitudes de red en un archivo HAR:

  1. En la tabla Solicitudes , haga clic con el botón derecho en una solicitud y, a continuación, seleccione Guardar como HAR con contenido. DevTools guarda todas las solicitudes que se han producido desde que abrió DevTools en el archivo HAR. No se pueden filtrar las solicitudes y no se puede guardar una sola solicitud.

Una vez guardado un archivo HAR, puede volver a importarlo en DevTools para su análisis. Arrastre y coloque el archivo HAR en la tabla Solicitudes .

Seleccione Guardar como HAR con contenido:

Seleccionar

Copia de una o varias solicitudes en el Portapapeles

En la columna Nombre de la tabla Solicitudes, haga clic con el botón derecho en una solicitud, mantenga el puntero sobre Copiar y seleccione una de las siguientes opciones:

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

Seleccione Copiar respuesta:

Seleccionar

Copia de JSON de respuesta con formato en el Portapapeles

Seleccione una solicitud de red y, a continuación, vaya al panel Encabezados . Para copiar el valor JSON de una respuesta, vaya a Carga de solicitud, haga clic con el botón derecho en el contenido de la respuesta JSON y, a continuación, seleccione Copiar valor.

Comando copiar valor con el botón derecho

Pegar el JSON de respuesta con formato en Microsoft Visual Studio Code:

Microsoft Visual Studio Code con JSON de respuesta con formato

Copia de valores de propiedad de solicitudes de red al Portapapeles

Para copiar los valores de propiedad de las solicitudes de red al Portapapeles:

  1. Abra el panel Encabezados .

  2. Abra una de las secciones de encabezado siguientes.

    • Carga de solicitud (JSON)
    • Datos del formulario
    • Parámetros de cadena de consulta
    • Encabezados de solicitud
    • Encabezados de respuesta
  3. Haga clic con el botón derecho en un valor y, a continuación, seleccione Copiar valor. Ahora puede pegar el valor en cualquier editor para revisarlo.

Cambiar el diseño del panel Red

Puede expandir o contraer secciones de la interfaz de usuario de la herramienta de red para centrar información importante.

Ocultar el panel Filtros

De forma predeterminada, DevTools muestra el panel Filtros . Para ocultar el panel Filtros , seleccione Filtro (Filtro).

Botón Ocultar filtros

Uso de filas de solicitudes grandes

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

Para habilitar filas grandes, active la casilla Usar filas de solicitud grandes . Ejemplo de filas de solicitudes grandes en el panel Solicitudes :

Ejemplo de filas de solicitudes grandes en el panel Solicitudes

Ocultar el panel Información general

De forma predeterminada, DevTools muestra el panel Información general . Para ocultar el panel Información general , desactive la casilla Mostrar información general .

Casilla Mostrar información general

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licencia de Creative Commons Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.