---
title: Analisis Peramban dan Jaringan-REA
url: https://rea.tools/id/guides/browser/
---

[Rumah](https://rea.tools/id/) / [Panduan](https://rea.tools/id/guides/) / Pengamatan browser

# Lihat apa yang terjadi saat Anda mengklik.

Gunakan aplikasi browser kecil untuk menghubungkan tindakan, permintaan jaringannya, dan JavaScript yang membuat unduhan.

## Apa yang terjadi saat Anda mengklik Ekspor?

The [Contoh peramban catatan](https://rea.tools/examples/notes-web/) memiliki **Ekspor catatan** tombol. Mengkliknya akan memuat `notes.json`, memformat dua catatan sebagai CSV, dan memulai pengunduhan.

Dari klik ke unduhan CSV

1. 01 \* Kamu

   Klik Ekspor catatan

   Lakukan tindakan di browser Anda saat pengambilan sedang berjalan.
2. 02 \* REA

   Catat permintaannya

   Tangkap URL permintaan, status respons, dan struktur JSON dari halaman yang dipilih.
3. 03 \* Agen Anda

   Baca kode ekspor

   Hubungkan permintaan yang diamati ke `fetch("./notes.json")` dalam `export.js`.

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

Mulai pengambilan sebelum mengklik Ekspor catatan.

## Buka Chrome dengan debugging jarak jauh

Buka contoh Catatan yang dihosting dengan profil browser terpisah dan port debugging lokal. Di Linux :

Mulai browser contoh

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

Gunakan jalur eksekusi browser yang Anda instal di macOS atau Windows . Anda dapat mengganti URL halaman dengan halaman lain yang ingin Anda periksa.

REA terhubung ke browser yang ada ini. Anda tetap mengontrol halaman, melakukan tindakan, dan menutup browser setelah selesai.

## Minta agen Anda untuk menonton satu aksi

Agen pengkodean Anda

Gunakan REA untuk memeriksa halaman ini saat saya mengklik Ekspor catatan. Permintaan apa yang dibuatnya, dan bagaimana CSV dibuat?

Contoh prompt. Berikan agen Anda titik akhir debugging, `http://127.0.0.1:9222`, dan URL halaman. Biarkan mulai menangkap sebelum Anda mengklik.

Agen Anda menemukan target halaman, memulai jendela observasi, dan membaca bukti yang dihasilkan. Itu kemudian dapat memeriksa skrip di balik ekspor.

## Atau tangkap dari terminal

Temukan ID target halaman:

Temukan halamannya

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

Pilih target dengan URL contoh Catatan. Ganti `TARGET_ID` di bawah ini dengan ID - nya, lalu jalankan:

Abadikan sepuluh detik berikutnya

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

Biarkan perintah terhubung selama beberapa detik, lalu klik **Ekspor catatan** pada browser tersebut. Hasilnya tiba setelah jendela observasi berakhir.

Hasil yang diambil mencakup halaman yang dipilih, aktivitas jaringan selama jendela tersebut, dan bentuk respons JSON. Permintaan sebelumnya berada di luar tangkapan ini.

## Baca skrip permintaan dan ekspor

Direkam dengan REA 4.1.0 pada contoh Catatan lokal

| Fakta yang ditangkap | Nilai |
| --- | --- |
| Permintaan | `GET /examples/notes-web/notes.json` |
| Tanggapan | `200 · application/json` |
| Inisiator permintaan | `export.js` \* naskah |
| Struktur respons | `notes[]` dengan `id` dan `title` bidang |

Baca skrip yang dimuat

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

Permintaan mengidentifikasi sumber data, dan catatan REA `export.js` sebagai inisiatornya. Baca sumber skrip yang diambil untuk melihat bagaimana data digunakan:

export.js · contoh kutipan sumber

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

Unduhan dibuat di halaman menggunakan respons JSON. Langkah pemformatan CSV berasal dari skrip; pengambilan jaringan menetapkan bahwa klik ini diminta `notes.json`.

[Buka contohnya](https://rea.tools/examples/notes-web/) · [Unduh export.js](https://rea.tools/examples/notes-web/export.js) · [Unduh notes.json](https://rea.tools/examples/notes-web/notes.json)

> Temukan skrip yang meminta `notes.json`. Bagaimana cara menghindari judul yang mengandung koma atau tanda kutip?

Untuk aplikasi JavaScript atau Electron yang diinstal, lanjutkan dengan [alur kerja aplikasi](https://rea.tools/guides/javascript/) untuk mengikuti file dan batasan proses.

Untuk memeriksa isi permintaan dan respons HTTP, gunakan [Fiddler Everywhere: rekaman SAZ, MCP, dan skill publik](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md). Ekspor SAZ atau HAR 1.2 untuk menghasilkan Evidence rekaman di REA secara luring, atau hubungkan server MCP Everywhere untuk memeriksa lalu lintas yang direkam bersama agen Anda.