REA と Chrome DevTools：エージェントによる調査か、直接のデバッグか？

ブラウザーを直接デバッグし、DOM/CSS を編集し、JavaScript にブレークポイントを置き、性能を調べたいなら Chrome DevTools を選びます。コーディングエージェントにブラウザーページを調べさせ、選んだスクリプトやリクエストを質問と結び付け、根拠とともに説明してほしいなら REA を選びます。

REA のブラウザーワークフローには、事前に用意したローカルのブラウザー接続が必要です。このコミュニティサイトに URL を入力するだけでサイトを調査するものではありません。この独立ガイドは REA の公式ブラウザードキュメントと Chrome DevTools ドキュメントを参照しています。

ブラウザーでの二つのワークフローはどう違う？

Chrome DevTools は Chrome に組み込まれています。各パネルで実行中のページを調べ、スタイルを変更し、JavaScript を一時停止し、リクエストを確認し、ユーザーフローを記録し、性能やメモリを調査できます。ブラウザーで自分が直接調査を操作します。Google の DevTools 概要で各ワークフローが説明されています。

REA はコーディングエージェントを、ページ構造、読み込まれたスクリプト、ネットワーク活動、要求したスクリーンショットなど、選択したブラウザーの観測結果に接続します。エージェントはそれらを使って範囲を絞った質問に答えたり、再実装を提案したりします。REA にはローカルアプリのファイルやネイティブバイナリ用の別のワークフローもあり、DevTools の通常のページデバッグの範囲を超える対象を扱います。REA READMEでは対象の種類が区別されています。

何をしたい？	推奨する出発点	入力	結果や利点
余白、レイアウト、CSS ルールをすぐに調整する	Chrome DevTools	選択した DOM 要素	スタイルの即時編集と見た目の確認
JavaScript の特定行で停止して状態を確認する	Chrome DevTools	実行中のページとブレークポイント	デバッガーの直接操作と変数の確認
読み込みのボトルネックやメモリの問題を見つける	Chrome DevTools	性能記録やメモリプロファイル	専用のタイムラインと診断パネル
ブラウザーの機能の仕組みをエージェントに尋ねる	REA のブラウザーワークフロー	準備済みのローカル接続と具体的な質問	選んだコードと観測結果をエージェントが解釈
Electron パッケージの機能をネイティブコードまで追う	REA のアプリ用・ネイティブ用の別ワークフロー	ローカルのアプリ成果物と適切なプロバイダー	複数の対象にまたがる根拠

Chrome DevTools が向いているのは？

調べたい箇所が分かっていて、すぐに反応を見たいときは DevTools を使います。要素の選択、スタイルの試行、ブレークポイントの設置、リクエストの確認は、短い直接操作で済むことがよくあります。エージェントとのやり取りに必要な追加の準備や解釈を省けます。

ブラウザーの性能やメモリを詳しく調べる場合も、DevTools が適した出発点です。Performance パネルで読み込みと実行時の記録を確認し、Memory ツールでメモリの問題を調査できます。REA がブラウザーの観測結果を収集できても、DevTools のすべての診断に相当するインターフェースがあるわけではありません。こうした作業は Google の Performance ドキュメントやメモリのドキュメントから始めてください。

リクエストの失敗を調べるなら、Network パネルでブラウザーが記録した活動を直接確認できます。エージェントは根拠の解釈を手伝えますが、レスポンスの状態やリクエストのペイロードで既に原因が分かる場合は、追加のエージェント層は不要です。

REA による調査が役立つのは？

関連する複数の観測を組み合わせる必要があり、コーディングエージェントにその関係を説明してほしいとき、REA が役立ちます。具体的な動作を尋ね、対象ページを明示し、関連する読み込み済みコードと観測結果を求めます。「このサイト全体を説明して」のような広い指示では、回答を明確に確認する手掛かりが少なくなります。

