現象
MacBook で Safari を開き、[開発] > [デバイス] > [ホスト] に移動する際に、表示される デバイスでWebインスペクタを有効にする 方法です。
対応
iPhoneで 設定 アプリを開く
スクロールし、Safari をタップする
画面 最下段の 詳細 をタップする(⬇︎)
Webインスペクタを オン にする(⬇︎)
Mac 側の準備と、つながらないときの確認点
iPhone 側で Web インスペクタをオンにしただけでは、まだ何も見えません。Mac 側にも準備が要ります。両方そろって初めて、Mac の Safari から iPhone の画面を覗けるようになります。
そもそも何ができるのか
Mac の Safari から、iPhone で開いているページの中身を直接調べられます。
- HTML の構造と、当たっている CSS を確認する
- JavaScript のコンソールログとエラーを見る
- 通信の内容を確認する
- その場でスタイルを書き換えて表示を試す
実機でしか再現しない不具合を追うときに要ります。「Mac のブラウザでは問題ないのに、iPhone だけ表示が崩れる」という場面です。React Native などで WebView を使っている場合も、この方法で中身を調べられます。
Mac 側の準備
Mac の Safari で「開発」メニューを表示させておく必要があります。既定では隠れているので、設定から出します。手順はSafari の開発メニューを表示する記事にまとめています。
接続してデバッグする
- iPhone と Mac を USB ケーブルでつなぐ
- iPhone に「このコンピュータを信頼しますか？」と出たら「信頼」を選ぶ
- iPhone のロックを解除しておく
- iPhone の Safari で調べたいページを開く
- Mac の Safari で「開発」メニューを開くと、iPhone の名前が並んでいる
- そこから開いているページを選ぶと、インスペクタが立ち上がる
デバイスが一覧に出てこないとき
ここでつまずくことが多いので、上から順にご確認ください。
- ケーブルが充電専用ではないか — データ通信に対応していないケーブルでは認識されません。見た目では区別がつきません
- 「信頼」を選んだか — 一度「信頼しない」を選んでいると出てきません。ケーブルを抜き差しして選び直してください
- iPhone がロックされていないか — 画面を点けて解除した状態にしてください
- ページを開いているか — Safari で何も開いていないと、一覧にデバイス名が出ても選ぶ先がありません
- Mac の Safari を再起動する — 設定を変えた直後は反映されていないことがあります
ひととおり試しても駄目な場合は、iPhone 側の Web インスペクタの設定をいったんオフにして、もう一度オンにしてみてください。
終わったらオフに戻す
Web インスペクタは開発用の機能です。普段使いの端末で常時オンにしておく必要はありません。調査が終わったらオフに戻しておくことをおすすめします。
※ 本節は 2026 年 7 月時点の整理です。iOS と macOS のバージョンによってメニューの名称や位置が異なる場合があります。
コメント