次の方法で共有

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

  • [アーティクル]

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 デバイスが検出されない」を参照してください。

  1. Android の [開発者オプション] 画面を開きます。 「 デバイス上の開発者オプションを構成する」を参照してください。

  2. [ USB デバッグを有効にする] を選択します。

  3. 開発用コンピューターで、Microsoft Edge を開きます。

  4. [アドレス] バーで、[ edge://inspect] に移動します。

    Microsoft Edge の [edge://inspect] ページ

  5. USB ケーブルを使用して、Android デバイスを開発用マシンに直接接続します。 初めて接続しようとすると、不明なデバイスを検出する DevTools に関するプロンプトが表示されます。 Android デバイスで [USB デバッグを許可する ] アクセス許可プロンプトを受け入れます。

    Android デバイスの [USB デバッグを許可する] アクセス許可プロンプト

  6. Android デバイスのモデル名が表示されている場合、Microsoft Edge はデバイスへの接続を正常に確立しました。 手順 2 セクションに進みます。

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

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

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

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

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

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

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

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

  1. Android デバイスで Microsoft Edge を開きます。

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

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

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

  2. 開いた 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 に記載されている条項に従って使用されています。 元のページは ここに あり、ケイス・バスクによって作成されています。

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