REA 公式の恐竜ゲームの例が具体例です。REA は Chromium 由来の恐竜ゲームが読み込んだスクリプトを読みます。エージェントは初速が 6、衝突しなかった更新ごとの加速が 0.001、最高速度が 13 であると特定し、そのルールを速度調整できる小さなゲームに使います。この例にはソースの参照箇所と、速度ルールを条件を揃えて確認した結果があります。

この例の作者は REA プロジェクトです。すべてのウェブサイトを再実装できる証拠でも、独立したコミュニティ利用者の体験談でもありません。当サイトのコミュニティ事例集は、投稿を出典とする報告と公式の実例を区別しています。

ブラウザー調査はどう準備する？

REA のブラウザー準備手順に従い、Chrome 系のブラウザーとローカルのデバッグ接続を用意します。対象ページの URL、ガイドで指定されたローカルエンドポイント、一つの質問をエージェントに渡します。ガイドに従って接続範囲を設定し、デバッグサービスを公開インターネットへ露出させないでください。

自分が所有するデモページなら、次のように指示できます。

REA と準備済みのローカルブラウザー接続を使って、
私のデモページを調べてください。検索ボックスが結果を更新する仕組みを説明してください。
関連する読み込み済みスクリプトとソースの場所を示してください。
説明の根拠となる観測結果と、不明な点を列挙してください。

返された根拠が、意図した操作と状態を説明しているかを確認します。アプリに複数のページや状態がある場合、ある状態のスクリプトだけでは別の状態を説明できないことがあります。必要に応じて DevTools で操作を手動で繰り返し、エージェントが示したリクエストやコード経路を確かめます。

どちらかでサイトのバックエンドのソースを見られる？

ブラウザーから見えるスクリプトやリクエストが示すのは、そのセッションに公開されたクライアント側の動作です。非公開のサーバー実装、データベースの内容、隠れた業務ルールを自動的に明らかにするものではありません。レスポンスは一つのリクエストに対するサーバーの返答を示せても、生成に至る内部処理をすべて説明するとは限りません。

別途、権限のある根拠で裏付けられない限り、エージェントが提案したバックエンド設計は仮説として扱います。観測した画面の再現と、元の実装の復元は別の主張です。REA の根拠と制約はその境界を明示する助けになりますが、エージェント自身も境界を守る必要があります。

ブラウザーのキャプチャには、セッション固有のデータ、リクエスト本文、機密性のある URL が含まれる場合があります。REA の解析はローカルですが、返されるツール結果はコーディングエージェントへ渡され、モデル提供元のデータポリシーに従います。REA 公式 FAQがこのデータの境界を説明しています。タスクと権限に見合う観測結果だけを共有してください。

選ぶときによくある質問は？

REA は Chrome DevTools の代わりになる？

REA はコーディングエージェント向けの調査インターフェースを提供します。DevTools は直接のブラウザーデバッグと専用の診断パネルを提供します。REA の発見を DevTools で確認するのは有用な組み合わせです。

ウェブサイトの調査に Hopper、Ghidra、IDA は必要？

REA のブラウザーワークフローには、互換ブラウザーと文書化されたローカル接続が必要です。ネイティブエンジンは別の高度なネイティブバイナリ解析で使うもので、通常のページ調査には使いません。

このウェブサイトで REA が動く？

いいえ。reverseengineeranything.tools はコミュニティの事例とガイドを公開するサイトです。調査には自分のコンピューターに公式 REA パッケージをインストールしてください。当サイトには解析用アップロードやホストされた実行機能はありません。

AI モデルなしで DevTools を使える？

はい。Chrome DevTools は Chrome で直接利用できます。REA CLI もコーディングエージェントなしで対応ワークフローを実行できます。一方、エージェントで REA を使う調査には、そのクライアントのモデル利用条件が適用されます。

エージェントと REA を使い始めるには？

当サイトの初めての調査ガイドを読み、公式のセットアップとブラウザーのガイドに従ってください。インストール済みサーバーのツール一覧を確認します。リポジトリの main に記載された機能は、公開パッケージより新しい場合があります。