ウェブサービスとかを開発していると、エミュレーターでは起きないことが、実機で起きたりすることがままある。
iPhoneのjavascriptの挙動をconsole.logにだしてみたいこともある。
いちいちサーバーにプッシュして実機確認するわけにもいかないので、
ローカル環境にiPhoneをつないで、かつiPhoneのSafariのログをMacで取る方法を調べたが、
WifiにiPhoneを繋げてるとWebインスペクタが使えなかったり、そもそも情報が少なかったりするのでまとめました。
用意するもの
- Mac(homebrewとかDockerで開発環境があるもの）
- iPhone
- ライトニングケーブル
- wi-fi環境
事前準備
共通
iPhoneと、MacのSafariのバージョンを必ず揃えておく
Mac版Safari
Safari立ち上げ、メニューから、「Safari」＞「Safariについて」
iPhone版Safari
以下のようにまとめてくださっている方がいるので、参考にしてください
iOSのバージョンと Safariバージョンの対応表
Mac側
- ローカルの開発環境を立ち上げ見れるようにしておく。
- wi-fiにつながった状態で、「システム環境設定」＞「ネットワーク」を開き、IPアドレスをメモ。（iPhoneの接続で必要）
- Safariを立ち上げ、メニューより「Safari」＞「環境設定」、詳細タブの「メニューバーに開発メニューを表示」にチェック
iPhone側
- 設定より「Safari」＞「詳細」を開き、「Webインスペクタを表示」にチェック
やり方
1. Macのローカル環境をiPhoneで表示
MacとiPhoneが同じWifiに接続していることを確認したうえで、
事前に確認したMacのIPアドレスをiPhoneのSafariに入力。（今回は192.168.0.242)
場合によっては、接続に必要なポートも入力。（例 192.168.0.242:8080 など）
ここで表示できない場合は以下をチェック
- Macのセキュリティソフトとかでファイアウォールが動いていたら切る
- Macのローカル環境動いてる（Macのブラウザなどで確認）
- 同じWifi環境に接続しているかどうか
2. 【重要】iPhoneのwi-fi接続を一旦切る
3. iPhoneとMacを接続
iPhoneとMacを接続する。
Macとライトニングケーブルで接続すると、iPhone側に信頼するかどうか出てくるので「信頼する」を選択。
4. Mac版SafariでiPhoneのWebインスペクタをチェック
Mac版Safariのメニュー、「開発」のなかに、自身のiPhoneが表示され、開いているタブが出るので選択。
ここで表示できない場合は以下をチェック
- iPhoneロックかかってないか（ロック画面だとタブが出ない）
- Safariはシークレットモードになっていないか（なっていたら通常モードで開いておく）
- Wifiつながったままでないか（WifiつながっていたらiPhoneが出ないので、一旦切って、再度ケーブルを繋ぐ）
- ちゃんと信頼する、選択した？
- ケーブル抜き差ししてみる
うまく行くと、以下のような画面が出ます。
5. iPhoneのwi-fi接続を戻す
wifiにつながらないとローカル環境が見れないので、wi-fi接続をオンに戻す。
これで、コンソールでログを取ったりできるようになる。
画像はiPhoneのSafariでスクロール、console.logにスクロール値を吐き出している様子。