---
title: Analyse du navigateur et du réseau-REA
url: https://rea.tools/fr/guides/browser/
---

[Accueil](https://rea.tools/fr/) / [Guides Touristiques](https://rea.tools/fr/guides/) / Observation du navigateur

# Voyez ce qui se passe lorsque vous cliquez.

Utilisez une petite application de navigateur pour connecter une action, sa demande réseau et le JavaScript qui génère un téléchargement.

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

Les [Exemple de navigateur de notes](https://rea.tools/examples/notes-web/) a une **Exporter des notes** bouton. Cliquer dessus se charge `notes.json`, formate les deux notes en CSV et lance un téléchargement.

Du clic au téléchargement CSV

1. 01 \* Vous

   Cliquez sur Exporter les notes

   Effectuez l'action dans votre navigateur pendant que la capture est en cours d'exécution.
2. 02 · REA

   Enregistrer la demande

   Capturez l'URL de la demande, l'état de la réponse et la structure JSON de la page sélectionnée.
3. 03 · Votre agent

   Lire le code d'exportation

   Connectez la requête observée à `fetch("./notes.json")` dans `export.js`.

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

Démarrez la capture avant de cliquer sur Exporter les notes.

## 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 :

Démarrez l'exemple de navigateur

```
google-chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/rea-notes-browser \
  https://rea.tools/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

Votre agent de codage

Utilisez REA pour inspecter cette page pendant que je clique sur Exporter les notes. Quelle demande fait-il et comment le CSV est-il construit?

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:

Trouver 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:

Capturez les dix prochaines secondes

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

Enregistré avec REA 4.1.0 sur l'exemple des notes locales

| Fait capturé | Valeur |
| --- | --- |
| Demande | `GET /examples/notes-web/notes.json` |
| Réponse | `200 · application/json` |
| Initiateur de la demande | `export.js` \* scénario |
| Structure de la réponse | `notes[]` avec `id` et `title` champs |

Lire les scripts chargés

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

export.js \* exemple d'extrait de source

```
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](https://rea.tools/examples/notes-web/) · [Télécharger export.js](https://rea.tools/examples/notes-web/export.js) · [Télécharger notes.json](https://rea.tools/examples/notes-web/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](https://rea.tools/guides/javascript/) pour suivre les limites des fichiers et des processus.

Pour examiner les corps des requêtes et réponses HTTP, utilisez [Fiddler Everywhere : captures SAZ, MCP et compétences publiques](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md). Exportez en SAZ ou HAR 1.2 pour obtenir des Evidence de capture dans REA hors ligne, ou connectez le serveur MCP d’Everywhere pour inspecter le trafic capturé avec votre agent.