Windows デバイスをリモートでデバッグする

WindowsまたはmacOS コンピューターから、Windows 10 以降のデバイス上のライブ コンテンツをリモート デバッグします。

このチュートリアルでは、次のタスクについて説明します。

  • リモート デバッグ用にWindows デバイスを設定し、開発用コンピューターから接続します。

  • 開発用コンピューターから、Windows デバイス上のライブ コンテンツを調べてデバッグします。

  • Windows デバイスから開発マシン上の DevTools インスタンスにコンテンツをスクリーンキャストします。

手順 1: ホストを設定する (デバッグ対象コンピューター)

ホストまたはデバッグ対象コンピューターは、デバッグするWindows 10以降のデバイスです。 物理的にアクセスするのが困難なリモート デバイスである場合や、キーボードとマウスの周辺機器がない可能性があるため、そのデバイス上の Microsoft Edge DevTools と対話することが困難な場合があります。

ホスト (デバッグ対象) マシンを設定するには:

  1. Microsoft Edgeのインストールと構成

  2. Microsoft Storeからリモート ツール for Microsoft Edge (ベータ) をインストールする

  3. 開発者モードをアクティブ化し、デバイス ポータルを有効にする

Microsoft Edgeのインストールと構成

  1. デバッグするWindows 10以降のデバイスにまだインストールしていない場合は、このページからMicrosoft Edgeをインストールします。

  2. ホスト (デバッグ対象) コンピューターにインストール済みのバージョンのMicrosoft Edgeを使用している場合は、Microsoft Edge (EdgeHTML) ではなく、Microsoft Edge (Chromium) があることを確認します。 簡単に確認するには、ブラウザーに読み込み edge://settings/help 、バージョン番号が 75 以上であることを確認します。

  3. Microsoft Edgeに移動しますedge://flags

  4. 検索フラグに、「デバイス ポータルでリモート デバッグを有効にする」Windows入力します。 そのフラグを [有効] に設定します。 次に、[再起動] ボタンをクリックしてMicrosoft Edge再起動します。

[デバイス ポータル フラグを使用してリモート デバッグを有効にする] Windows設定します。

Microsoft Edge用リモート ツールのインストール (ベータ)

Microsoft Storeからリモート ツール for Microsoft Edge (ベータ) をインストールします

注意

Microsoft Edge用リモート ツール (ベータ版) の [取得] ボタンは、Windows 10 以降のバージョン 1809 以前の場合は無効になる可能性があります。 ホスト (デバッグ対象) コンピューターを設定するには、バージョン 1903 以降Windows 10実行している必要があります。 リモート ツール for Microsoft Edge (ベータ) を取得するようにホスト (デバッグ対象) コンピューターを更新します。

Microsoft StoreのMicrosoft Edge用リモート ツール (ベータ版)。

Microsoft Edge用リモート ツール (ベータ) を起動し、メッセージが表示されたら、アプリの [アクセス許可] ダイアログを受け入れます。 これで、Microsoft Edge用リモート ツール (ベータ) を閉じることができ、今後のリモート デバッグ セッション用に開く必要はありません。

開発者モードをアクティブ化し、デバイス ポータルを有効にする

WiFi ネットワーク上の場合は、ネットワークが ドメイン または プライベートとしてマークされていることを確認します。 状態を確認するには、Windows セキュリティ アプリを開き、ファイアウォール &ネットワーク保護を選択し、ネットワークがドメイン ネットワークまたはプライベート ネットワークとして一覧表示されているかどうかを確認します。

ネットワークが [パブリック] として表示されている場合は、設定****Network & > インターネット > Wi-Fi に移動し、ネットワークをクリックして、[ネットワーク プロファイル] ボタンを [プライベート] に切り替えます。

次に、設定 アプリを開きます。 [ 検索] 設定で、設定を入力 Developer settings して選択します。 開発者モードを切り替えます。 これで、[ローカル エリア ネットワーク接続を介してリモート診断を有効にする][オン] に設定して 、デバイス ポータルを有効にすることができます。 その後、必要に応じて 認証 を有効にして、クライアント (デバッガー) デバイスがこのデバイスに接続するための正しい資格情報を提供する必要があります。

注意

ローカル エリア ネットワーク接続でリモート診断を有効にする場合。 以前に有効にしていた場合は、デバイス ポータルリモート ツール for Microsoft Edge (ベータ) を使用するには、この機能をオフにしてもう一度オンにする必要があります。 開発者向けセクションが設定に表示されていない場合は、デバイス ポータルが既に有効になっている可能性があるため、代わりにWindows 10以降のデバイスを再起動してみてください。

開発者モードとデバイス ポータルが構成された設定 アプリ。

次を使用して、Connectの下に表示されるコンピューターの IP アドレスと接続ポートに注意してください。 次の図の IP アドレスと 192.168.86.78 接続ポートは次のとおりです 50080

設定の IP アドレスと接続ポートに注意してください。

次のセクションでは、クライアント (デバッガー) デバイスに関する情報を入力します。 クライアント (デバッガー) コンピューターからデバッグするホスト (debugee) コンピューターで、Microsoft Edge およびプログレッシブ Web Apps (PWA) でタブを開きます。

手順 2: クライアントを設定する (デバッガー マシン)

