IPhoneデバッグコンソールまたはWebインスペクターをアクティブ化する方法

SafariモバイルのWebサイトでバグやその他の問題が発生した場合は、WebInspectorツールを使用して調査してください。 この記事では、iPhone用のSafariコンソールを使用してMacコンピューターを使用してエラーをデバッグする方法について説明します。 手順は、iOS 14、iOS 12、またはiOS 11を搭載したiPhone、およびmacOS Big Sur（11.0）、macOS Catalina（10.15）、またはmacOS Mojave（10.14）を搭載したMacに適用されます。

iPhoneまたはその他のiOSデバイスでWebInspectorをアクティブ化する

ほとんどのiPhoneユーザーはWebInspectorを使用しないため、WebInspectorはデフォルトで無効になっています。 ただし、開発者または興味がある場合は、いくつかの短い手順でアクティブ化できます。 方法は次のとおりです。

1. iPhoneを開く 設定 メニュー。

   iOSの初期バージョンを搭載したiPhoneでは、次の方法でデバッグコンソールにアクセスします。 設定 > サファリ > デベロッパー > デバッグコンソール. iPhoneのSafariがCSS、HTML、およびJavaScriptエラーを検出すると、各詳細がデバッガーに表示されます。

2. 下にスクロールしてタップします サファリ iPhone、iPad、またはiPodtouchでSafariWebブラウザに関連するすべてのものを含む画面を開きます。

3. ページの一番下までスクロールして、 高度.

4. 移動します Webインスペクター スイッチをに切り替えます オン ポジション。

   

iOSデバイスをMacのSafariに接続します

Web Inspectorを使用するには、iPhoneまたは別のiOSデバイスをSafariWebブラウザを搭載したMacに接続します。 [開発]メニューを有効にします.

1. Safariを開いた状態で、 サファリ メニューバーから選択します 環境設定.

   

2. を選択 高度 タブ。

   

3. を選択 メニューバーに[開発]メニューを表示する チェックボックスをオンにして、設定ウィンドウを閉じます。

   

4. Safariメニューバーから、 発展 接続されているiOSデバイスの名前を選択し、下に表示されるURLを選択します サファリ そのサイトのデバッグコンソールを開きます。

   

   デバイスを接続したら、Macを使用してデバッグするWebサイトを調べ、Safariモバイルブラウザーで開きます。

Web Inspectorとは何ですか？

Web開発者は、Web Inspectorを使用して、MacおよびiOSデバイス上のWebサイトを変更、デバッグ、および最適化します。 Web Inspectorを開くと、開発者はWebページ上のリソースを検査できます。 Web Inspectorウィンドウには、編集可能なHTMLと、Webページのスタイルとレイヤーに関するメモが別のパネルに含まれています。

iOS 6より前は、iPhone SafariWebブラウザ 開発者がWebページの欠陥を見つけるために使用する組み込みのデバッグコンソールがありました。 iOSの最近のバージョンでは、代わりにWebInspectorを使用しています。

Safari9とOSX Mavericks（10.9）で、Appleは レスポンシブデザインモード Webインスペクターで。 開発者は、この組み込みのシミュレーターを使用して、Webページがさまざまな画面サイズ、解像度、および向きにどのように拡大縮小するかをプレビューします。