【お手軽】iOS Safariで表示したWebサイトをMacOS SafariのWebインスペクタでデバッグする方法

はじめに

パフォーマンスチューニングをしていてモバイル通信回線を使った計測をしたい時にこの情報を見つけたので、実際に試した方法を残しておきたいと思います。

準備するもの

• iOS 6以上がインストールされたiPhone/iPod
• Safari 6がインストールされたMac
• MacとiPhone/iPadを繋ぐUSBケーブル

事前の設定

MacOS Safariの開発機能

すでにオンにしている方はこの作業を飛ばしてください。

まず、開発機能をオンにします。
Safariを開き、メニューから環境設定を開きます。詳細メニューの下にあるメニューに開発メニューを表示をオンにします。

メニューに開発と表示されていれば問題ありません。

iOS SafariのWebインスペクタ

iOS SafariもWebインスペクタの機能をオンにします。

環境設定を開き、Safariの設定を開きます。

Safariの設定から詳細に移動。

Webインスペクタをオンにします。

MacとiPhone/iPadをUSBケーブルで繋ぐ

USBケーブルで繋いでください。
これで準備は完了です。

デバッグ

iOS Safariを開き、デバッグしたいページを表示します。

MacのSafari開発者メニューからデバッグ対象のサイトを選択する

デバッグ対象のサイトを開いたら開発メニューから対象のデバイスが表示されます。

デバッグしたいサイトを選びます。

マウスオーバーするとiOS Safariの対象ページがフォーカスされた状態になります。

インスペクタを起動

選択するとWebインスペクタが起動します。

これで、iOS Safari上で開いているWebをごにょごにょできます。
どんなことができてどんな制限があるかなど調べていないので、Android環境も含め少し調べていこうかなと思います。

ちなみに、LTEをオフにすれば3G環境のテストもできますね。

参考サイト

• [iPhone] iOS6からの新機能！iPhone Safariで表示したページのデバッグがすんごく楽になるWebkit Webインスペクタがスゴい