iPhone実機で開いてるWebページのデバッグがしたい

開発中のWebサイトをiPhoneのSafariでアクセスしたところ、正常に動作していないことがわかりました。
WindowsやMacのブラウザでは正常に動作しているので、iPhone特有の症状のようです。

そこで、iPhone実機でデバッグする方法を調べたところ、MacのSafariを使った方法が一番簡単そうだったのでやってみました。

うまくできたので、忘れない内に記事に残します。

iPhoneの作業

まず、 設置 アプリを開きます。
Safari → 詳細 → Webインスペクタ をONにします。

次に、iPhoneのSafariでデバッグしたいページを開きます。

MacとiPhoneをUSBで接続します。

iPhone側に このコンピュータを信頼しますか？ と表示されたら 信頼 をタップしてから、パスコードを入力します。

引用：https://support.apple.com/ja-jp/HT202778

まず、 Safari を起動します。

メニューバーの 開発 にカーソルを合わせます。

もし、 開発 が見当たらない場合は、メニューバーの Safari → 環境設定 → 詳細 → メニューバーに"開発"メニューを表示 をONしてください。

メニューバーの 開発 にカーソルを合わせると、iPhoneのデバイス名がリストにあるので、そこにカーソルを合わせます。
すると、iPhoneのSafariで開いているページのURLがリストで表示されるので、デバッグしたいページを選びます。

そうすると、 Webインスペクタ というウィンドウが立ち上がります。

これで、デバッグ作業ができるようになりました。

簡単にできてよかったです。