ウェブアプリをデバッグする


ウェブアプリをデバッグする

開発用コンピューターで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ブログの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を入力します。