---
title: Анализ браузера и сети — REA
url: https://rea.tools/ru/guides/browser/
---

[Главная](https://rea.tools/ru/) страница / [Руководства](https://rea.tools/ru/guides/) / Обзор браузера

# Посмотрим, что произойдет когда вы нажмете.

Используйте небольшое браузерное приложение для подключения действия, его сетевого запроса и JavaScript, который создает загрузку.

## Что происходит, когда вы нажимаете кнопку Экспортировать?

В [примере браузера Notes](https://rea.tools/examples/notes-web/) есть кнопка **экспорта заметок**. При нажатии на нее загружается файл `notes.json`, две заметки форматируются как CSV и начинается загрузка.

От клика до загрузки CSV

1. 01 · Вы

   нажимаете кнопку Экспорт заметок

   и выполняете это действие в своем браузере во время выполнения записи.
2. 02 · REA

   Запишите запрос

   , захватите URL-адрес запроса, статус ответа и структуру JSON с выбранной страницы.
3. 03 · Ваш агент

   прочитал экспортный код

   , подключающий наблюдаемый запрос к `fetch("./notes.json")` в `export.js`.

`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, чтобы просмотреть эту страницу, пока я нажимаю "Экспортировать заметки". Какой запрос она отправляет и как устроен CSV?

Пример запроса. Укажите вашему агенту конечную точку отладки, `http://127.0.0.1:9222` и URL-адрес страницы. Пусть он запустит запись до того, как вы нажмете.

Ваш агент обнаруживает целевую страницу, запускает окно просмотра и считывает полученные данные. Затем он может проверить сценарий, лежащий в основе экспорта.

## Или захват с терминала

Найдите целевой идентификатор страницы:

Найдите нужную страницу

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

Выберите целевой объект с помощью URL-адреса, приведенного в примере Notes. Замените `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
```

Дайте команде подключиться в течение нескольких секунд, затем нажмите "**Экспортировать заметки**" в этом браузере. Результат появится после завершения просмотра.

Полученный результат включает выбранную страницу, сетевую активность в течение этого окна и форму ответа в формате JSON. Предыдущие запросы не входят в этот список.

## Прочитайте запрос и экспортируйте скрипт

Записано с помощью REA 4.1.0 на примере local Notes

| Зафиксированный факт | Ценность |
| --- | --- |
| Запрос | `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` качестве инициатора запроса. Прочитайте захваченный исходный код сценария, чтобы увидеть, как используются данные:

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 без подключения к сети или подключите MCP-сервер Everywhere, чтобы исследовать записанный трафик вместе с агентом.