Web Inspectorを使用してモバイルSafari（iPhoneまたはiPad）をデバッグする方法

多くの場合、モバイルデバイス用のWebページの開発や、ハイブリッドアプリのデバッグは困難です。 しかし幸運なことに、iOSで設計している人々にとっては、iOS 6から始めて、AppleはiOSでリモートWebインスペクター機能を提供しています。

Web Inspectorを使用すると、Webおよびモバイルアプリの開発者はmacOSおよびOS X Safari開発者ツールを使用して、iPadまたはiPhoneのモバイルSafariでWebコンテンツまたはハイブリッドアプリをリモートでデバッグできます。

これは、iOSでウェブページやハイブリッドアプリをデバッグ、最適化、変更するための簡単で実用的な方法です。

これらの開発ツールにアクセスするには、MacのSafariの[詳細設定]で[開発]メニューを有効にします。

クイックヒント

これらの簡単なヒントに従って、Webインスペクターを機能させ、Safari用にサイトまたはアプリをデバッグできるようにします。

• iPhone、iPad、またはiPodtouchで場所とプライバシーの設定をリセットします。 に移動 設定>一般>リセット>場所とプライバシーのリセット
• コンピュータでiPhone、iPad、またはiPodtouchと同じAppleIDにサインインしていることを確認してください
• コンピューターとiPhone、iPad、またはiPodtouchの両方でSafariiCloudの同期をオンにします
• iPhoneまたはiPadの場合は、 設定> Safari>詳細 オンに切り替えます Webインスペクター
• コンピューターでSafariを開き、 Safariメニュー>設定>詳細 とチェックマーク メニューバーに[開発]メニューを表示する

関連記事

• iPadまたはiPhoneでWebページのHTMLソースコードを表示します。 アプリは必要ありません！
• SafariでHTMLソースコードを表示する方法
• iPhoneおよびMac用のSafariでファビコンを表示する方法

Macコンピュータが必要

申し訳ありませんが、Windowsの方ですが、SafariのWebInspectorはMacとのみ互換性があります。

同じAppleIDとiCloudSyncを使用してください！

iDeviceとMacの両方が同じAppleIDでサインインしていることと、iCloudでSafariをオンに切り替えていることを確認してください。

iDeviceの場合： 設定> AppleIDプロファイル> iCloud> Safari >オンに切り替え

Macの場合： Appleメニュー>システム環境設定> AppleIDまたはiCloud> Safari>チェックマーク付き

そしてSafariも同じバージョンであることを確認してください

MacのSafariがiDeviceのSafariと同じバージョンであることを確認してください。 iOSバージョンまたはMacで実行されているSafariのバージョンを更新する必要がある場合があります。

場所とプライバシー設定をリセットする

1. に移動 設定>一般
2. 選択する リセット
3. 選択する 場所とプライバシーをリセット

Web開発者向けMacのプロキーボードショートカットのヒント

SafariでCtrl + Command + Rを押すと、デバイスを選択することで、特定のデバイスでWebサイトがどのように表示されるかを確認できます。

WebInspectorを使用してモバイルSafariをデバッグする

1. iPad、iPhone、またはiPod touchで、をタップします 設定> Safari>詳細 オンに切り替えます Webインスペクター。 まだ有効になっていない場合はJavaScriptを有効にします

2. MacでSafariを起動し、 Safariメニュー>設定>詳細 次に、「メニューバーに[開発]メニューを表示する」まだ行っていない場合

3. USBケーブルでiOSデバイスをMacに接続します。 これは非常に重要です。ケーブルを使用してデバイスを手動で接続する必要があります。 WiFi経由では機能しません！

4. iPadで、デバッグするWebサイトを開き、MacでSafariを開いて、「発展」メニュー。 これで、Macに接続したiDeviceが表示されます。 iDeviceで開いているページがない場合は、「検査可能なアプリケーションはありません」というメッセージが表示されます。

5. 次に、Macでデバッグするのと同じように、モバイルSafariで開いているページをデバッグし、DOM要素を検査し、CSSを変更し、ページパフォーマンスを測定し、Javascriptコマンドを実行します。

デバッガーツールを使用して、WebページのJavaScriptエラーの原因を見つけるのに役立ててください。 ブレークポイントを追加し、JavaScriptをデバッグし、実行時に変数の値を検査できます。

Safariは、CSS、HTML、およびJavaScriptエラーも検出する必要があります。 また、デバッガーに各エラーの詳細が表示されます。

Safariの開発メニューにiDeviceが表示されませんか？

•  SafariのキャッシュとCookieをクリアします
• アップデートが利用可能な場合は、MacとiDeviceでSafariをアップデートします。
  • ベータ版のiOSまたはmacOSバージョンを実行している場合は、すべてのデバイスで最新のベータ版を実行する必要がある場合があります
• Macで別のケーブルやポートを試してください。 それを確認してください ケーブルは、純正のApple LightningケーブルまたはMFI認定済み（Made For iPhone）です。
• WebInspectorがオンになっていることを確認します。 iOSのアップデートでは、これがデフォルトのオフ設定に戻ることがあります。 だから、必ずチェックしてください [設定]> [Safari]> [詳細]> [Webインスペクター]
  • Web Inspectorをオフに切り替えて、10秒待ってから、オンに戻します。
• 代わりにSafariテクノロジープレビューブラウザをお試しください
• MacでSafariを終了し、再起動します。 MacのSafariがデバイスを認識し、デバッグを許可するかどうかを確認します
• Safariのプライベートブラウジングモードを使用していないことを確認してくださいif iDeviceがSafariの[開発]メニューに短時間表示された後、消える
• アクティビティモニターを開き、Safariで何が起こっているかを確認します

読者のヒント 

• iOS 6以前で古いiDeviceを使用している場合、デバイスのSafariWebブラウザには独自のデバッグコンソールが組み込まれています。 Safariのデバッグコンソールにアクセスするには、 設定 > サファリ > デベロッパー > デバッグコンソール