Safari先端開発デバッグiOSパーフェクトソリューション(iPhone/iTouchなど)

転載:http://chon.io/blog/safari-ios-iphone-itouch-web-dev-inspector/
近代化するWebネットワークにおいて、各種の近代的なブラウザと携帯端末装置のユーザーの割合はますます高くなっています.私たちのWebフロントエンド開発者にとって、iOS Safariブラウザを実行するアップルモバイルデバイスは、私たちにとって無視できないものです.しかし、フロントエンドのページをテストしてデバッグする必要がある時、デスクトップ版Safariの表現はモバイル版Safariと同じではないです.  device-width したがって、私たちは直接iOSでSafariをテストとデバッグするしかないです.
本稿では、アップルの公式提供するiOSデバイス上のSafariブラウザのフロントエンドデバッグソリューションの詳細な操作方法を紹介します.筆者はiOS 6.0.1で動作するモバイル版SafariとOS X Mountain Lionで動作するデスクトップ版Safariを採用しています.理論的に正しい iPhone、iTouch、iPadなどのアップルモバイルデバイス上のモバイル版Safariブラウザが可能です.
設定で機能を開く
【iOS端末】:設定→Safari→高級→Web検診器→オン.(図のように)
【OS X】:Safari→好み設定→高級→メニューバーに「開発」メニューが表示されます.(図のように)
モバイルデバイスとコンピュータを接続して、モデレータを有効にします.
OS XでSafariを起動したら、iOSデバイスにUSBケーブルで正常に接続し、このモバイルデバイスでSafariを起動する.この時、コンピュータ上のSafariメニューの「開発」をクリックすると、iOSデバイスの名前が表示されます.サブメニューの項目はモバイルデバイス上のSafariのすべてのタブページで、いずれかをクリックしてデバッグを開始します.(図のように)
このデバッグでは、デスクトップオペレーティングシステムのSafariのデバッグと同じように、HTML要素、CSSおよびボックスモデルなどのチェックやリアルタイム編集、JavaScriptのデバッグ、ウェブページの時間軸、DOM元素ビューアなどの様々な機能を行うことができます.(図のように)
HTML構造及び対応CSS
同期iPhoneスクリーンショット
HTML構造及び対応CSS即時編集
同期iPhoneスクリーンショット
JavaScriptリアルタイムデバッグ
同期iPhoneスクリーンショット
ネットワーク要求時間線