Cosa succede quando fai clic su Esporta?
Il Esempio di browser 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
- 01 * TuFare clic su Esporta noteEseguire l'azione nel browser mentre l'acquisizione è in esecuzione.
- 02 * REA Registra la richiestaCattura l'URL della richiesta, lo stato della risposta e la struttura JSON dalla pagina selezionata.
-
03 * Il tuo agenteLeggi il codice di esportazioneCollegare la richiesta osservata a
fetch("./notes.json")inexport.js.
GET notes.json → 200 → notes[] → CSV
Aprire Chrome con debug remoto
Aprire l'esempio di Note ospitate con un profilo browser separato e una porta di debug locale. Su Linux :
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
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:
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:
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 --jsonLasciare 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
| 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
|
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:
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 · Scaricare export.js · Scaricare 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 per seguire i confini dei file e dei processi.