ウェブ開発 / コンピューター

iPhoneのSafariのWebインスペクタを、ネットワーク経由でMacから使用する方法について。

この記事に書いてあること

  • iPhone上のSafariのWebインスペクタをMacで使用する設定方法
  • なぜかMac上でiPhoneが表示されない場合の対処例
  • iPhoneをMacにケーブル接続しなくても、ネットワーク経由でWebインスペクタを使用できるように設定する方法

環境

  • iPhone XS, iOS 13.5.1
  • MacBook Pro 16インチ 2019, macOS Catalina 10.15.5
  • 同一のApple IDでサインインしている
  • 同一のローカルネットに接続されている

iPhone側の設定

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

Mac側の設定

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

iPhone, Macともに設定をしたら…

iPhoneをMacにUSBケーブルで接続する。
Mac上のSafariで「開発」メニューを開くと、iPhoneがメニューに追加されている…ことになっているが、私の環境では表示されなかった。

で、検索したらこちらの記事を発見。
iPhone-safariのwebインスペクタをmac-safariで表示できない場合の解消方法（Tips of Rubbish）

これを参考にiTunes亡きいまは…
（iPhoneをMacにUSBケーブルで接続したまま）MacのFinderを起動する。
iPhoneを開き、「一般」→「Wi-FiがオンになっているときにこのiPhoneを表示」のチェックを外して、同期。

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

ネットワーク経由でWebインスペクタを使用できるように設定する

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

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

先ほどの「Wi-FiがオンになっているときにこのiPhoneを表示」のチェックを入れ直して同期しても問題ありませんでした。

USBケーブル接続解除したら認識しなくなったぞ？

一度USBケーブルで接続すると、接続解除後にしばらく認識しないぽい？
Mac側の再起動で再認識してくれるようです。