---
title: Аналіз браузера та мережі-REA
url: https://rea.tools/uk/guides/browser/
---

[Головний](https://rea.tools/uk/) сторінка / [Керівництво](https://rea.tools/uk/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, щоб досліджувати записаний трафік разом з агентом.