iOS6の時代からありましたが、iPadやiPhoneのsafariのデバグはPCの様にいかないところもありますが、Macがあればwebインスペクタという
機能を使用してデバグをすることができます。JavaScriptのエラーやCSSの状態などが確認できChromeについているような、Developer Toolとなっています。
Windowsのみ利用されている方は残念ですが利用できません。
iPhone、iPadとMac側の簡単な設定を行うだけで利用できるのでWebページ制作をされている方は是非利用してほしい機能です。
Contents
iPhone、iPad側の設定
「設定」から「Safari」→「詳細」→Webインスペクタ」をオンにします。
※これは一度行っておけば大丈夫です。
Mac側の設定
Mac上のSafariを起動します。
上部メニューに「開発」というメニューが表示されている場合は、「Webインスペクタを使用する」に進んでください。
表示されていない場合は、メニューから「Safari」→「環境設定」で設定を開き、「詳細」内の「メニューバーに”開発”メニューを表示」のチェックを入れます。
Webインスペクタを使用する
USBでMacに接続してiPhone、iPadのSafariでデバグしたいページを開きます。
ページを開いたらMac上のSafariを起動して、メニューの「開発」を開きます。
該当の端末名が表示されるので選択すると、対象のサイトがされるので選択します。
選択するとWebインスペクタが開き、デバグを行うことができます。
デバグ中は、iPadの画面上も選択箇所が薄ブルー表示され視覚的にもわかるようになっています。
詳細はAppleサイトに掲載されています。
Apple SafariのWeb インスペクタについての詳細はこちら
developer.apple.com/jp/safari/tools/