Voyez ce qui se passe
lorsque vous cliquez.

Que se passe-t-il lorsque vous cliquez sur Exporter?

Les Exemple de navigateur de notes a une Exporter des notes bouton. Cliquer dessus se charge notes.json, formate les deux notes en CSV et lance un téléchargement.

Ouvrez Chrome avec le débogage à distance

Ouvrez l'exemple hosted Notes avec un profil de navigateur distinct et un port de débogage local. Sur le modèle Linux :

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

Utilisez le chemin d'accès exécutable de votre navigateur installé sur macOS ou Windows . Vous pouvez remplacer l'URL de la page par une autre page que vous souhaitez inspecter.

REA se connecte à ce navigateur existant. Vous gardez le contrôle de la page, effectuez l'action et fermez le navigateur lorsque vous avez terminé.

Demandez à votre agent de regarder une action

Exemple d'invite. Donnez à votre agent le point de terminaison de débogage, http://127.0.0.1:9222, et l'URL de la page. Laissez-le démarrer la capture avant de cliquer.

Votre agent découvre la cible de la page, démarre une fenêtre d'observation et lit les preuves résultantes. Il peut ensuite inspecter le script derrière l'exportation.

Ou capture depuis le terminal

Trouver l'ID cible de la page:

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

Choisissez la cible avec l'URL de l'exemple de Notes. Remplacer TARGET_ID ci-dessous avec son identifiant, puis exécutez:

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

Laissez la commande se connecter pendant quelques secondes, puis cliquez sur Exporter des notes dans ce navigateur. Le résultat arrive après la fin de la fenêtre d'observation.

Le résultat capturé inclut la page sélectionnée, l'activité réseau au cours de cette fenêtre et la forme de la réponse JSON. Les demandes antérieures sont en dehors de cette capture.

Lire la requête et exporter le script

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

La demande identifie la source de données et les enregistrements REA export.js comme son initiateur. Lisez la source du script capturé pour voir comment les données sont utilisées:

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

Le téléchargement est construit dans la page à l'aide de la réponse JSON. L'étape de formatage CSV provient du script; la capture réseau établit que ce clic demandé notes.json.

Ouvrez l'exemple · Télécharger export.js · Télécharger notes.json

Trouvez le script qui demande notes.json. Comment échappe-t-il les titres contenant des virgules ou des guillemets?

Pour une application JavaScript ou Electron installée, continuez avec le flux de travail de l'application pour suivre les limites des fichiers et des processus.