スマホの中のWebページを、パソコンからデバッグ

スマホをUSBでPCにつなぎ、Trace Eagleで新規キャプチャ → iOSまたはAndroid → 方式「Webインスペクタ」を選び、ページを選んでデバッグを押します。デスクトップに完全なElementsパネルが開き、端末のページのライブDOMとCSSが表示されます。ここで値を変えれば、スマホ側の表示が即座に変わります。

できます。すでにデバッグを許可しているWebViewはそのまま一覧に出ます。公開していないアプリでも「アプリ内のページも含める」にチェックすれば、起動中のアプリ内のページが一覧に加わります。これにはroot化された端末が必要ですが、アプリの再ビルドや再パッケージ、恒久的なインストールは一切ありません。

端末を接続してロックを解除し、設定 → Safari → 詳細 → Webインスペクタ（またはChrome設定 → コンテンツ設定 → Webインスペクタ）を有効にします。あとはTrace Eagleで端末とページを選び、デバッグを押すだけ。Elements、Console、Sources、Network、Storage、Layersなどを備えた完全なWebインスペクタがデスクトップのブラウザに開きます。

同じ役割をこなし、さらに広くカバーします。ブラウザ内蔵のリモートデバッグはAndroid上のChromiumターゲットだけですが、ここではiOS・Android・ローカルブラウザが同じ選択画面に並び、ページはアプリごとに整理され、アプリ内H5はチェックひとつで追加でき、しかも同じアプリのHTTPS通信を復号できるキャプチャ機能がすぐ隣にあります。

通常のデバッグには不要です。ブラウザのタブや、すでにデバッグを許可しているアプリなら、素の端末で動きます。root化されたAndroid端末が必要なのは「サードパーティアプリ内のページも一覧に加える」オプションだけで、iOSではどのアプリを含められるかはシステムが決めます。

どれも不要です。実機リモートデバッグはUSB接続を経由するため、プロキシ設定も、端末へのルート証明書のインストールも、アプリへのSDKやライブラリの追加も要りません。

キャプチャは「ネットワークに何が流れたか」に答えます。リクエスト、レスポンス、ヘッダ、ボディを復号して見せます。Webインスペクタは「ページで何が起きたか」に答えます。DOM、スタイル、Consoleのエラー、どのスクリプトがそのリクエストを出したか、その前にCookieやストレージに何が入っていたか。Trace Eagleは両方を備えているので、ツールを切り替えずに行き来できます。

AndroidとローカルブラウザのセッションはChrome、Edge、Braveで開きます（Trace Eagleが自動で起動します）。iOSのセッションはどのブラウザでも動作します。

使えます。Androidエミュレータはケーブルなしでも通常は自動検出され、PC上のiOSシミュレータも認識されます。手順は実機とまったく同じです。

無料です。Trace Eagleの他の機能と同じく完全無料で、macOS・Windows・Linuxで使え、機能制限もありません。