Android デバイスのリモートデバッグ

[アーティクル]
03/29/2023

Windows または macOS コンピューターから Android デバイス上のライブコンテンツをリモートデバッグします。次のチュートリアルページでは、次の方法について説明します。

リモートデバッグ用に Android デバイスを設定し、開発用コンピューターから検出します。
開発用コンピューターから Android デバイスのライブコンテンツを検査してデバッグします。
Android デバイスから開発マシン上の DevTools インスタンスへのスクリーンキャストコンテンツ。

注

iOS デバイスでの Microsoft Edge アプリのリモートデバッグは現在サポートされていません。次のガイドでは、Android デバイスでの Microsoft Edge のリモートデバッグに特に焦点を当てています。 macOS デバイスがある場合は、 Brightcove デバッグガイドに従って、Safari を使用して iOS デバイスで Microsoft Edge をリモートでデバッグします。 Safari の Web インスペクターツールの詳細については、「 Safari Web 開発ツール」を参照してください。

手順 1: Android デバイスを検出する

次のワークフローは、ほとんどのユーザーに対して機能します。詳細については、以下の「トラブルシューティング: DevTools で Android デバイスが検出されない」を参照してください。

Android の [開発者オプション] 画面を開きます。「デバイス上の開発者オプションを構成する」を参照してください。
[ USB デバッグを有効にする] を選択します。
開発用コンピューターで、Microsoft Edge を開きます。
アドレスバーで、に移動します edge://inspect。
USB ケーブルを使用して、Android デバイスを開発用マシンに直接接続します。初めて接続しようとすると、不明なデバイスを検出する DevTools に関するプロンプトが表示されます。 Android デバイスで [USB デバッグを許可する ] アクセス許可プロンプトを受け入れます。
Android デバイスのモデル名が表示されている場合、Microsoft Edge はデバイスへの接続を正常に確立しました。手順 2 セクションに進みます。

トラブルシューティング: DevTools で Android デバイスが検出されない

ハードウェアの正しい設定のトラブルシューティングに役立つヒントを次に示します。

USB ハブを使用している場合は、Android デバイスを開発用コンピューターに直接接続してみてください。
Android デバイスと開発用コンピューターの間で USB ケーブルを取り外してから、USB ケーブルを再接続してみてください。 Android と開発用マシンの画面のロックが解除されている間にタスクを完了します。
USB ケーブルが動作することを確認します。開発用コンピューターから Android デバイス上のファイルを検査できる必要があります。

次のヒントを使用して、ソフトウェアが正しく設定されていることを確認してください。

開発用マシンが Windows を実行している場合は、Android デバイスの USB ドライバーを手動でインストールしてみてください。詳細については、「 OEM USB ドライバーのインストール」を参照してください。
Windows デバイスと Android デバイス (特に Samsung) の組み合わせによっては、追加の設定が必要です。詳細については、「 DevTools デバイスが接続されたときにデバイスを検出しない」を参照してください。

Android デバイスに [USB デバッグを許可する] プロンプトが表示されない場合は、次の操作を試してください。

DevTools が開発用マシンに焦点を当て、Android のホームスクリーンが表示されている間、USB ケーブルを切断してから再接続します。 Android または開発用コンピューターの画面がロックされているときに、プロンプトが表示されない場合があります。
Android デバイスと開発用コンピューターの表示設定を更新して、スリープ状態にならないようにします。
Android の USB モードを PTP に設定します。「Galaxy S4 に USB デバッグの承認ダイアログが表示されない」を参照してください。
Android デバイスの [開発者オプション] 画面で [USB デバッグ承認の取り消し] を選択して、新しい状態にリセットします。

このページに記載されていないソリューションが見つかる場合、または DevTools デバイスで Stack Overflow に接続したときにデバイスが検出されない場合は、その Stack Overflow の質問にソリューションを追加してください。

手順 2: 開発用コンピューターから Android デバイスのコンテンツをデバッグする

Android デバイスで Microsoft Edge を開きます。
edge://inspect に移動します。 Android デバイスのモデル名が表示され、その後にデバイスのシリアル番号が表示されます。その下に、デバイスで実行されている Microsoft Edge のバージョンが、かっこで囲まれたバージョン番号で表示されます。開いている各 Microsoft Edge タブには、一意のセクションが表示されます。セクションからそのタブを操作できます。

接続されたリモートデバイス

[ Url を含むタブを開く ] テキストボックスに URL を入力し、[ 開く] をクリックします。ページが Android デバイスの新しいタブで開きます。
開いた URL の横にある [ 検査 ] をクリックします。新しい DevTools インスタンスが開きます。

その他のアクション: タブのフォーカス、更新、または閉じる

フォーカス、更新、または閉じるタブの横にある [フォーカス] タブを選択するか、再読み込みするか、閉じます。

タブのフォーカス、更新、または閉じるボタン

要素を検査する

DevTools インスタンスの Elements ツールに移動し、要素の上にマウスポインターを合わせて Android デバイスのビューポートで強調表示します。

Android デバイスの画面で要素をタップして、要素ツールで選択することもできます。 DevTools インスタンスで [要素 の)] アイコンをクリックし、Android デバイス画面で要素を選択します。

注

[要素] は最初の選択後に無効になるため、この機能を使用するたびに再度有効にする必要があります。

Android 画面を開発用コンピューターにスクリーンキャストする

[ スクリーンキャストの切り替え ()] アイコンをクリックして、DevTools インスタンス内の Android デバイスのコンテンツを表示します。

スクリーンキャストを操作する方法は複数あります。

クリックはタップに変換され、デバイスで適切なタッチイベントが発生します。
コンピューター上のキーストロークがデバイスに送信されます。
ピンチジェスチャをシミュレートするには、Shift キーを押しながらドラッグします。
スクロールするには、トラックパッドまたはマウスホイールを使用するか、マウスポインターでフリングします。

スクリーンキャストに役立つ次のヒントを使用します。

スクリーンキャストにはページコンテンツのみが表示されます。スクリーンキャストの透過的な部分は、Microsoft Edge アドレスバー、Android ステータスバー、Android キーボードなどのデバイスインターフェイスを表します。
スクリーンキャストはフレームレートに悪影響を与える。スクロールやアニメーションの測定中にスクリーンキャストを無効にして、ページのパフォーマンスをより正確に把握します。
Android デバイスの画面がロックされている場合、スクリーンキャストの内容は消えます。 Android デバイスの画面のロックを解除して、スクリーンキャストを自動的に再開します。

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。元のページはここにあり、 Kayce Basques (テクニカルライター、Chrome DevTools & Lighthouse) によって作成されています。

この作品は、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。

Android デバイスのリモート デバッグ