Macを使用してiPhone、iPadのSafariでデバッグを行う方法

Google ChromeやSafariのブラウザには、デベロッパーツールと呼ばれる開発者向けメニューが付属しています。デベロッパーツールを使用することで、Webアプリケーションのデバッグを簡単に行うことができます。たとえば、Google Chromeのコンソールを使用することで、JavaScriptの実行エラーを検出しバグを解析できます。スタイルを操作することで、一時的にサイトのデザインを変更することもできます。

Webアプリケーション作成にはもはや欠かせないツールとなっているデベロッパーツールですが、iPhoneなどのスマートフォンでは使用できません。Google ChromeにはiPhoneやAndroidなどのスマートフォンでの表示をエミュレートする機能があります。ただ、Google Chrome上では正常に動作していても、実際にiPhoneのSafariで確認すると正しく動作しないということがよくあります。

今回は、Macを使ってiPhoneやiPadのSafari上でWebアプリケーションをデバッグする手法をご紹介します。Macを使用するメリットは、Mac、iPhoneの標準機能だけで実現できる点です。

MacとiPhoneを使ってWebアプリケーションのデバッグを行う

iPhoneのSafariでデバッグを行うためには、iPhone、Macで各々準備が必要です。この準備は初回のみ行う必要があります。次回以降は同様の手順を実施する必要はありません。

iPhoneの準備

iOSで「設定」→「Safari」→「詳細」と開き、「Webインスペクタ」をオンにします。念のため、Safariをいったん終了しておきます。

Macの準備

MacでSafariを開きます。メニューバーに「開発」が表示されていることを確認します。「開発」メニューが存在しない場合は、環境設定を開き「詳細」タブの「メニューバーに"開発"メニューを表示」をチェックしてください。

iPhoneとMacをUSBケーブルを使用して接続する

最後に、iPhoneとMacをUSBケーブルを使用して接続します。iPhoneやiPadに標準で付属しているLightningケーブルは、USB(Type-A)です。MacBook Pro等を使用している場合、USB(Type-C)しかない場合があります。その場合、Type-A、Type-C変換アダプターが必要になりますので準備しておきましょう。以上で準備は完了です。

iPhoneとMacのSafariを使用してデバッグを行う

では、iPhoneのSafariでデバッグを行ってみましょう。iPhoneのSafariでデバッグを行いたい任意のWebページを開きます。このWebページはローカルネットワーク上でも構いません。

続いて、iPhoneのSafariでデバッグしたいWebページを開いた状態で、MacのSafariを起動します。先にSafariを起動していても問題ありません。「開発」メニューを開くと、「iPhone」のデバイス名が表示されます。この名称は、iPhoneの「設定」→「一般」→「情報」で設定した名称が表示されます。人によって表示される名称が異なりますので注意してください。

「開発」メニューからデバイス名をたどると、iPhoneのSafariで現在開いているWebページのURLが表示されます。そのURLをクリックします。

クリックすると、MacのSafariでWebインスペクタが起動します。Webインスペクタは、iPhoneでのSafariの操作が記録されます。たとえば正常に動作しないJavaScriptがある場合、「コンソール」タブにエラーが表示されているはずです。また、「要素」タブを使用することでiPhone上でのサイトのデザインを一時的に操作することもできます。操作するデバイスがiPhoneに変わっただけで、MacのSafariで使用できるデベロッパーツールの機能をそのままiPhoneで使用できます。

iPhone単独ではSafariでデバッグを行うことはできませんが、Macを利用することで簡単にデバッグできます。良きデバッグライフを!

comments powered by Disqus