REAReverse Engineer Anything
Bahasa Indonesia

Rumah / Panduan / 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 memiliki Ekspor catatan tombol. Mengkliknya akan memuat notes.json, memformat dua catatan sebagai CSV, dan memulai pengunduhan.

Dari klik ke unduhan CSV

  1. 01 * KamuKlik Ekspor catatanLakukan tindakan di browser Anda saat pengambilan sedang berjalan.
  2. 02 * REA Catat permintaannyaTangkap URL permintaan, status respons, dan struktur JSON dari halaman yang dipilih.
  3. 03 * Agen AndaBaca kode eksporHubungkan 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://reverseengineeranything.app/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 · Unduh export.js · Unduh 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 untuk mengikuti file dan batasan proses.

Atas