Windows、Mac、または Linux コンピュータから Android 端末上のライブ コンテンツのリモート デバッグを行います。 このチュートリアルでは、次の操作を行う方法について説明します。
- Android 端末をリモート デバッグ用に設定し、開発マシンから検出します。
- 開発マシンで Android 端末上のライブ コンテンツを調査し、デバッグします。
- Android 端末のコンテンツを開発マシン上の DevTools インスタンスにスクリーンキャストします。
ステップ 1: Android 端末を検出する
以下のワークフローは、ほとんどのユーザーが使用できます。 さらに詳しくは、トラブルシューティング: DevTools が Android 端末を検出しないをご覧ください。
- Android で [Developer Options] 画面を開きます。 端末の開発者向けオプションの設定をご覧ください。
- [Enable USB Debugging] を選択します。
- 開発マシンで Chrome を開きます。
- DevTools で、[Settings] タブを開きます。
- [Discover USB devices] チェックボックスが有効になっていることを確認します。
![[Discover USB Devices] チェックボックスが有効になっています。](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/imgs/discover-usb-devices.png?authuser=1&hl=ja)
- USB ケーブルを使用して、Android 端末を開発マシンに直接接続します。 初めてこの操作を行う場合、DevTools が不明な端末を検出したことが表示されます。 DevTools が端末への接続を確立すると、Android 端末のモデル名が表示されます。 ステップ 2に進みます。
- [Offline] と表示される場合は、Android 端末に表示される [Allow USB Debugging] パーミッション プロンプトでデバッグを許可します。
トラブルシューティング* DevTools が Android 端末を検出しません
ハードウェアが正しく設定されていることを確認してください。
- USB ハブを使用している場合は、Android 端末を開発マシンに直接接続してみてください。
- Android 端末と開発マシンをつないでいる USB ケーブルをいったん抜いて、再び差し込んでください。 この操作は、Android 端末と開発マシンの画面がロックされていない間に行います。
- USB ケーブルが機能することを確認してください。 開発マシンから Android 端末のファイルが調査できるようになるはずです。
ソフトウェアが正しく設定されていることを確認してください。
- 開発マシンが Windows を実行している場合は、Android 端末用の USB ドライバを手動でインストールしてください。 OEM USB ドライバのインストールをご覧ください{:.external}。
- Windows と Android 端末（特に Samsung）を組み合わせる場合は、特別な設定が必要となることがあります。 端末を接続しても Chrome DevTools Devices が検出しないをご覧ください{:.external}。
Android 端末に [Allow USB Debugging] プロンプトが表示されない場合は、次の操作を行ってください。
- 開発マシンで DevTools にフォーカスがあり Android のホーム画面が表示されている間に、USB ケーブルをいったん抜いてから再度接続してください。 Android または開発マシンの画面がロックされていると、プロンプトが表示されない場合があります。
- Android 端末および開発マシンの表示設定を更新し、スリープ状態にならないようにしてください。
- Android の USB モードを PTP に設定します。 Galaxy S4 に [USB デバッグの承認] ダイアログ ボックスが表示されないをご覧ください。
- Android 端末の [Developer Options] 画面から [Revoke USB Debugging Authorizations] を選択し、新しい状態にリセットします。
このセクションまたは端末を接続しても Chrome DevTools Devices が検出しないに記載されていない解決策が見つかった場合、該当する Stack Overflow の質問への回答を追加するか、または webfundamentals リポジトリで issue を立ててください。
ステップ 2: 開発マシンから Android 端末のコンテンツをデバッグする
- Android 端末で Chrome を開きます。
- [
chrome://inspect/#devices] で、使用する Android 端末のモデル名と一致するタブをクリックします。 ページの上部に Android 端末のモデル名が表示され、その横にシリアル番号が表示されます。 その下には、端末で実行している Chrome のバージョンが表示され、かっこ内にバージョン番号が示されます。 開いている各 Chrome タブについてのセクションが表示されます。このセクションからそのタブを操作することができます。 WebView を使用しているアプリがある場合は、それらの各アプリのセクションが表示されます。 図 5 では、開かれているタブや WebView はありません。
[Open tab with url] テキストボックスで、URL を入力して [Open] をクリックします。 Android 端末の新しいタブでそのページが開きます。
開いた URL の横にある [Inspect] をクリックします。 新しい DevTools インスタンスが開きます。 Android 端末で実行している Chrome のバージョンによって、開発マシン上で起動する DevTools のバージョンが決まります。 そのため、Android 端末で非常に古いバージョンの Chrome を使用している場合は、DevTools が使い慣れたものとは異なって見えることがあります。
その他のアクション: タブの一時停止、フォーカス、再読み込み、閉じる
URL の下には、タブの一時停止、フォーカス、再読み込み、閉じるなどのアクションを行うメニューがあります。
要素を調査する
DevTools インスタンスの [Elements] パネルを表示し、要素にカーソルを合わせると Android 端末のビューポートで要素がハイライト表示されます。
Android 端末の画面上で要素をタップして、[Elements] パネルの要素を選択することもできます。
DevTools インスタンスで [Select Element] 
{:.devtools-inline} をクリックしてから、Android 端末の画面上で要素をタップします。
1 回タップすると [Select Element] が無効になるため、この機能を使用する場合は毎回再度有効にする必要があることに注意してください。
開発マシンに Android の画面をスクリーンキャストします
[Toggle Screencast] 
をクリックして、DevTools インスタンスで Android 端末のコンテンツを表示します。
さまざまな方法でスクリーンキャストを操作できます。
- クリックはタップに変換され、端末で正しいタッチイベントが発生します。
- コンピュータでのキーストロークが端末に送信されます。
- ピンチ操作をシミュレートするには、Shift キーを押しながらドラッグします。
- スクロールするには、トラックパッドやマウスホイールを使用するか、マウスポインターでフリングします。
スクリーンキャストに関する注意事項:
- スクリーンキャストではページのコンテンツのみが表示されます。 スクリーンキャストの透明な部分は、Chrome のアドレスバー、Android のステータスバー、Android のキーボードなど、端末のインターフェースを表します。
- スクリーンキャストはフレームレートに悪影響を及ぼします。 スクロールやアニメーションのパフォーマンスを計測するときは、スクリーンキャストを無効にすると、ページのパフォーマンスをより正確に把握できます。
- Android 端末の画面がロックされると、スクリーンキャストのコンテンツが非表示になります。 Android 端末の画面のロックを解除すると、スクリーンキャストが自動的に再開します。