---
title: ブラウザとネットワーク分析-REA
url: https://rea.tools/ja/guides/browser/
---

[ホーム](https://rea.tools/ja/) / [ガイド](https://rea.tools/ja/guides/) /ブラウザ観察

# 何が起こるか見てください あなたがクリックすると。

小さなブラウザアプリを使用して、アクション、そのネットワーク要求、およびダウンロードを構築するJavaScriptを接続します。

## [エクスポート]をクリックするとどうなりますか?

ザ- [ノートブラウザの例](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。 クリックする前にキャプチャを開始しましょう。

エージェントはページターゲットを検出し、観察ウィンドウを開始し、結果の証拠を読み取ります。 その後、エクスポートの背後にあるスクリプトを検査できます。

## または端末からキャプチャします

ページのターゲットIDを検索する:

ページを探す

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

Notesの例のURLでターゲットを選択します。 置換 `TARGET_ID` そのIDで以下を実行し、次に実行します:

次の10秒をキャプチャします

```
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応答の形状が含まれます。 以前の要求はこのキャプチャの外にあります。

## リクエストとエクスポートスクリプトを読む

ローカルノートの例で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 サーバーを接続して、エージェントと一緒に記録済みの通信を調べることもできます。