iOS 6以前には、iPhoneのSafariブラウザーから開発者がウェブページの問題を追跡するために使用するデバッグコンソールを開く事ができました。

iOS6以前をご利用のお客様は「設定」>「Safari」>「開発者」>「デバッグコンソール」でアクセスする事ができます。デバッグコンソールを活用する事でiPhone上のSafariのCSS、HTML及びJavaScriptコードのエラーを検出し詳細を確認する事ができます。



最新のiOSにはWebインスペクタが搭載されており、こちらはiPhoneまたはその他iOS搭載の端末のSafariの設定でオンにできます。WebインスペクタはiPhoneをMacに接続し、MacでSafariを開き、「環境設定」の「メニューバーに”開発”メニューを表示」チェックしてください。

注意事項:こちらの記事に掲載されている情報は、iOS 6から12搭載のiPhoneとその他iOSデバイスと、Mac OS X 10.5 Leopard以降のMacに適用されます。


iOS 6以降でWebインスペクタをオンにする方法


既定値ではWebインスペクターは有効化されていません。設定で有効化する事ができます。手順は次の通りです:


1. iPhoneのホームスクリーンから「設定」を開く



2. スクロールし、Safariをタップする。



3. 画面下の「詳細」をタップする。




4. Webインスペクタ」を「オン」にする



iPhoneをMacのSafariに接続する


Webインスペクタを使用する場合、iPhoneまたは他のiOS端末をSafariを開いているMacに有線接続してください。


Safariを開き、以下の手順に沿う:


1. Safariのメニューから「環境設定」を開きます。



2. 「詳細」タブを選択する。



3. 「メニューバーに”開発”メニューを表示」にチェックを入れる。



4. 「環境設定」画面を閉じる。


5. Safariの「開発」から「Webインスペクターを表示/接続」をクリックする。



MacとiPhoneが接続されている場合「開発」から実機iPhoneを選択肢、対象サイトを選択できます。通常と同じ操作感で要素検証や書き換えが可能です。