Web Inspectorを使用してMobile Safariをデバッグする方法(iPhoneまたはiPad)

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

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

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

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

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

  • iPhone、iPad、iPod touchで位置情報とプライバシー設定をリセットします。 [設定]> [一般]> [リセット]> [位置とプライバシーをリセット]に移動します
  • コンピューターで、iPhone、iPad、またはiPod touchと同じApple IDにサインインしていることを確認します
  • コンピュータとiPhone、iPad、iPod touchの両方でSafari iCloud同期をオンにします
  • iPhoneまたはiPadで、 [設定]> [Safari]> [詳細設定]に移動し、 Webインスペクターをオンにします
  • コンピューターでSafariを開き、 Safariメニュー> [設定]> [詳細設定 ]に移動し、メニューバーに[開発]メニューを表示するをオンにします。

Macコンピュータが必要

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

同じApple IDとiCloud Syncを使用してください!

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

iDeviceの場合: 設定> Apple IDプロファイル> iCloud> Safari >トグルオン

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

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

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

現在地とプライバシー設定をリセットする

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

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

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

キーボードショートカットを切り替えて、Web開発ビューを終了します。

Webインスペクターを使用してモバイルSafariをデバッグする

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

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

3. iOSデバイスをUSBケーブルで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)であることを確認してください
  • Webインスペクターがオンになっていることを確認します。 iOSのアップデートでは、これをデフォルトのオフ設定に切り替える場合があります。 設定> Safari>詳細設定> Webインスペクターを確認してください
    • Web Inspectorをオフに切り替えて、10秒待ってからオンに切り替えます
  • 代わりにSafari Technology Previewブラウザをお試しください
  • MacでSafariを終了して再起動します。 MacのSafariがデバイスを認識し、デバッグを許可するかどうかを確認します
  • iDeviceがSafariの[開発]メニューに一瞬だけ表示されてから消える場合は、Safariのプライベートブラウジングモードを使用していないことを確認してください
  • アクティビティモニターを開き、Safariで何が起こっているかを確認する

リーダーのヒント

  • iOS 6以前で古いiDeviceを使用している場合、デバイスのSafari Webブラウザーには独自のデバッグコンソールが組み込まれています。 [設定] > [ Safari ] > [ 開発者 ] > [ デバッグコンソール ]に移動して、Safariのデバッグコンソールにアクセスするだけです