iPhone、iPadのWebコンテンツのデバグ Webインスペクタ

iOS6の時代からありましたが、iPadやiPhoneのsafariのデバグはPCの様にいかないところもありますが、Macがあればwebインスペクタという
機能を使用してデバグをすることができます。JavaScriptのエラーやCSSの状態などが確認できChromeについているような、Developer Toolとなっています。
Windowsのみ利用されている方は残念ですが利用できません。

iPhone、iPadとMac側の簡単な設定を行うだけで利用できるのでWebページ制作をされている方は是非利用してほしい機能です。

Contents

iPhone、iPad側の設定

「設定」から「Safari」→「詳細」→Webインスペクタ」をオンにします。
 ※これは一度行っておけば大丈夫です。

web-inspector
 

Mac側の設定

Mac上のSafariを起動します。
上部メニューに「開発」というメニューが表示されている場合は、「Webインスペクタを使用する」に進んでください。

表示されていない場合は、メニューから「Safari」→「環境設定」で設定を開き、「詳細」内の「メニューバーに”開発”メニューを表示」のチェックを入れます。


 

Webインスペクタを使用する

USBでMacに接続してiPhone、iPadのSafariでデバグしたいページを開きます。
ページを開いたらMac上のSafariを起動して、メニューの「開発」を開きます。
該当の端末名が表示されるので選択すると、対象のサイトがされるので選択します。

web-inspector2

選択するとWebインスペクタが開き、デバグを行うことができます。
デバグ中は、iPadの画面上も選択箇所が薄ブルー表示され視覚的にもわかるようになっています。
ipadsafari

 
詳細はAppleサイトに掲載されています。
Apple SafariのWeb インスペクタについての詳細はこちら
developer.apple.com/jp/safari/tools/

 
 
 

(Visited 709 times, 1 visits today)