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

Webkit

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

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

準備するもの

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

事前の設定

MacOS Safariの開発機能

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

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

MacOS 開発メニューの表示

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

iOS SafariのWebインスペクタ

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

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

iOS Safari設定を開く

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

Safariの設定の詳細を選択

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

iOS Safari Webインスペクタをオン

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

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

デバッグ

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

デバッグ対象のサイト

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

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

デバッグできるデバイスが表示される

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

デバッグ対象のサイトを選択する

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

選択されたサイト

インスペクタを起動

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

起動したWebインスペクタ

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

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

参考サイト