---
title: 浏览器和网络分析-REA
url: https://rea.tools/zh-CN/guides/browser/
---

[首页](https://rea.tools/zh-CN/) / [指南](https://rea.tools/zh-CN/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`

在点击 Export notes 之前开始捕获。

## 以远程调试方式启动 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，即可离线获取捕获 Evidence 交给 REA；也可以连接 Everywhere 的 MCP 服务器，让编程助手检查已捕获的流量。