---
title: เบราว์เซอร์และการวิเคราะห์เครือข่าย — REA
url: https://rea.tools/th/guides/browser/
---

[บ้าน](https://rea.tools/th/) / [กเขา](https://rea.tools/th/guides/) /การสังเกตเบราว์เซอร์

# ดูว่าเกิดอะไรขึ้น เมื่อคุณคลิก

การเขียนข้อความโฆษณา,การเขียนในนามคนอื่น,บทความ,การเขียนเนื้อหา JavaScript ที่สร้างการดาวน์โหลด

## เกิดอะไรขึ้นเมื่อคุณคลิกส่งออก?

ร [ตัวอย่างเบราว์เซอร์หมายเหตุ](https://rea.tools/examples/notes-web/) มี **บันทึกการส่งออก** ปุ่ม คลิกโหลด `notes.json` รูปแบบสองบันทึกเป็น CSV และเริ่มต้นการดาวน์โหลด

จากการคลิกที่ CSV ดาวน์โหลด

1. 01·คุณ

   คลิกส่งออกหมายเหตุ

   ดำเนินการในเบราว์เซอร์ของคุณในขณะที่การจับภาพกำลังทำงานอยู่
2. 02 · REA

   บันทึกคำขอ

   รงสร้างการตอบสนองและโครงสร้างเจสันจากเพจที่เลือก
3. 03·ตัวแทนของคุณ

   อ่านรหัสส่งออก

   เชื่อมต่อคำขอสังเกตไปที่ `fetch("./notes.json")` ใน `export.js`.

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

เริ่มการจับภาพก่อนที่จะคลิกส่งออกหมายเหตุ

## เปิด Chrome ด้วยการดีบักระยะไกล

เปิดตัวอย่างบันทึกย่อที่โฮสต์กับโปรไฟล์เบราว์เซอร์ที่แยกต่างหากและพอร์ตการดีบักโลคั บนLinux:

เริ่มต้นเบราว์เซอร์ตัวอย่าง

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

ใช้เส้นทางปฏิบัติการของเบราว์เซอร์ที่ติดตั้งบน macOS หรือ Windows. คุณสามารถแทนที่ลิงค์เพจด้วยเพจอื่นที่คุณต้องการตรวจสอบได้

REA เชื่อมต่อกับเบราว์เซอร์ที่มีอยู่นี้ คุณสามารถควบคุมเพจดำเนินการและปิดเบราว์เซอร์เมื่อเสร็จสิ้น

## เว็บแคม,ถ้ำมอง,ซ่อน,จับได้,นอกใจ,

ตัวแทนการเข้ารหัสของคุณ

ใช้ REA เพื่อตรวจสอบหน้านี้ในขณะที่ฉันคลิกบันทึกการส่งออก สิ่งที่ร้องขอไม่ได้ทำให้และวิธีการที่เป็น CSV สร้าง?

รือไม่ ให้ตัวแทนของคุณดีบักปลายทาง, `http://127.0.0.1:9222` และลิงค์หน้า ให้มันเริ่มการจับภาพก่อนที่จะคลิก

ตัวแทนของคุณค้นพบเป้าหมายหน้าเริ่มต้นหน้าต่างสังเกตการณ์และอ่านหลักฐานที่เกิดขึ้น จากนั้นก็สามารถตรวจสอบสคริปต์ที่อยู่เบื้องหลังการส่งออก

## หรือจับภาพจากเทอร์มินัล

ค้นหารหัสเป้าหมายของหน้าเว็บ:

ค้นหาหน้าเว็บ

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

เลือกเป้าหมายด้วยลิงค์ตัวอย่างหมายเหตุ แทนที่ `TARGET_ID` ด้านล่างมีรหัสของตนแล้วเรียกใช้:

จับสิบวินาทีถัดไป

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

ให้คำสั่งเชื่อมต่อไม่กี่วินาที,แล้วคลิก **บันทึกการส่งออก** ในเบราว์เซอร์ที่ ผลลัพธ์จะมาถึงหลังจากที่หน้าต่างการสังเกตสิ้นสุดลง

ผลลัพธ์ที่จับมีเพจที่เลือกกิจกรรมของเครือข่ายระหว่างหน้าต่างนั้นและรูปร่างของการตอ คำขอก่อนหน้านี้อยู่นอกการจับภาพนี้

## อ่านคำขอและส่งออกสคริปต์

บันทึกด้วย REA 4.1.0 ในตัวอย่างบันทึกท้องถิ่น

| จับความจริง | ค่า |
| --- | --- |
| คำขอ | `GET /examples/notes-web/notes.json` |
| การตอบสนอง | `200 · application/json` |
| ผู้ริเริ่มการร้องขอ | `export.js` \*สคริปต์ |
| โครงสร้างการตอบสนอง | `notes[]` ด้วย `id` และ `title` สนาม |

อ่านสคริปต์ที่โหลด

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

คำขอระบุแหล่งข้อมูลและ REA บันทึก `export.js` เป็นผู้ริเริ่มของมัน อ่านแหล่งที่มาของสคริปต์ที่จับเพื่อดูว่ามีการใช้ข้อมูล:

export.js ·ตัวอย่างแหล่งที่มาที่ตัดตอนมา

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

น้าโดยใช้การตอบสนอง ร CSV ขั้นตอนการจัดรูปแบบมาจากสคริปต์;จับเครือข่ายกำหนดว่าการคลิกนี้ร้องขอ `notes.json`.

[เปิดตัวอย่าง](https://rea.tools/examples/notes-web/) · [ดาวน์โหลด export.js](https://rea.tools/examples/notes-web/export.js) · [ดาวน์โหลด notes.json](https://rea.tools/examples/notes-web/notes.json)

> ค้นหาสคริปต์ที่ร้องขอ `notes.json`. จะหนีชื่อที่มีเครื่องหมายจุลภาคหรือเครื่องหมายใบเสนอราคาได้อย่างไร

สำหรับการติดตั้ง JavaScript หรือ Electron แอปพลิเคดำเนินการต่อด้วย [เวิร์กโฟลว์แอ็พพลิเคชัน](https://rea.tools/guides/javascript/) การปฏิบัติตามแฟ้มและขอบเขตของกระบวนการ

หากต้องการตรวจสอบเนื้อหาคำขอและคำตอบ HTTP ให้ใช้ [Fiddler Everywhere: ข้อมูลที่บันทึกในรูปแบบ SAZ, MCP และทักษะสาธารณะ](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md) ส่งออกเป็น SAZ ???? HAR 1.2 เพื่อรับ Evidence จากข้อมูลที่บันทึกใน REA แบบออฟไลน์ หรือเชื่อมต่อเซิร์ฟเวอร์ MCP ของ Everywhere เพื่อตรวจสอบทราฟฟิกที่บันทึกไว้ร่วมกับเอเจนต์ของคุณ