---
title: Análisis de Navegadores y Redes-REA
url: https://rea.tools/es/guides/browser/
---

[Inicio](https://rea.tools/es/) / [Guías](https://rea.tools/es/guides/) / Observación del navegador

# Vea lo que sucede cuando haces clic.

Use una pequeña aplicación de navegador para conectar una acción, su solicitud de red y el JavaScript que genera una descarga.

## ¿Qué sucede cuando haces clic en Exportar?

El [Ejemplo de navegador de notas](https://rea.tools/examples/notes-web/) tiene un **Notas de exportación** botón. Al hacer clic en él, se carga `notes.json`, formatea las dos notas como CSV e inicia una descarga .

Del clic a la descarga de CSV

1. 01 \* Tú

   Haga clic en Exportar notas

   Realice la acción en su navegador mientras se ejecuta la captura.
2. 02 \* REA

   Registre la solicitud

   Capture la URL de la solicitud, el estado de la respuesta y la estructura JSON de la página seleccionada.
3. 03 \* Su agente

   Lea el código de exportación

   Conecte la solicitud observada a `fetch("./notes.json")` en `export.js`.

`GET notes.json → 200 → notes[] → CSV`

Inicie la captura antes de hacer clic en Exportar notas.

## Abra Chrome con depuración remota

Abra el ejemplo de Hosted Notes con un perfil de navegador independiente y un puerto de depuración local. En Linux :

Inicie el navegador de ejemplo

```
google-chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/rea-notes-browser \
  https://rea.tools/examples/notes-web/
```

Utilice la ruta ejecutable de su navegador instalado en macOS o Windows . Puede reemplazar la URL de la página con otra página que desee inspeccionar.

REA se conecta a este navegador existente. Usted mantiene el control de la página, realiza la acción y cierra el navegador cuando termina.

## Pídale a su agente que vea una acción

Su agente de codificación

Use REA para inspeccionar esta página mientras hago clic en Exportar notas. ¿Qué solicitud hace y cómo se construye el CSV?

Mensaje de ejemplo. Proporcione a su agente el punto final de depuración, `http://127.0.0.1:9222`, y la URL de la página. Deje que inicie la captura antes de hacer clic.

Su agente descubre el destino de la página, abre una ventana de observación y lee la evidencia resultante. Luego puede inspeccionar el script detrás de la exportación.

## O captura desde la terminal

Encontrar el ID de destino de la página:

Encuentra la página

```
npx -y rea-agents@latest list-browser-targets \
  http://127.0.0.1:9222 --json
```

Elija el destino con la URL de ejemplo de Notes. Reemplazar `TARGET_ID` abajo con su ID, luego ejecute:

Captura los siguientes diez segundos

```
npx -y rea-agents@latest inspect-web-page \
  http://127.0.0.1:9222 TARGET_ID \
  --observation-ms 10000 \
  --include-accessibility-text \
  --include-json-body-shapes --json
```

Deje que el comando se conecte durante unos segundos y luego haga clic en **Notas de exportación** en ese navegador. El resultado llega después de que finaliza la ventana de observación.

El resultado capturado incluye la página seleccionada, la actividad de la red durante esa ventana y la forma de la respuesta JSON. Las solicitudes anteriores están fuera de esta captura.

## Leer el script de solicitud y exportación

Grabado con REA 4.1.0 en el ejemplo de notas locales

| Hecho capturado | Valor |
| --- | --- |
| Solicitud | `GET /examples/notes-web/notes.json` |
| Respuesta | `200 · application/json` |
| Iniciador de la solicitud | `export.js` \* guión |
| Estructura de respuesta | `notes[]` con `id` y `title` campos |

Leer los scripts cargados

```
npx -y rea-agents@latest inspect-web-page \
  http://127.0.0.1:9222 TARGET_ID \
  --include-script-sources --json
```

La solicitud identifica el origen de datos y los registros REA `export.js` como su iniciador. Lea la fuente de script capturada para ver cómo se utilizan los datos:

export.js \* extracto de fuente de ejemplo

```
const response = await fetch("./notes.json");
const { notes } = await response.json();
// Format each note as a CSV row.
const url = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
link.href = url;
link.download = "notes.csv";
link.click();
```

La descarga se construye en la página utilizando la respuesta JSON. El paso de formateo CSV proviene del script; la captura de red establece que se solicitó este clic `notes.json`.

[Abra el ejemplo](https://rea.tools/examples/notes-web/) · [Descargar export.js](https://rea.tools/examples/notes-web/export.js) · [Descargar notes.json](https://rea.tools/examples/notes-web/notes.json)

> Busque el script que solicita `notes.json`. ¿Cómo se escapa de los títulos que contienen comas o comillas?

Para una aplicación JavaScript o Electron instalada, continúe con la [flujo de trabajo de la aplicación](https://rea.tools/guides/javascript/) para seguir los límites de archivos y procesos.

Para examinar los cuerpos de las solicitudes y respuestas HTTP, use [Fiddler Everywhere: capturas SAZ, MCP y habilidades públicas](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md). Exporte SAZ o HAR 1.2 para obtener Evidence de capturas en REA sin conexión, o conecte el servidor MCP de Everywhere para inspeccionar el tráfico capturado con su agente.