楽しくiPhoneライフ!SBAPP

Apple製品全般の最新情報やアプリのレビューを毎日お届け!

【iPhone】Safariのウェブインスペクター機能でページをデバッグする方法

cat
スポンサードリンク

今回はiPhoneのSafariで開いているウェブページをウェブインスペクター機能を使ってデバッグする方法を解説します。
自身で運営しているブログなどで、iPhoneでアクセスした時だけ起きる”環境依存の問題”が起きてしまった場合は、PCブラウザのUA(ユーザーエージェント)の偽装だけでは問題を再現出来ないケースがあります。
そういった時は、Mac(Safari)にiPhoneをLightningケーブルで接続して、iPhoneで開いているウェブページを直接デバッグすることで、環境依存の問題を起こしている原因を特定することができるかもしれません。

iPhoneのSafariを直接デバッグする手順

[設定] → [Safari] → [詳細] → [Webインスペクタ] をオンにする。
th_IMG_0363

iPhoneのSafariでデバッグしたいページをSafariで開いておく。

MacのSafariで[環境設定] → [詳細]から開発メニューがメニューバーに表示されるようにする。
th_2015-06-27 7.45.58

iPhoneとMacをLightningケーブルで接続する。

開発メニューから接続しているiPhone→調査したいページのタブをクリック。
th_2015-06-27 7.47.01

iPhone側で再度ページをリロードするとデバッグをすることができます。
th_2015-06-27 7.52.12

要素を視覚的に見つけることができる[調査]を使用する場合は、[調査]をクリック後にiPhoneを操作する必要があります。
th_2015-06-27 7.56.51

ドラッグすることで要素の範囲を選択することができます。
th_IMG_0365

つぶやき

kogoto_prof
iPhoneのSafariには開発メニューが用意されていないので、デバッグが出来ないと思い込みがちかもしれません。
Mac版Safariしか対応していないようなんですが、普段Windowsをお使いの場合って環境依存の問題がおきた場合、どのようにデバッグしているんでしょうか?
ちょっぴり気になります。

コメントはこちら

*
*
* (公開されません)

Return Top