iOS デバイス上のSafari/ChromeのリモートデバッグをMacで使用する設定方法です
iOS デバイスをMacにケーブル接続しなくても、ネットワーク経由でWebインスペクタを使用できるように設定する方法
下準備
必要なもの
Macに接続ケーブル(初期設定で使う)
Wifi
同一LAN上で通信可能な状態でなければならないこと
iOS デバイス
Safari
「設定」→「Safari」→「詳細」→「Webインスペクタ」をオンにする。
Google Chrome
必要スペック:
Chrome アプリを起動し、「設定」 に移動
「コンテンツの設定」→「ウェブ インスペクタ」を有効
この設定を変更したら Chrome アプリを再起動
Mac
Safariを起動して、「設定」→「詳細」→「メニューバーに”開発”メニューを表示」にチェックを入れる。
初期設定
Macにケーブルで接続する
(iPhoneをMacにケーブルで接続したまま)MacのFinderを起動する。iPhoneを開き、「一般」→「Wi-FiがオンになっているときにこのiPhoneを表示」のチェックを外して、同期。
これでMac上のSafariで「開発」メニューにiPhoneが表示された
Mac上のSafariの「開発」メニューから「○○のiPhone」(iPhoneに設定してある名前)→「ネットワーク経由で接続」にチェックを入れる。
これでケーブルで接続していなくても、同じネットワークにいればWebインスペクタを使用できるようになる
実際操作
実際の操作と画面はこんな感じになるね
参考資料
iOS 16.4 以降の Chrome でのウェブサイトのデバッグ | Blog | Chrome for Developers
余談
たまにIphoneの接続は途切れるんだよね、、、(有線の方が安定してデバッグできるのでは?
まぁ、なんか色んな方法があるみたいなので、順次実験していい方法があれば更新するね(時間があれば