開発者コンソール
ログイン
ログイン
開発者コンソール

ウェブアプリのデバッグ

ウェブアプリのデバッグ

開発用コンピューターでChrome DevToolsを使用して、Fire TVデバイス、Fireタブレット、その他Androidデバイスで実行されるウェブアプリをデバッグできます。USBケーブルまたはWi-Fiネットワークを使用して、開発用コンピューターとホストデバイスを接続してください。

Chrome DevToolsのインストール

ウェブアプリのデバッグにChrome DevToolsを使用するには、まずコンピューターにChromeブラウザ（バージョン32以降）をインストールする必要があります。ダウンロード手順については、http://www.google.com/chromeを参照してください。

Chrome DevToolsは、Android SDKツールの一部であるAndroid Debug Bridge（ADB）を使用して、コンピューターからウェブアプリと通信します。Chrome DevToolsの使用方法の詳細については、ChromiumブログのDiscover Chrome DevTools（英語のみ）を参照してください。

開発用コンピューターで、Chromeを開きます。GoogleアカウントでChromeにサインインしてください。シークレットモードやゲストモードではリモートデバッグは機能しません。

USBを使用してデバッグ環境をセットアップする方法

次の手順に従って、開発用コンピューターのChrome DevToolsを、ホストデバイスのWeb App Testerに接続します。

  1. ホストデバイスと開発用コンピューターをUSBケーブルで直接接続します。USBハブを間に挟まないでください。
  2. Web App Testerで、[Test] をクリックしてアプリを起動します。
  3. 開発用コンピューターで、URL入力行にchrome://inspectと入力します。Chromeブラウザにホストデバイスと実行中のアプリが表示されます。[inspect] をクリックして開発者ツールのウィンドウを開きます。

これでChrome DevToolsのツールを使用して、ウェブアプリのデバッグとテストを実行できるようになりました。

Wi-Fiを使用してデバッグ環境をセットアップする方法

Chrome DevToolsとデバッグ対象のウェブアプリをワイヤレスで接続するには、次のようにします。

  1. ホストデバイスと開発用コンピューターをUSBケーブルで直接接続します。
  2. ホストデバイスで、Web App Testerをタップして開きます。
  3. コンピューターで、コマンドプロンプトウィンドウまたはターミナルシェルを開き、Android SDKのplatform-toolsディレクトリに移動します。

  4. 次のコマンドを実行します。

    Windowsの場合：

    adb tcpip 5555

    OS Xの場合：

    ./adb tcpip 5555
  5. ホストデバイスとコンピューターの接続を解除します。
  6. 開発用コンピューターとデバイスが同じネットワークに接続されていることを確認します。

  7. 次のコマンドを実行してデバイスに接続します。IPアドレスはWeb App Testerで指定されているものを使用します。

    Windowsの場合：

    adb connect 192.168.1.133

    Mac OS Xの場合：

    ./adb connect 192.168.1.133
  8. 開発用コンピューターで、URL入力行にchrome://inspectと入力します。Chromeブラウザにホストデバイスと実行中のアプリが表示されます。[inspect] をクリックして開発者ツールのウィンドウを開きます。

その後Chrome DevToolsによってChromeのウィンドウが開かれ、そこでウェブアプリのコードを確認し、アプリの実行時にデバッグできます。

第1世代のKindle Fireにデバッグ環境をセットアップする方法

Chrome DevToolsはChromiumと互換性のないAndroidデバイス（第1世代のKindle Fireなど）では使用できません。このようなデバイスでは、JavaScriptコンソールで一部のデバッグ機能をWi-Fi経由で使用できます。これにより、デバイスにJavaScriptコマンドを送信できます。JavaScriptコンソールに接続する前に、Web App Testerをセットアップする必要があります。詳細については、Amazon Web App Testerをインストールして使用する方法を参照してください。Chrome DevToolsに対応していないデバイスでデバッグ環境をセットアップするには、次のようにします。

  1. デバイスで、Web App Testerアプリを開きます。
  2. 画面下部の全画面のハンドルを使用してステータスバーを開きます。この手順はFireタブレットでのみ必須です。
  3. 画面の最上部からステータスバーを下にスワイプし、クイック設定を開きます。JavaScriptコンソールを有効にする通知を受け取ります。
  4. 通知をタップしてJavaScriptコンソールを有効にします。JavaScriptコンソールにアクセスするURLが記載された新しい通知がコンピューターに表示されます。
  5. お使いのコンピューターがデバイスと同じネットワークに接続されていることを確認します。ブラウザを開き、前の手順で指定されたURLを入力します。