Do you use responsive images, lazy loading, or other optimizations? If not, why not? What affects your decisions?
Answer a few simple questions to help us understand your needs, and what we can do to make your life easier. Get Started

Android 端末のリモート デバッグを行う

Windows、Mac、または Linux コンピュータから Android 端末上のライブ コンテンツのリモート デバッグを行います。 このチュートリアルでは、次の操作を行う方法について説明します。

  • Android 端末をリモート デバッグ用に設定し、開発マシンから検出します。
  • 開発マシンで Android 端末上のライブ コンテンツを調査し、デバッグします。
  • Android 端末のコンテンツを開発マシン上の DevTools インスタンスにスクリーンキャストします。
リモート デバッグを行うと、Android 端末で実行されているページを開発マシンで調査できます。
図 1。 リモート デバッグを行うと、Android 端末で実行されているページを開発マシンで調査できます。

ステップ 1: Android 端末を検出する

以下のワークフローは、ほとんどのユーザーが使用できます。 さらに詳しくは、トラブルシューティング:DevTools が Android 端末を検出しないをご覧ください。

  1. Android で [Developer Options] 画面を開きます。 端末の開発者向けオプションの設定をご覧ください。
  2. [Enable USB Debugging] を選択します。
  3. 開発マシンで Chrome を開きます。
  4. DevTools を開きます
  5. DevTools で、[Main Menu] Main Menu をクリックします。 次に、[More tools] > [Remote devices] の順に選択します。

    [Main Menu] から [Remote Devices] タブを開きます。
    図 2[Main Menu] から [Remote Devices] タブを開きます

  6. DevTools で、[Settings] タブを開きます。

  7. [Discover USB devices] チェックボックスが有効になっていることを確認します。

    [Discover USB Devices] チェックボックスが有効になっています。
    図 3[Discover USB Devices] チェックボックスが有効になっています

  8. USB ケーブルを使用して、Android 端末を開発マシンに直接接続します。 初めてこの操作を行う場合、DevTools が不明なデバイスを検出したことが表示されます。 DevTools が端末への接続を確立すると、Android 端末のモデル名の下に、緑色の点と [Connected] が表示されます。 ステップ 2に進みます。

    [Remote Devices] タブが、承認待ちの不明な端末を検出しました。
    図 4[Remote Devices] タブが、承認待ちの不明な端末を検出しました

  9. 端末に Unknown と表示される場合は、Android 端末に表示される [Allow USB Debugging] パーミッション プロンプトでデバッグを許可します。

トラブルシューティング:DevTools が、Android 端末を検出しません

ハードウェアが正しく設定されていることを確認してください。

  • USB ハブを使用している場合は、Android 端末を開発マシンに直接接続してみてください。
  • Android 端末と開発マシンをつないでいる USB ケーブルをいったん抜いて、再び差し込んでください。 この操作は、Android 端末と開発マシンの画面がロックされていない間に行います。
  • USB ケーブルが機能することを確認してください。 開発マシンから Android 端末のファイルが調査できるようになるはずです。

ソフトウェアが正しく設定されていることを確認してください。

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 リポジトリで問題をオープンしてください

ステップ 2: 開発マシンから Android 端末のコンテンツをデバッグする

  1. Android 端末で Chrome を開きます。
  2. [Remote Devices] タブで、使用する Android 端末のモデル名と一致するタブをクリックします。 ページの上部に Android 端末のモデル名が表示され、その横にシリアル番号が表示されます。 その下には、端末で実行している Chrome のバージョンが表示され、かっこ内にバージョン番号が示されます。 開いている各 Chrome タブについて独自のセクションが表示されます。 このセクションからそのタブを操作することができます。 WebView を使用しているアプリがある場合は、それらの各アプリのセクションが表示されます。 図 5 では、開かれているタブや WebView はありません。

    接続済みのリモート端末。
    図 5。 接続済みのリモート端末

  3. [New tab] テキストボックスで、URL を入力して Open をクリックします。 Android 端末の新しいタブでそのページが開きます。

  4. 開いた URL の横にある [Inspect] をクリックします。 新しい DevTools インスタンスが開きます。 Android 端末で実行している Chrome のバージョンによって、開発マシン上で起動する DevTools のバージョンが決まります。 そのため、Android 端末で非常に古いバージョンの Chrome を使用している場合は、DevTools インスタンスが、使い慣れたものとは異なって見えることがあります。

その他のアクション: タブを再読み込みする、タブをフォーカスする、タブを閉じる

再読み込みするタブ、フォーカスするタブ、閉じるタブの横にある [More Options] More Options をクリックします。

タブを再読み込みする、タブをフォーカスする、タブを閉じるためのメニュー。
図 6。 タブを再読み込みする、タブをフォーカスする、タブを閉じるためのメニュー

要素を調査する

DevTools インスタンスの [Elements] パネルを表示し、要素にカーソルを合わせると Android 端末のビューポートで要素がハイライト表示されます。

Android 端末の画面上で要素をタップして、[Elements] パネルの要素を選択することもできます。 DevTools インスタンスで [Select Element] Select Element {:.devtools-inline} をクリックしてから、Android 端末の画面上で要素をタップします。 1 回タップすると [Select Element] が無効になるため、この機能を使用する場合は毎回再度有効にする必要があることに注意してください。

開発マシンに Android の画面をスクリーンキャストします

[Toggle Screencast] Toggle Screencast をクリックして、DevTools インスタンスで Android 端末のコンテンツを表示します。

さまざまな方法でスクリーンキャストを操作できます。

  • クリックはタップに変換され、端末で正しいタッチイベントが発生します。
  • コンピュータでのキーストロークが端末に送信されます。
  • ピンチ操作をシミュレートするには、Shift キーを押しながらドラッグします。
  • スクロールするには、トラックパッドやマウスホイールを使用するか、マウスポインターでフリングします。

スクリーンキャストに関する注意事項:

  • スクリーンキャストではページのコンテンツのみが表示されます。 スクリーンキャストの透明な部分は、Chrome のアドレスバー、Android のステータスバー、Android のキーボードなど、端末のインターフェースを表します。
  • スクリーンキャストはフレームレートに悪影響を及ぼします。 スクロールやアニメーションのパフォーマンスを計測するときは、スクリーンキャストを無効にすると、ページのパフォーマンスをより正確に把握できます。
  • Android 端末の画面がロックされると、スクリーンキャストのコンテンツが非表示になります。 Android 端末の画面のロックを解除すると、スクリーンキャストが自動的に再開します。

フィードバック

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.