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 を再起動します。

Microsoft Edge 用リモート ツールをインストールする (ベータ版)

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

注:

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

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

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

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

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

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

注:

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

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

次のセクションでは、クライアント (デバッガー) デバイスに情報を入力します。 クライアント (デバッガー) コンピューターからデバッグするホスト (デバッグ対象) コンピューターで、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 デバイスに接続する] で、ホスト (デバッグ対象) マシンの IP アドレスと接続ポートを、次のパターンのテキスト ボックスに入力します:http://IP address:connection port。

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

   

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

http ではなく https を使用する

ではなく httpを使用httpsしてホスト (デバッグ対象) マシンに接続する場合は、

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

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

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

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

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

6. [次へ] をクリックし、[完了] をクリックします。

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

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

注:

の既定のポートhttpは であり50080、 の既定のポートは 50043ですが、デバイス上の既存のポートhttps要求との競合を防ぐために、デスクトップ要求ポートのデバイス ポータルが一時的な範囲 (>50,000) に設定されているため、これは必ずしも当てはまるわけではありません。 詳細については、「Windows デスクトップ上のデバイス ポータル」の 「ポート設定」 セクションを参照してください。

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

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

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

要素を検査する

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

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

注:

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

重要

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

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

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

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

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

スクリーンキャストに関するいくつかの注意事項:

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

既知の問題

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

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

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

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