楽しくiPhoneライフ!SBAPP

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

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

つぶやき


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

著者情報

Ryo Funaki
iPhoneの使い方、iOSアップデートの最新情報、iOSや各種SNSの不具合やトラブル対処法など、How To情報を中心に届けるブログ「SBAPP」を運営。

コメント(承認制)

*

Return Top