---
title: Phân tích Trình duyệt Và Mạng-REA
url: https://rea.tools/vi/guides/browser/
---

[Nhà](https://rea.tools/vi/) / [Hướng dẫn](https://rea.tools/vi/guides/) / Quan sát trình duyệt

# Xem những gì xảy ra khi bạn nhấp vào.

Sử dụng một ứng dụng trình duyệt nhỏ để kết nối một hành động, yêu cầu mạng của nó và JavaScript xây dựng tải xuống.

## Điều gì xảy ra khi bạn nhấp Vào Xuất?

Các [Ghi chú ví dụ trình duyệt](https://rea.tools/examples/notes-web/) có một **Xuất ghi chú** nút. Nhấp vào nó tải `notes.json`, định dạng hai ghi chú DƯỚI DẠNG CSV và bắt đầu tải xuống.

Từ nhấp VÀO TẢI XUỐNG CSV

1. 01 \* Bạn

   Nhấp Vào Xuất ghi chú

   Thực hiện hành động trong trình duyệt của bạn trong khi chụp đang chạy.
2. 02 \* REA

   Ghi lại yêu cầu

   Chụp URL yêu cầu, trạng thái phản hồi và cấu trúc JSON từ trang đã chọn.
3. 03 \* agent của Bạn

   Đọc mã xuất

   Kết nối yêu cầu quan sát được với `fetch("./notes.json")` trong `export.js`.

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

Bắt đầu chụp trước khi nhấp Vào xuất ghi chú.

## MỞ Chrome với gỡ lỗi từ xa

Mở Ví Dụ Ghi chú được lưu trữ với cấu hình trình duyệt riêng biệt và cổng gỡ lỗi cục bộ. TRÊN Linux :

Khởi động trình duyệt ví dụ

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

Sử dụng đường dẫn thực thi của trình duyệt đã cài đặt của BẠN TRÊN macOS hoặc Windows . BẠN có thể thay THẾ url trang bằng một trang khác mà bạn muốn kiểm tra.

REA kết nối với trình duyệt hiện có này. Bạn giữ quyền kiểm soát trang, thực hiện hành động và đóng trình duyệt khi hoàn tất.

## Yêu cầu agent của bạn xem một hành động

Agent mã hóa của bạn

Sử dụng REA để kiểm tra trang này trong khi tôi nhấp Vào xuất ghi chú. NÓ đưa ra yêu cầu gì và CSV được xây dựng như thế nào?

Ví dụ nhắc nhở. Cung cấp cho agent của bạn điểm cuối gỡ lỗi, `http://127.0.0.1:9222`, VÀ url trang. Hãy để nó bắt đầu chụp trước khi bạn nhấp vào.

Agent của bạn phát hiện ra mục tiêu trang, bắt đầu một cửa sổ quan sát và đọc bằng chứng kết quả. Sau đó, nó có thể kiểm tra tập lệnh đằng sau xuất khẩu.

## Hoặc chụp từ thiết bị đầu cuối

Tìm ID mục tiêu của trang:

Tìm trang

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

Chọn mục tiêu với Url Ví dụ Ghi chú. Thay thế `TARGET_ID` BÊN dưới VỚI ID của NÓ, sau đó chạy:

Chụp mười giây tiếp theo

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

Để lệnh kết nối trong vài giây, sau đó nhấp vào **Xuất ghi chú** trong trình duyệt đó. Kết quả đến sau khi cửa sổ quan sát kết thúc.

Kết quả đã chụp bao gồm trang đã chọn, hoạt động mạng trong cửa sổ đó và hình dạng của phản hồi JSON. Yêu cầu trước đó là bên ngoài chụp này.

## Đọc yêu cầu và xuất tập lệnh

Được ghi BẰNG REA 4.1.0 trên Ví Dụ Ghi chú cục Bộ

| Thực tế bị bắt | Giá trị |
| --- | --- |
| Yêu cầu | `GET /examples/notes-web/notes.json` |
| Phản hồi | `200 · application/json` |
| Yêu cầu người khởi xướng | `export.js` \* kịch bản |
| Cấu trúc phản hồi | `notes[]` với `id` và `title` lĩnh vực |

Đọc các tập lệnh đã tải

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

Yêu cầu xác định nguồn dữ liệu và BẢN ghi REA `export.js` là người khởi xướng nó. Đọc nguồn tập lệnh đã chụp để xem dữ liệu được sử dụng như thế nào:

export.js \* trích đoạn nguồn ví dụ

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

Việc tải xuống được xây dựng trong trang bằng phản hồi JSON. BƯỚC ĐỊNH DẠNG CSV xuất phát từ tập lệnh; chụp mạng thiết lập rằng nhấp chuột này được yêu cầu `notes.json`.

[Mở ví dụ](https://rea.tools/examples/notes-web/) · [Tải về export.js](https://rea.tools/examples/notes-web/export.js) · [Tải về notes.json](https://rea.tools/examples/notes-web/notes.json)

> Tìm tập lệnh yêu cầu `notes.json`. Làm thế nào để nó thoát khỏi tiêu đề chứa dấu phẩy hoặc dấu ngoặc kép?

ĐỐI với ỨNG DỤNG JavaScript hoặc Electron đã cài đặt, hãy tiếp tục với [quy trình làm việc ứng dụng](https://rea.tools/guides/javascript/) để theo dõi các tệp và xử lý ranh giới.

Để kiểm tra phần thân yêu cầu và phản hồi HTTP, hãy dùng [Fiddler Everywhere: bản ghi SAZ, MCP và kỹ năng công khai](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md). Xuất SAZ ho?c HAR 1.2 để lấy Evidence từ bản ghi trong REA ngoại tuyến, hoặc kết nối máy chủ MCP của Everywhere để kiểm tra lưu lượng đã ghi cùng trợ lý của bạn.