---
title: Análise de navegador e rede-REA
url: https://rea.tools/pt-BR/guides/browser/
---

[Casa](https://rea.tools/pt-BR/) / [Guias](https://rea.tools/pt-BR/guides/) / Observação do navegador

# Veja o que acontece quando você clica.

Use um pequeno aplicativo de navegador para conectar uma ação, sua solicitação de rede e o JavaScript que cria um download.

## O que acontece quando você clica em Exportar?

O [Exemplo do navegador Notes](https://rea.tools/examples/notes-web/) tem um **Notas de exportação** botão. Clicar nele carrega `notes.json`, Formata as duas notas como CSV e inicia um download.

Do clique ao download do CSV

1. 01 \* Você

   Clique em Exportar notas

   Execute a ação no seu navegador enquanto a captura estiver em execução.
2. 02 \* REA

   Registar o pedido

   Capture o URL da solicitação, o status da resposta e a estrutura JSON da página selecionada.
3. 03 \* o seu agente

   Ler o código de exportação

   Ligar o pedido observado ao `fetch("./notes.json")` em `export.js`.

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

Inicie a captura antes de clicar em Exportar notas.

## Abrir Chrome com depuração remota

Abra o exemplo do hosted Notes com um perfil de navegador separado e uma porta de depuração local. Em Linux :

Inicie o navegador de exemplo

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

Use o caminho executável do navegador instalado em macOS ou Windows . Você pode substituir o URL da página por outra página que deseja inspecionar.

REA se conecta a este navegador existente. Você mantém o controle da página, executa a ação e fecha o navegador quando terminar.

## Peça ao seu agente para assistir a uma ação

O seu agente de codificação

Use REA para inspecionar esta página enquanto clico em Exportar notas. Que Pedido faz e como é construído o CSV?

Exemplo de alerta. Dê ao seu agente o ponto de extremidade de depuração, `http://127.0.0.1:9222`, e o URL da página. Deixe-o iniciar a captura antes de clicar.

Seu agente descobre o destino da página, inicia uma janela de observação e lê as evidências resultantes. Ele pode então inspecionar o script por trás da exportação.

## Ou captura a partir do terminal

Encontrar o ID de destino da página:

Encontre a página

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

Escolha o destino com o URL de exemplo do Notes. Substituir `TARGET_ID` abaixo com o seu ID, em seguida, executar:

Capture os próximos dez 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
```

Deixe o comando se conectar por alguns segundos e clique em **Notas de exportação** nesse navegador. O resultado chega após o fim da janela de observação.

O resultado capturado inclui a página selecionada, a atividade da rede durante essa janela e a forma da resposta JSON. Os pedidos anteriores estão fora desta captura.

## Leia o script de solicitação e exportação

Gravado com REA 4.1.0 no exemplo de notas locais

| Facto capturado | Valor |
| --- | --- |
| Pedido | `GET /examples/notes-web/notes.json` |
| Resposta | `200 · application/json` |
| Iniciador do pedido | `export.js` \* roteiro |
| Estrutura de resposta | `notes[]` com `id` e `title` campos |

Ler os scripts carregados

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

A solicitação identifica a fonte de dados e os registros REA `export.js` como seu iniciador. Leia a fonte do script capturado para ver como os dados são usados:

export.js \* exemplo de excerto da fonte

```
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();
```

O download é construído na página usando a resposta JSON. A etapa de formatação CSV vem do script; a captura de rede estabelece que este Clique solicitado `notes.json`.

[Abra o exemplo](https://rea.tools/examples/notes-web/) · [Baixar export.js](https://rea.tools/examples/notes-web/export.js) · [Baixar notes.json](https://rea.tools/examples/notes-web/notes.json)

> Encontre o script que solicita `notes.json`. Como escapam os títulos que contêm vírgulas ou aspas?

Para um aplicativo JavaScript ou Electron instalado, continue com o [fluxo de trabalho da aplicação](https://rea.tools/guides/javascript/) para seguir arquivos e limites do processo.

Para examinar os corpos das requisições e respostas HTTP, use [Fiddler Everywhere: capturas SAZ, MCP e habilidades públicas](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md). Exporte SAZ ou HAR 1.2 para obter Evidence das capturas no REA offline, ou conecte o servidor MCP do Everywhere para inspecionar o tráfego capturado com seu agente.