Webインスペクタ

スマホでだけレイアウトが崩れる、ボタンを押しても反応しない、H5ページが白い画面のまま——パソコンならF12を押せば一目で分かる問題も、スマホでは alert を仕込んで再ビルドして確認、の繰り返しになりがちです。Webインスペクタは、その開発者ツールを端末上の実際のページにそのままつなげます。ケーブルを挿せば、Elements・Console・Sources・Network・Storageがパソコンに開き、値を変えればスマホ側が即座に再描画されます。

Webインスペクタでデバッグ中のAndroidページ：左にライブのスマホ画面、右にElementsパネルと算出スタイル

一、パケットキャプチャとの役割分担

どちらも必要ですが、答える問いが違います。

	パケットキャプチャ	Webインスペクタ
答える問い	ネットワーク上で何が起きたか	ページの中で何が起きたか
見えるもの	リクエスト / レスポンス、ヘッダー、body（復号済み）	DOMツリー、算出スタイル、コンソールのエラー、コールスタック、CookieとStorage
典型的な疑問	このエンドポイントは何を返したか、パラメータは合っているか	このリクエストはどの行のJavaScriptが送ったのか、なぜスタイルが効かないのか

キャプチャはリクエストそのものは見えても、それを発行したコードまでは見えません。インスペクタならSourcesパネルでブレークポイントを張り、発行元の行まで遡れます。両方が同じソフトの中にあるので、行き来にツールを切り替える必要はありません。

二、はじめる前の、一度きりの準備

下の3つは並列の選択肢です。自分が調べたい対象のものだけ、一度やれば済みます。

iOS端末

ケーブルを接続し、端末をロック解除したままにして、Webインスペクタのスイッチをオンにします。

Safari：設定 → Safari → 詳細 → Webインスペクタ
Chrome：Chrome設定 → コンテンツの設定 → Webインスペクタ

この設定は、iOSでいちばん見落とされやすいステップです。オンにし忘れると、端末は認識されてもページ一覧が空のままになります。

Android端末

ケーブルを接続し、開発者向けオプションでUSBデバッグをオンにします。Androidエミュレータは、たいていケーブルなしでも自動的に検出されます。

パソコンのブラウザ

--remote-debugging-port=9222 を付けてChromeまたはEdgeを起動し、ページ一覧で更新を押します。

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

三、アプリ内のWebページも調べるなら、もうひとつ

ブラウザのタブだけで十分なら、この節は読み飛ばしてかまいません。

自分のアプリなら、コードに一度だけ書けば済みます。

// Android：Application または Activity の起動時に一度呼ぶ
WebView.setWebContentsDebuggingEnabled(true);

// iOS 16.4以降：WKWebViewを検証可能にする
webView.isInspectable = true

他人のアプリ、またはコードを変えたくない場合は、ダイアログで「アプリ内のページも含める」にチェックを入れると、起動中のアプリ内部のページも一覧に加わります。チェックを外せば、またブラウザのタブだけに戻ります。

	条件	補足
Android	端末がRoot化されていること	実行中のアプリのWebViewデバッグを有効化。再パッケージは不要
iOS	開発署名のアプリのみ	システム上の制約。App Storeからインストールしたアプリは対象外

いずれの方法でも、アプリの再ビルド・署名・端末への補助プログラムのインストールは一切不要です。セッションを終えれば、端末は元の状態に戻ります。

四、デバッグを開始する

準備が済めば、毎回やることはこれだけです。

新規キャプチャ → ターゲット（このPC / iOS / Android）→ 方式で「Webインスペクタ」を選択 → 更新 → ページを選ぶ → Inspect

新規キャプチャダイアログ：AndroidとWebインスペクタ方式を選択し、「アプリ内のページも含める」にチェックした後にデバッグ可能なページが一覧表示される様子

