Windows デバイスのリモート デバッグの開始

リモート デバッグのライブ コンテンツは、Windows 10または macOS コンピューター Windowsデバイス上で実行します。 このチュートリアルでは、次のタスクについて説明します。

  • リモート デバッグ用Windowsデバイスをセットアップし、開発マシンから接続します。
  • 開発マシンからデバイスのライブ コンテンツをWindowsデバッグします。
  • デバイスから開発Windows DevTools インスタンスにスクリーンキャストコンテンツを追加します。

手順 1: ホストをセットアップする (デバッグ先コンピューター)

ホストまたはデバッグ先のコンピューターは、Windows 10するデバイスまたは以降のデバイスです。 物理的にアクセスするのが困難なリモート デバイスや、キーボードとマウスの周辺機器がインストールされていない場合、そのデバイス上の Microsoft Edge DevTools とのやり取りが困難になる場合があります。 ホスト (debuggee) コンピューターをセットアップするには、次のアクションを実行する必要があります。

インストールと構成Microsoft Edge

まだインストールしていない場合は、このMicrosoft Edgeからインストールします。 ホスト (debuggee) コンピューターでプリインストールされたバージョンの Microsoft Edge を使用している場合は、(EdgeHTML) ではなく Microsoft Edge がMicrosoft Edgeされていることを確認します。 簡単に確認するには、ブラウザーに読み込み、バージョン番号が 75 以上である必要 edge://settings/help があります。

次に、この edge://flags ページに移動Microsoft Edge。 [検索フラグ] に、「デバイス ポータルからリモート デバッグを有効にするWindows入力します。 このフラグを [有効] に設定します。 次に、[再起動]ボタンを選択して、Microsoft Edge。

[デバイス ポータルからリモート デバッグを有効Windowsする] フラグを [有効] に設定する

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

リモート ツールをインストールMicrosoft Edge (Beta) からインストールMicrosoft Store。

注意

バージョン**** 1809 以降のバージョンを使用している場合Microsoft Edge (Beta)のリモート ツールの [取得 Windows 10] ボタンが無効になる場合があります。 ホスト (debuggee) コンピューターをセットアップするには、バージョン 1903 以降Windows 10実行している必要があります。 ホスト (debuggee) コンピューターを更新して、リモート ツールを取得Microsoft Edge (Beta) します

[リモート ツール] Microsoft Edge \(Beta\) Microsoft Store

アプリのリモート ツール (ベータMicrosoft Edge起動し、メッセージが表示されたら、アプリの [アクセス許可] ダイアログを受け入れる。 これで、リモート ツールを閉じ、Microsoft Edge (Beta)を閉じ、将来のリモート デバッグ セッション用に開く必要がなくなっています。

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

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

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

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

注意

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

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

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

デバイスの IP アドレスと接続ポートに注意設定

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

手順 2: クライアントをセットアップする (デバッガー コンピューター)

クライアントまたはデバッガー コンピューターは、デバッグするデバイスです。 このデバイスは、毎日の開発マシンか、自宅で作業するときに PC または MacBook にすることもできます。

クライアント (debugger) マシンをセットアップするには、まだインストールしていないMicrosoft Edgeページからインストールします。 ホスト (debuggee) コンピューターでプリインストールされたバージョンの Microsoft Edge を使用している場合は、(EdgeHTML) ではなく Microsoft Edge がMicrosoft Edgeされていることを確認します。 簡単に確認するには、ブラウザーに読み込み、バージョン番号が 75 以上である必要 edge://settings/help があります。

次に、この edge://flags ページに移動Microsoft Edge。 [検索フラグ] に、「リモート デバイス デバッグを有効にするWindows」と入力 edge://inspect。 このフラグを [有効] に設定します。 次に、[再起動]ボタンを選択して、Microsoft Edge。

[リモート デバイスデバッグを有効Windowsする] フラグを [有効 edge://inspect] に設定する

次に、ページ edge://inspect に移動します。Microsoft Edge。 既定では、[デバイス] セクションに アクセスする必要 があります。 [ConnectWindows デバイスへの接続] で、次のパターンに従って、テキスト ボックスにホスト (debuggee) コンピューターの IP アドレスと接続ポートを入力します。http:// : IP address connection port 。 次に、[デバイスConnect] を選択します

クライアント edge://inspect ページ

ホスト (debuggee) コンピューターの認証を設定すると、クライアント (debugger)**** コンピューター**** のユーザー名とパスワードを入力して正常に接続するように求められます。

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

代わりに使用してホスト (debuggee) コンピューターに接続する場合は、クライアント https http (debugger) コンピューターの Microsoft Edge に移動する http://IP address:50080/config/rootcertificate 必要があります。 これにより、という名前のセキュリティ証明書が自動的にダウンロードされます rootcertificate.cer

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

[ 証明書のインストール...] を選択し、[現在の ユーザー ] がオンになっていることを確認し、[次へ] を 選択します。 次に、[すべての証明書を次のストアに配置する] を選択し、[参照]を選択します。 [信頼されたルート証明機関] ストアを選択し**、[OK] を選択します**。 [次 へ] を 選択し、[完了] を選択します。 メッセージが表示されたら、この証明書を信頼されたルート証明機関ストア にインストールする必要があります

ここで、ページを使用してクライアント (debugger) コンピューターからホスト (debuggee) コンピューターに接続する場合は、別の値 edge://inspect を使用する必要 connection port があります。 既定では、デスクトップ Windowsデバイス ポータルは、 を 50080 使用 connection port します http 。 [ https デバイス ポータル] では、次 50043 のパターンに従って使用します。https://: IP address 50043 をページに表示 edge://inspect します。 デバイス ポータルで使用される既定のポートの詳細については、以下を参照してください

注意

既定のポートは is および default port is ですが、デバイス上の既存のポート クレームとの競合を防止するために、一時的な範囲 http 50080 https 50043 (>50,000) のデスクトップ クレーム ポートの Device Portal と必ずしも同じではありません。 詳細については、デスクトップ上のデバイス ポータル設定の [ポート] セクションにWindowsします。

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

クライアント (debugger) コンピューターがホスト (debuggee) コンピューターに正常に接続すると、クライアントのページに Microsoft Edge のタブの一覧とホスト上の開いている PWA が表示されます。 edge://inspect

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

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

ホストMicrosoft Edgeのタブをデバッグするクライアント上の devTools Microsoft Edgeを表示します。

要素を検査する

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

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

注意

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

重要

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

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

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

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

スクリーンキャストを複数の方法で操作できます。

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

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

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

既知の問題

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

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

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

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