要望
実機の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の「設定」を開き、「詳細」タブの「Webデベロッパ用の機能を表示」にチェックを入れる。
MacとiPhoneをケーブル接続。Safariのメニュー「開発」から、接続したiPhoneを選択し、開発に使用をクリック。対象サイトを選択。
うまくいけばMac上でWebインスペクタが開く。
通常と同じ操作感で要素検証や書き換えが可能。
もちろんコンソールも使えるので、スクリプトを叩いて実行することもできる。
いえーい
Macに接続したiPhoneが認識されないことがあるけど、ケーブル抜き差ししてると出てくる。