ページは所属アプリごとにグループ化されて並ぶので、アプリ内のページかブラウザのタブかがひと目で分かります。
Inspectを押すと、パソコンのブラウザに完全な開発者ツールが開き、端末上のそのページに接続されます。
いくつでも同時に開けます——1ページにつき1ウィンドウで、それぞれ独立して動作します。

五、何が見えるか

パソコンで毎日使っているのと同じパネルが、そのままスマホ上のページに向けられます。

パネル	できること
Elements	ページのライブなDOMツリーと、算出スタイル・継承関係・ボックスモデル。値を変えるとその場で端末側が再描画される——モバイルのレイアウトバグを突き止める最速の方法
Console	ページが出したすべてのエラーとログ、加えてその端末のそのページの中でJavaScriptを実行できるプロンプト
Sources	ページが読み込んだスクリプトとスタイルシートを一覧し、ブレークポイントを張り、コールスタックを追い、問題が起きた瞬間の変数を確認できる
Network	ページが発行したすべてのリクエストをウォーターフォールで表示：ステータス、種類、発生元、サイズ、時間、キャッシュの有無。下部にはリクエスト総数、転送量、DOMContentLoadedと完全な読み込み時間も
Storage	ドメインごとにグループ化されたCookie（有効期限、Secure、HttpOnly、SameSite）と、その隣にlocalStorageとsessionStorage——ログイン状態のバグを突き止める最速の方法

Webインスペクタのストレージパネル：iPhoneで開いているページのCookieテーブル。値、ドメイン、有効期限、Secure、HttpOnly、SameSiteの各列を表示

Androidの場合、ライブの端末画面がパネルの横に表示され、マウスでクリックやスクロールが可能です——スマホとキーボードを両手で操作する必要がなく、検証と操作が同じ画面の中で完結します。

六、対応範囲

	このPC	iOS	Android
ブラウザのタブ	✓	✓	✓
アプリ内のページ（WebView / WKWebView / H5）	✓	✓	✓
エミュレータ / シミュレータ	—	✓	✓
要素とスタイルのライブ検証・編集	✓	✓	✓
コンソール、ブレークポイント、ステップ実行	✓	✓	✓
ページ単位のネットワークウォーターフォール	✓	✓	✓
Cookie / localStorage / sessionStorage	✓	✓	✓
デバイス画面とパネルの同時表示	—	—	✓
証明書不要、プロキシ設定不要	✓	✓	✓

七、うまくいかないときは

症状	だいたいの原因	対処
端末は認識されるが、ページ一覧が空	iOSのWebインスペクタがオフ、または画面がロック中	第二節の通りオンにし、ロックを解除したまま更新する
Androidでアプリ内のページが出てこない	そのWebViewでデバッグが有効になっていない	自分のアプリなら `setWebContentsDebuggingEnabled(true)` を追加、他人のアプリなら「アプリ内のページも含める」をチェック（要Root）
iOSの特定のアプリだけどうしても出てこない	システム上の制約	App Storeのアプリは対象外。開発署名のアプリのみ対応
パソコンのブラウザでページが一覧に出ない	デバッグ用ポート付きで起動していない	`--remote-debugging-port=9222` を付けてChrome / Edgeを再起動し、更新する
Inspectを押しても画面が開かない	対応していないブラウザを使っている	AndroidとローカルのセッションにはChrome、Edge、Braveが必要

八、こんなときに使う

スマホでだけ問題が出る：レイアウト崩れ、タップ判定のずれ、フォント表示の異常。
H5ページが白い画面のまま、または動作しないため、コンソールのエラーとコールスタックを見たい。
あるリクエストがどのスクリプトから送られたのか知りたい——キャプチャだけでは分からない。
ログイン状態やキャッシュの問題を追っていて、CookieやlocalStorageの中身を実際に確認したい。
アプリ内に埋め込まれたH5をデバッグしたい——普通のツールではここに手が届かない。

はじめにに戻る · 関連：検査とデコード · iOSキャプチャ · Androidキャプチャ