クライアントマシンまたはデバッガー マシンは、デバッグ元のデバイスです。 このデバイスは、毎日の開発用マシンである場合や、自宅で作業する場合は PC または MacBook に過ぎません。

  1. クライアント (デバッガー) マシンを設定するには、まだインストールしていない場合は、このページからMicrosoft Edgeをインストールします。

  2. ホスト (デバッグ対象) コンピューターにインストール済みのバージョンのMicrosoft Edgeを使用している場合は、Microsoft Edge (EdgeHTML) ではなく、Microsoft Edge (Chromium) があることを確認します。 簡単に確認するには、ブラウザーに読み込み edge://settings/help 、バージョン番号が 75 以上であることを確認します。

  3. Microsoft Edgeのedge://inspectページに移動します。 既定では、[ デバイス] セクションに移動する必要があります。

  4. リモート Windows デバイスへのConnectで、次のパターンのテキスト ボックスに、IP アドレスとホスト (デバッグ対象) マシンの接続ポートを入力します。http://IP address:connection port

  5. [デバイスにConnect] をクリックします。

    クライアントの [edge://inspect] ページ。

  6. ホスト (デバッグ対象) マシンの認証を設定した場合は、クライアント (デバッガー) マシンの ユーザー名パスワード を入力して正常に接続するように求められます。

http の代わりに https を使用する

次の代わりにホスト (デバッグ対象) マシンに接続する場合は、次のhttp手順を実行httpsします。

  1. http://IP address:50080/config/rootcertificateクライアント (デバッガー) コンピューターのMicrosoft Edgeに移動します。 これにより、. という名前 rootcertificate.cerのセキュリティ証明書が自動的にダウンロードされます。

  2. rootcertificate.cer を選択します。 これにより、Windows証明書マネージャー ツールが開きます。

  3. [ 証明書のインストール....] をクリックし、[ 現在のユーザー] がオンになっていることを確認し、[ 次へ] をクリックします。

  4. [すべての証明書を次のストアに配置する] をクリックし、[参照]... をクリックします。

  5. 信頼されたルート証明機関ストアを選択し、[OK] をクリックします

  6. [次へ][完了] の順にクリックします。

  7. メッセージが表示されたら、この証明書を 信頼されたルート証明機関 ストアにインストールすることを確認します。

  8. ここで、ページを使用してクライアント (デバッガー) マシンからホスト (デバッグ対象) マシンに接続するときは、別connection portedge://inspect値を使用する必要があります。 既定では、デスクトップ Windowsの場合、デバイス ポータルは次のようにconnection port``http使用50080します。 デバイス httpsポータルでは、次のパターンを使用 50043 します。https://IP address:50043 ページに edge://inspect 表示されます。 デバイス ポータルで使用される既定のポートについて詳しくは、こちらをご覧ください

注意

既定のポートhttp50080 is と既定のポートですが、デバイス上の既存のポートhttps``50043要求との競合を防ぐために、デスクトップ上の Device Portal が一時的な範囲 (>50,000) のポートを要求するため、これは常に当てはまっていません。 詳細については、デスクトップ上の Device Portal のポート 設定 セクションWindows参照してください。

手順 3: クライアントからホスト上のコンテンツをデバッグする

クライアント (デバッガー) マシンがホスト (デバッグ対象) コンピューターに正常に接続した場合、edge://inspectクライアントのページに、Microsoft Edgeのタブとホスト上の開いている PWA の一覧が表示されます。

クライアントの [edge://inspect] ページには、ホスト上のMicrosoft Edgeと PWA のタブが表示されます。

デバッグするコンテンツを特定し、[ 検査] をクリックします。 Microsoft Edge DevTools が新しいタブで開き、ホスト (デバッグ対象) マシンからクライアント (デバッガー) コンピューターにコンテンツをスクリーンキャストします。 これで、ホストで実行されているコンテンツに対して、クライアントで devTools Microsoft Edgeのフル パワーを使用できるようになりました。 Microsoft Edge DevTools の使用方法の詳細については、こちらを参照してください

ホスト上のMicrosoft Edgeのタブをデバッグしているクライアント上の Microsoft Edge DevTools。

要素を検査する

たとえば、要素を調べてみます。 クライアント上の DevTools インスタンスの 要素 ツールに移動し、要素をポイントしてホスト デバイスのビューポートで強調表示します。

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

注意

最初のタッチ後に [要素の選択] が無効になっているので、この機能を使用するたびにもう一度オンにする必要があります。

重要

要素ツールの [イベント リスナー] ウィンドウは、Windows 10 バージョン 1903 では空白です。 これは既知の問題であり、チームは、Windows 10 バージョン 1903 のサービス更新プログラムで [イベント リスナー] ウィンドウを修正する予定です。

手順 4: ホスト画面をクライアント デバイスにスクリーンキャストする

既定では、クライアント上の DevTools インスタンスでスクリーンキャストが有効になっています。これにより、クライアント デバイス上の DevTools インスタンスのホスト デバイス上のコンテンツを表示できます。 [ 画面キャストの切り替え] をクリックして、この機能をオンまたはオフにします。

クライアントの Microsoft Edge DevTools の [画面キャストの切り替え] ボタン。

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

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

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

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

既知の問題

要素ツールの [イベント リスナー] ウィンドウは、Windows 10 バージョン 1903 では空白です。 チームは、Windows 10 バージョン 1903 のサービス更新プログラムで [イベント リスナー] ウィンドウを修正する予定です。

アプリケーション パネルの [Cookie] ウィンドウは、Windows 10 バージョン 1903 では空白です。 チームは、サービス更新プログラムの [Cookie] ウィンドウを Windows 10 バージョン 1903 に修正する予定です。

監査ツール、3D ビュー ツール、設定[エミュレートされたデバイス] セクション、および [要素] ツールの [アクセシビリティ] ツリー ウィンドウは、現在期待どおりに機能していません。 チームは、Microsoft Edgeの今後の更新プログラムで一覧に記載されているツールを修正する予定です。

リモート デバッグの場合、ファイル エクスプローラーは 、ソース ツールまたは セキュリティ パネルの DevTools から起動しません。 チームは、Microsoft Edgeの今後の更新でツールを修正する予定です。