サポートに連絡する| システムステータス
ページコンテンツ

    モバイルデバイスでのデバッグ

    このトピックでは、モバイルデバイスでの JavaScript のデバッグについて学びます。開発中、モバイルプラットフォームでのコンテンツのテストとデバッグは非常に困難な場合があります。

    概要

    この文書では、モバイルデバイスでのデバッグを開始する方法と、次のソリューションについて説明します。

    • iOS デバイスでのデバッグ
    • Androidデバイスでのデバッグ
    • モバイルデバイスでのチャールズの使用

    iOSのデバッグ

    iOS デバッグの最小要件

    • Mac macOSで動作するSafariバージョン6以降
    • iOS6+搭載のiPhoneかiPad

    Safari リモートデバッグを使用する

    アップルの iOS 6 アップデートでは Safari リモートデバッグが導入されました。これにより、iOS デバイス上の Safari アプリでウェブページをデバッグできます。開始するには、次の手順に従います。

    1. USBケーブルでiOSデバイスをマシンに接続します。
    2. デバイスで、 [設定]アプリを開きます。Safari を選択し、ページの一番下までスクロールして、詳細メニューを開きます。[ Web インスペクタ ] オプションを有効にします。
      Web Inspector
      ウェブインスペクタ
    3. デバイス上でも Safariアプリを開き、任意のウェブページを参照します。
    4. Mac で Safari を起動し、[ 環境設定] ( Safari > [環境設定] ) を開き、[ 詳細設定] に移動します。セクション。メニューバーに [ 現像メニューを表示]オプションを有効にします。
      Show Develop Menu
      [開発] メニューを表示
    5. を開きます発展メニュー。iOS デバイスがリストに表示されます。デバイス名の上にマウスを置くと、デバイス上で閲覧したサイトの URL が表示されます。
      Find the Device
      デバイスを見つける
    6. URL を選択すると、 Webインスペクタウィンドウが開き、デスクトップからモバイルブラウザでコンテンツをプレビュー、検査、デバッグできます。
      Debug on Desktop
      デスクトップでデバッグ
    7. [ リソース ] セクションでは、Web ページをプレビューして検査できます。Web インスペクタで要素の上にカーソルを置くと、iOS デバイスのブラウザで対応する要素がハイライトされます。
      Inspecting Elements
      エレメントを検査する
    8. また、[ デバッガ]セクションと [ コンソール]セクションを使用して、ブレークポイントを設定したり、データをログに記録したりして、ページをさらにデバッグすることもできます。

    Androidのデバッグ

    Androidデバッグの最小要件

    • Chrome 32+はMacかWindowsで動作している
    • アンドロイド32+用のクローム付きAndroidデバイス

    注:このセクションの手順は、Android 4.3を実行しているデバイスを使用して作成されました。

    デバイスでのデバッグの有効化

    デバイスでコンテンツのデバッグを開始する前に、デバイス設定で USB デバッグを有効にする必要があります。

    1. Android 4.2以降を実行している場合は、デバイスのを有効にする必要があります開発者向けオプション USBデバッグをオンにする前に。デバイスで [ 設定]アプリを開き、[ 電話について]メニューを選択します。デバイスのビルド番号を見つけて 7 回タップします。
    2. お使いのデバイスをヒット戻るボタンをクリックすると、開発者向けオプション設定にリストされているメニュー。
      Get to Developer Options
      開発者オプションへの入手
    3. [ 開発者オプション ] メニューを開き、チェックボックスをオンにして USB デバッグを有効にします
      Enable USB Debugging
      USB デバッグを有効にする

    Android用のChromeを使用したリモートデバッグ

    端末で USB デバッグが有効になったので、Chrome でリモートデバッグを開始するには、次の手順に従います。

    1. コンピュータで Chromeを起動し、about:inspectを参照します。[ デバイス]ページで、[USB デバイスの検出 ] オプションを有効にします。
      Discover USB Devices
      USBデバイスの検出
    2. USBケーブルでデバイスをマシンに接続します。デバイスでは、USBデバッグを許可するかどうかを尋ねるダイアログが表示されます。[OK]を選択して、コンピュータとデバイスへの接続を許可します。
      Allow Connection to Device
      デバイスへの接続を許可
    3. デバイスで Chromeアプリを開き、Web ページを参照します。
    4. 戻るクロムお使いのコンピュータで。about:inspectページに、接続されているデバイスが表示されます。端末名の下に、端末の Chrome で開いているすべてのページの一覧が表示されます。
      Connected Devices
      接続されたデバイス
    5. Web ページのデバッグを開始するには、ページ URL の下にある検査リンクを選択します。Chromeの開発ツールが開きます
      Inspect Web Page
      Web ページの検査
    6. の左側に要素タブで、デバイスアイコンを選択して、DevToolのスクリーンキャスト機能を開くことができます。これにより、モバイルデバイスに表示されるコンテンツのライブプレビューを開くことができます。スクリーンキャストを使用してデバイスを操作する方法の詳細については、 Google のドキュメントを参照してください

    チャールズ・フォー・モービル

    Charles は、自分のコンピュータ上で実行できる Web プロキシで、Web ブラウザ経由で送受信されるデータを記録することができます。訪問チャールズのウェブサイトこのアプリケーションの詳細については。

    チャールズの最低要件

    • チャールズは、Windows、Mac、Linuxと互換性があります
    • iOSおよび/またはAndroidデバイス

    マシンにチャールズをセットアップする

    チャールズをマシンで実行するには、以下の手順に従ってください。

    1. Charlesをマシンにダウンロードしてインストールします。
    2. コンピュータで Charles を実行します。メニューから、プロキシ > プロキシ設定を選択します。ポートが割り当てられ(8888 など)、トランスペアレントHTTPプロキシの有効化オプションが選択されていることを確認します。
      Proxy settings
      プロキシ設定
    3. OK」を選択して変更を保存し、ダイアログを閉じます。
    4. メニューから、プロキシ > SSL プロキシ設定を選択します[SSL プロキシを有効にする ] オプションが選択されていることを確認します。
      SSL Proxy settings
      SSL プロキシの設定
    5. [ 場所]セクションで、[ 追加]ボタンを選択します。の中に場所の編集ダイアログで、に移動しますフィールドに入力して入力します443OKを選択して、この変更を保存します。
      Location port 443
      ロケーションポート 443
    6. OK」を選択して「場所の編集」ダイアログを閉じます。
      SSL settings with location
      SSL 設定 (場所付き)
    7. OKを選択して SSLプロキシ設定ダイアログを終了します。
    8. [ ヘルプ] > [SSL プロキシーイング] > [Charles ルート証明書をモバイルデバイスまたはリモートブラウザにインストールする] に移動します
      Install root certificate
      ルート証明書をインストールする
    9. デバイスのセットアップに使用するローカルサーバ IP およびポート番号(8888)を識別するメッセージが表示されます。また、証明書をダウンロードしてインストールする URL も表示されます。後で使用するために、これらのファイルをコンピュータにコピーします。
      Certificate message
      証明書メッセージ

    デバイスにチャールズを設定する

    このセクションでは、コンピュータ上でCharlesと連携するようにiOSおよび/またはAndroidデバイスをセットアップする方法を学びます。

    iOS デバイスをセットアップする

    1. デバイスで、コンピュータと同じネットワークに接続されていることを確認します。これを確認するには、 [設定] > [Wifi ] に移動し、ネットワーク名を選択して詳細オプションを表示します。
      Device network
      デバイスネットワーク
    2. 下部の [HTTP] セクションで、[ 手動モード] を選択します。次に、前の手順で Charles からコピーしたサーバー IP とポート番号 (8888) を追加します。
      Wifi details
      無線LANの詳細
    3. デバイスで、ブラウザを開き、 http://www.charlesproxy.com/getssl に移動します。デバイス設定にリダイレクトされ、 Charles Proxyカスタムルート証明書プロファイルをインストールするように求められます。[ インストール]ボタンを選択して、Charles 証明書をデバイスにインストールします。
      Install Charles certificate
      チャールズ証明書をインストールする
    4. Charles 証明書をインストールするには、手順に従います。完了したら、[ 完了] を選択します
      Charles profile installed
      チャールズプロファイルがインストールされました
    5. 次に、デバイスが Charles 証明書を信頼していることを確認する準備が整いました。デバイスで、[ 全般] > [バージョン情報] > [証明書の信頼設定] に移動します。ここでは、チャールズプロキシ証明書を見つける必要があります。
      Certificate Trust Settings
      証明書の信頼の設定
    6. チャールズ証明書を有効にします。警告メッセージに注意してください。Charles でデバッグしないときは、この証明書を無効にすることができます。
      Enable trust certificate
      信頼証明書を有効にする
    7. これで、チャールズで送受信されたデータを見ることができます。
      See Charles data
      チャールズのデータを参照

    Android デバイスをセットアップする

    1. デバイスで、ブラウザを開き、 //chls.pro/ssl に移動します
    2. [ 証明書名 ] ダイアログが表示されます。証明書の名前を指定し、[ 使用先] フィールドを Wi-Fi に設定します。[OK]を選択して証明書をインストールします。
      Install Charles Certificate
      チャールズ証明書をインストールする
    3. 次に、 [設定] > [Wi-Fi ] メニューを開きます。デバイス上で接続したネットワークの一覧が表示されます。現在接続しているワイヤレスネットワークを選択します。このネットワークは、コンピュータ上で接続しているネットワークと一致する必要があります。
    4. これにより、[編集]、[表示]、または [忘れる] の 3 つのオプションを含む小さなダイアログが開きます。[ 編集] を選択します
    5. このダイアログで、下にスクロールして、[ 詳細オプションを表示]フィールドを有効にします。これにより、プロキシと IP の設定が表示されます。
      Advanced Settings
      詳細設定
    6. [ プロキシ設定]フィールドを [ 手動] に変更します
    7. [ プロキシホスト名 ] フィールドにコンピュータの IP アドレスと、Charles で設定されたポートと一致する [ プロキシポート ] フィールドに入力します (デフォルトでは、ポートは 8888 に設定されています)。[保存] を選択します。
      Set IP Address
      IP アドレスの設定
    8. デバイスのデフォルトのブラウザで、Web サイトに移動します。チャールズで送受信されたデータを見ることができます。
      See Data Transfer
      「データ転送」を参照してください。

    ページの最終更新日05 Oct 2021