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

iOS６以前をご利用のお客様は「設定」>「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を選択肢、対象サイトを選択できます。通常と同じ操作感で要素検証や書き換えが可能です。