iPhone実機で開いてるWebページのデバッグがしたい
開発中のWebサイトをiPhoneのSafariでアクセスしたところ、正常に動作していないことがわかりました。
WindowsやMacのブラウザでは正常に動作しているので、iPhone特有の症状のようです。
そこで、iPhone実機でデバッグする方法を調べたところ、MacのSafariを使った方法が一番簡単そうだったのでやってみました。
うまくできたので、忘れない内に記事に残します。
iPhoneの作業
まず、 設置 アプリを開きます。
Safari → 詳細 → Webインスペクタ をONにします。
次に、iPhoneのSafariでデバッグしたいページを開きます。
iPhoneとMacを接続する
MacとiPhoneをUSBで接続します。
iPhone側に このコンピュータを信頼しますか？ と表示されたら 信頼 をタップしてから、パスコードを入力します。
引用：https://support.apple.com/ja-jp/HT202778
Macの作業
まず、 Safari を起動します。
メニューバーの 開発 にカーソルを合わせます。
もし、 開発 が見当たらない場合は、メニューバーの Safari → 環境設定 → 詳細 → メニューバーに"開発"メニューを表示 をONしてください。
メニューバーの 開発 にカーソルを合わせると、iPhoneのデバイス名がリストにあるので、そこにカーソルを合わせます。
すると、iPhoneのSafariで開いているページのURLがリストで表示されるので、デバッグしたいページを選びます。
そうすると、 Webインスペクタ というウィンドウが立ち上がります。
これで、デバッグ作業ができるようになりました。
さいごに
簡単にできてよかったです。