TSMH’s blog

多趣味人間のメモ

MacでiOS デバイスのSafari/Chromeのリモートデバッグ

iOSバイス上のSafariChromeのリモートデバッグMacで使用する設定方法です

iOSバイスMacにケーブル接続しなくても、ネットワーク経由でWebインスペクタを使用できるように設定する方法

下準備

必要なもの

Macに接続ケーブル(初期設定で使う)

Wifi

同一LAN上で通信可能な状態でなければならないこと

iOSバイス

Safari

「設定」→「Safari」→「詳細」→「Webインスペクタ」をオンにする。

Google Chrome

必要スペック:

Chrome アプリを起動し、「設定」 に移動
「コンテンツの設定」→「ウェブ インスペクタ」を有効
この設定を変更したら Chrome アプリを再起動

Mac

Safariを起動して、「設定」→「詳細」→「メニューバーに”開発”メニューを表示」にチェックを入れる。

初期設定

Macにケーブルで接続する

(iPhoneMacにケーブルで接続したまま)MacのFinderを起動する。iPhoneを開き、「一般」→「Wi-FiがオンになっているときにこのiPhoneを表示」のチェックを外して、同期。

これでMac上のSafariで「開発」メニューにiPhoneが表示された

Mac上のSafariの「開発」メニューから「○○のiPhone」(iPhoneに設定してある名前)→「ネットワーク経由で接続」にチェックを入れる。

これでケーブルで接続していなくても、同じネットワークにいればWebインスペクタを使用できるようになる

実際操作

実際の操作と画面はこんな感じになるね

参考資料

iOS 16.4 以降の Chrome でのウェブサイトのデバッグ  |  Blog  |  Chrome for Developers

余談

たまにIphoneの接続は途切れるんだよね、、、(有線の方が安定してデバッグできるのでは?
まぁ、なんか色んな方法があるみたいなので、順次実験していい方法があれば更新するね(時間があれば