Webインスペクタを使ってiPhoneのデバッグを行う

Mac SafariのWebインスペクタを使ってiPhoneのデバッグを行う方法をメモ。

設定方法

まずはiPhoneの 設定 > Safari > 詳細 でWebインスペクタ をオンにします。

次にMacのSafariを起動して、メニューバーの Safari > 環境設定 を選択します。

詳細タブの「メニューバーに”開発”メニューを表示」にチェックを入れます。

これでiPhoneとMacの設定が完了したので、それぞれをケーブルで接続した上で、iPhoneのSafariでデバックを行いたいページを開きます。
MacのSafariに戻って、メニューバーの 開発 > XXXのiPhone(表記は使用デバイスなどによって異なります) > デバックページ を選択します。

これでデバックできる状態になりました。
接続しているiPhoneのWebインスペクタが表示されるので、要素を選択してみます。

iPhoneで確認すると、Webインスペクタで選択した部分がiPhone側でも選択状態になっているのが確認できました。

これで通常のWebインスペクタと同じく、要素の書き換えやconsoleの確認、JavaScriptの実行などがiPhone上で行えます。