要望
実機のiPhoneで特定のWebページに対し、Webインスペクタで中身を書き換えたり、コンソール経由でスクリプトを叩いて実行した結果を見たい。
-> Android版
iPhoneのSafariにもWebインスペクタがある
iPhone単体ではView Sourceなどのアプリを使うことで、Webページのソース確認はできるものの、Webインスペクタやコンソールによるスクリプト実行が出来ない。
また、MacのSafariやiOSエミュレーターでもある程度の表示確認はできるが、やはり実機での操作感や見た目の確認は重要である。
少し調べてみたところ、MacとiPhoneを接続することで、PCと同様に実機での動作確認が可能なことが判明したため、実際に試してみた。
iPhone Safariの設定
事前準備としてiPhone側の設定を行う。「設定」を開き「Safari」をタップ。
画面下の「詳細」をタップ。
「Webインスペクタ」をONにする。
iPhone側の設定はこれで完了。
Mac Safariの設定
Safariの「環境設定」を開き、「詳細」タブの「メニューバーに"開発"メニューを表示」にチェックを入れる。
MacとiPhoneをケーブル接続。Safariの「開発」から実機iPhoneを選択し、対象サイトを選択。
Mac上のWebインスペクタが開く。
通常と同じ操作感で要素検証や書き換えが可能。
もちろんコンソールも使えるのでスクリプトを叩いて実行することも可能。
いえーい
Macに接続したiPhoneが認識されないことがあるけど、ケーブル抜き差ししてると出てくる。