---
title: Analisi del browser e della rete-REA
url: https://rea.tools/it/guides/browser/
---

[Casa](https://rea.tools/it/) / [Guida](https://rea.tools/it/guides/) / Osservazione del browser

# Vedi cosa succede quando si fa clic.

Utilizzare una piccola applicazione browser per collegare un'azione, la sua richiesta di rete e il JavaScript che costruisce un download.

## Cosa succede quando fai clic su Esporta?

Il [Esempio di browser](https://rea.tools/examples/notes-web/) ha un **Note di esportazione** pulsante. Cliccando carica `notes.json`, formatta le due note come CSV, e avvia un download.

Dal clic al CSV scarica

1. 01 \* Tu

   Fare clic su Esporta note

   Eseguire l'azione nel browser mentre l'acquisizione è in esecuzione.
2. 02 \* REA

   Registra la richiesta

   Cattura l'URL della richiesta, lo stato della risposta e la struttura JSON dalla pagina selezionata.
3. 03 \* Il tuo agente

   Leggi il codice di esportazione

   Collegare la richiesta osservata a `fetch("./notes.json")` in `export.js`.

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

Avviare l'acquisizione prima di fare clic su Esporta note.

## Aprire Chrome con debug remoto

Aprire l'esempio di Note ospitate con un profilo browser separato e una porta di debug locale. Su Linux :

Avviare il browser di esempio

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

Utilizzare il percorso eseguibile del browser installato su macOS o Windows . È possibile sostituire l'URL della pagina con un'altra pagina che si desidera ispezionare.

REA si connette a questo browser esistente. Mantieni il controllo della pagina, esegui l'azione e chiudi il browser al termine.

## Chiedi al tuo agente di guardare un'azione

Il tuo agente di codifica

Utilizzare REA per ispezionare questa pagina mentre faccio clic su Esporta note. Che richiesta fa e come viene costruito il CSV?

Esempio prompt. Fornisci al tuo agente l'endpoint di debug, `http://127.0.0.1:9222`, e l'URL della pagina. Lascia che inizi la cattura prima di fare clic.

Il tuo agente scopre l'obiettivo della pagina, avvia una finestra di osservazione e legge le prove risultanti. Può quindi ispezionare lo script dietro l'esportazione.

## O cattura dal terminale

Trova l'ID di destinazione della pagina:

Trova la pagina

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

Scegli la destinazione con l'URL di esempio Notes. Sostituire `TARGET_ID` sotto con il suo ID, quindi esegui:

Cattura i prossimi dieci secondi

```
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
```

Lasciare che il comando si connetta per alcuni secondi, quindi fare clic su **Note di esportazione** in quel browser. Il risultato arriva dopo la fine della finestra di osservazione.

Il risultato acquisito include la pagina selezionata, l'attività di rete durante quella finestra e la forma della risposta JSON. Le richieste precedenti sono al di fuori di questa acquisizione.

## Leggere lo script di richiesta ed esportazione

Registrato con REA 4.1.0 nell'esempio local Notes

| Fatto catturato | Valore |
| --- | --- |
| Richiesta | `GET /examples/notes-web/notes.json` |
| Risposta | `200 · application/json` |
| Iniziatore della richiesta | `export.js` · script |
| Struttura di risposta | `notes[]` con `id` e `title` campo |

Leggi gli script caricati

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

La richiesta identifica l'origine dati e i record REA `export.js` come suo iniziatore. Leggere l'origine dello script catturato per vedere come vengono utilizzati i dati:

export.js \* esempio fonte estratto

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

Il download è costruito nella pagina utilizzando la risposta JSON. Il passaggio di formattazione CSV viene dallo script; l'acquisizione di rete stabilisce che questo clic richiesto `notes.json`.

[Apri l'esempio](https://rea.tools/examples/notes-web/) · [Scaricare export.js](https://rea.tools/examples/notes-web/export.js) · [Scaricare notes.json](https://rea.tools/examples/notes-web/notes.json)

> Trova lo script che richiede `notes.json`. In che modo sfugge ai titoli contenenti virgole o virgolette?

Per un'app JavaScript o Electron installata, continuare con [flusso di lavoro dell'applicazione](https://rea.tools/guides/javascript/) per seguire i confini dei file e dei processi.

Per esaminare i corpi delle richieste e delle risposte HTTP, usa [Fiddler Everywhere: acquisizioni SAZ, MCP e skill pubbliche](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md). Esporta SAZ o HAR 1.2 per ottenere Evidence delle acquisizioni in REA offline, oppure collega il server MCP di Everywhere per esaminare il traffico acquisito con il tuo agente.