要望

実機のiPhoneで特定のWebページに対し、Webインスペクタで中身を書き換えたり、コンソール経由でスクリプトを叩いて実行した結果を見たい。

iPhoneのSafariにもWebインスペクタがある

iPhone単体ではView Sourceなどのアプリを使うことで、Webページのソース確認はできるものの、Webインスペクタやコンソールによるスクリプト実行が出来ない。

また、MacのSafariやiOSエミュレーターでもある程度の表示確認はできるが、やはり実機での操作感や見た目の確認は重要である。

少し調べてみたところ、MacとiPhoneを接続することで、PCと同様に実機での動作確認が可能なことが判明したため、実際に試してみた。

事前準備としてiPhone側の設定を行う。「設定」-「アプリ」から「Safari」をタップ。

画面一番下の「詳細」をタップ。

「Webインスペクタ」をONにする。

iPhone側の設定はこれで完了。

Safariの「設定」を開き、「詳細」タブの「Webデベロッパ用の機能を表示」にチェックを入れる。

MacとiPhoneをケーブル接続。Safariのメニュー「開発」から、接続したiPhoneを選択し、開発に使用をクリック。対象サイトを選択。

うまくいけばMac上でWebインスペクタが開く。

通常と同じ操作感で要素検証や書き換えが可能。

もちろんコンソールも使えるので、スクリプトを叩いて実行することもできる。

いえーい

Macに接続したiPhoneが認識されないことがあるけど、ケーブル抜き差ししてると出てくる。