---
title: 瀏覽器和網路分析-REA
url: https://rea.tools/zh-TW/guides/browser/
---

[首頁](https://rea.tools/zh-TW/) / [指南](https://rea.tools/zh-TW/guides/) /瀏覽器觀察

# 看看會發生什麼 當你點選。

使用小型瀏覽器應用程式連線操作，其網路請求和構建下載的JavaScript。

## 單擊匯出時會發生什麼？

[Notes 瀏覽器示例](https://rea.tools/examples/notes-web/)有一個**Export notes（匯出筆記）**按鈕。點選後載入 `notes.json`，把兩條筆記格式化為 CSV，再開始下載。

從點選到CSV下載

1. 01 · 你

   點選 Export notes

   在捕獲進行時，用瀏覽器執行操作。
2. 02\*REA

   記錄請求

   從所選頁面捕獲請求URL，響應狀態和JSON結構。
3. 03 · 程式設計助手

   讀取匯出程式碼

   把觀察到的請求與 `export.js` 中的 `fetch("./notes.json")` 關聯起來。

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

在單擊匯出註釋之前開始捕獲。

## 使用遠端除錯開啟Chrome

用獨立的瀏覽器配置和本地除錯埠開啟線上 Notes 示例。Linux 上：

啟動示例瀏覽器

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

在macOS或Windows上使用已安裝的瀏覽器的可執行路徑。 你可以將頁面URL替換為要檢查的其他頁面。

REA連線到這個現有的瀏覽器。 你可以控制頁面，執行操作，並在完成後關閉瀏覽器。

## 讓你的程式設計助手看一個動作

你的程式設計助手

用 REA 檢查這個頁面。我點選 Export notes 時，它發起什麼請求？CSV 是怎樣生成的？

示例 prompt。把除錯地址 `http://127.0.0.1:9222` 和頁面網址交給助手。等它開始捕獲，再點選按鈕。

你的程式設計助手發現頁面目標，啟動觀察視窗，並讀取生成的證據。 然後，它可以檢查匯出後面的指令碼。

## 或從終端捕獲

查詢頁面的目標ID:

查詢頁面

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

選擇網址為 Notes 示例的目標，把下面的 `TARGET_ID` 換成目標 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
```

讓命令連線幾秒鐘，再在瀏覽器中點選**Export notes**。觀察時間視窗結束後會返回結果。

捕獲的結果包括所選頁面、該視窗期間的網路活動以及JSON響應的形狀。 較早的請求在此捕獲之外。

## 讀取請求和匯出指令碼

在本地筆記示例中用REA4.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();
```

下載是使用JSON響應在頁面中構建的。 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 可在 REA 中離線取得擷取 Evidence，也可以連接 Everywhere 的 MCP 伺服器，讓代理檢查已擷取的流量。