ウェブサービスとかを開発していると、エミュレーターでは起きないことが、実機で起きたりすることがままある。
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にスクロール値を吐き出している様子。