Help us understand the problem. What is going on with this article?

実機iPhoneのSafariでWebインスペクタを使ってデバッグする方法

More than 1 year has passed since last update.

要望

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

-> Android版

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

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

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

スクリーンショット 2019-11-26 16.25.39.png

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

iPhone Safariの設定

事前準備としてiPhone側の設定を行う。「設定」を開き「Safari」をタップ。
IMG_1943.PNG

画面下の「詳細」をタップ。
IMG_1944.PNG

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

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

Mac Safariの設定

Safariの「環境設定」を開き、「詳細」タブの「メニューバーに"開発"メニューを表示」にチェックを入れる。
スクリーンショット 2019-11-26 16.19.11.png

MacとiPhoneをケーブル接続。Safariの「開発」から実機iPhoneを選択し、対象サイトを選択。
スクリーンショット 2019-11-26 16.03.28.png

Mac上のWebインスペクタが開く。
スクリーンショット 2019-11-26 16.04.56.png

通常と同じ操作感で要素検証や書き換えが可能。
IMG_1950.PNG
もちろんコンソールも使えるのでスクリプトを叩いて実行することも可能。
スクリーンショット 2019-11-26 16.05.54.png
いえーい
IMG_1951.PNG
Macに接続したiPhoneが認識されないことがあるけど、ケーブル抜き差ししてると出てくる。

unsoluble_sugar
フルオタクエンジニア
https://unsolublesugar.com
techhunterorg
Always absorb new technology
https://techhunter.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away