メモログ

⛰ 塵が積もって山とならないメモのログ 👄

SafariからUIWebViewのHTMLをinspectする

iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more | Breaking the Mobile Webに、iPhone 5とiOS 6について詳しく載っていますが、その中で「Remote Debugging」というところの項目の話。

iOS 6からiPhone上に表示しているUIWebView(web view)をMacのSafariのWebインスペクタで表示することができるようになりました。通常のWebインスペクタ同様、Webインスペクタ上でiPhoneで出力している実際のHTML/CSSが確認することができるとともに、その場で変更を適用してみて表示を確認することができます。これは便利。PhoneGapで作成するアプリケーションはUIWebViewの中にHTMLを展開するので、これらもインスペクトすることができます。

使い方はiPhoneとMac Safariの両方でWebインスペクタの設定を有効にするだけです。

iPhone(iOS)の設定は、設定の画面から、Safariを選んで、メニューの一番下に「詳細」をタップすると「Webインスペクタ」の設定があるので「オン」にする。

Mac側の設定は、Safariの環境設定の詳細タブから、「メニューバーに”開発”メニューを表示」を有効にする。

そして、使用するiPhoneをUSBでMacにつなげて、Mac Safariの開発メニューを開くと、端末の名前が表示されているメニューがあるので、そこからUIWebViewを選択するとUIWebViewに読み込んでいるHTMLをWebインスペクタ上に表示することができます(下のスクリーンショットに表示されている「サンドボックス」というのはアプリケーションの名前)。

ただし、UIWebViewについてはXcodeでビルドして転送したアプリケーションのみが対象となります。AppストアやipaファイルなどでAd hocに配布されたアプリとかだとインスペクトする対象となりません。 詳細はSafari Web Content Guide: Inspecting Content in a Web Viewを参照。

便利!