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

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

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

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

  • 開発用コンピューターから Windows デバイス上のライブ コンテンツを検査およびデバッグします。

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

手順 1: ホスト (デバッグ マシン) をセットアップする

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

ホスト (デバッグ) マシンを設定するには、次のサブセクションを順番に使用します。

Microsoft Edge をインストールして構成する

  1. まだインストールされていない場合は、デバッグする Windows 10 以降のデバイスに、「Microsoft Edge の概要」から 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 用リモート ツールをインストールする

  1. Microsoft Store から Microsoft Edge 用リモート ツールをインストールします。

    ホスト (デバッグ対象) コンピューターをセットアップするには、そのコンピューターで Windows 10 バージョン 1903 以降が実行されている必要があります。 Windows 10 以降のバージョン 1809 以前を使用している場合その [Microsoft Edge 用リモート ツール] ページの [ダウンロード] または [取得] ボタンが無効になっている可能性があります。 ホスト (デバッグ対象) マシンを更新して、Microsoft Edge 用リモート ツールを取得します。

    Microsoft Store の Microsoft Edge 用リモート ツール

  2. Microsoft Edge 用リモート ツールを起動し、プロンプトが表示されたら、アプリのアクセス許可ダイアログに同意します。

  3. Microsoft Edge 用リモート ツールを閉じます。 今後のリモート デバッグ セッション用に開いておく必要はありません。

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

  1. 開発者モードをアクティブにします。「 開発用にデバイスを有効にする」を参照してください。

  2. デバイス ポータルを有効にします。 Windows デバイス ポータルの概要を参照してください。

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

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

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

  6. もし ローカル エリア ネットワーク接続経由のリモート診断を有効にする。 は以前にオンにしていましたが、デバイス ポータルがMicrosoft Edge 用リモート ツールと動作するようにするには、オフにしてからもう一度オンにする必要があります。

    [設定] に [開発者向け] セクションが表示されない場合は、デバイス ポータルが既にオンになっている可能性があるため、代わりに Windows 10 以降のデバイスを再起動してみてください。

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

  7. [ 次を使用して接続]に表示されるマシンのIPアドレスと接続ポートをメモします。 下の図の IP アドレスは 192.168.86.78 で、接続ポートは 50080 です。

    [設定] で IP アドレスと接続ポートをメモします

    クライアント (デバッガー) デバイスの情報は、次の「手順 2: クライアント (デバッガー マシン) を設定する」で入力します。

  8. クライアント (デバッガー) コンピューターからデバッグするホスト (デバッグ対象) コンピューター上の Microsoft Edge と Progressive Web Apps (PWA) でタブを開きます。

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

クライアントまたはデバッガー マシンは、デバッグ元のデバイスです。 このデバイスは、日常的に開発するためのマシンである場合もあれば、在宅勤務時の PC や MacBook を使用する場合もあります。

  1. クライアント (デバッガー) マシンをセットアップするには、「 Microsoft Edge の概要 」から 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. [ デバイスに接続] をクリックします。

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

  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. edge://inspect ページを使用してクライアント (デバッガー) マシンからホスト (デバッグ対象) マシンに接続するときは、別のconnection port値を使用する必要があります。 既定では、デスクトップ Windows の場合、デバイス ポータルは http のconnection portとして 50080 を使用します。 httpsの場合、デバイス ポータルは 50043 を使用するため、次のパターンに従います。edge://inspect ページで https://IP address:50043。

デバイス ポータルで使用される既定のポートを確認するには、「Windows デバイス ポータルでのセットアップの概要」の表を参照してください。

既定のポート

http の既定のポートは 50080 で、https の既定のポートは 50043 ですが、常にそうとは限りません。なぜなら、デスクトップのデバイス ポータルでは、デバイス上の既存のポート要求との競合を防ぐために、一時的な範囲 (5>0,000) のポートが要求されるためです。

デバイス ポータルで使用される既定のポートを確認するには、「Windows デバイス ポータルでのセットアップの概要」の表を参照してください。

ポート設定の詳細については、「 デスクトップ用 Windows デバイス ポータル」を参照してください。

関連項目:

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

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

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

デバッグするコンテンツを特定し、[ 検査] をクリックします。 Microsoft Edge DevTools が新しいタブで開き、ホスト (デバッキー) コンピューターからクライアント (デバッガー) コンピューターにコンテンツがスクリーンキャストされます。 ホスト上で実行されているコンテンツに対して、クライアントで Microsoft Edge DevTools の全機能を使用できるようになりました。

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

関連項目:

要素を検査する

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

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

Select Element はファースト タッチで無効になるため、この機能を使用するたびにもう一度オンにする必要があります。

重要

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

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

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

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

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

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

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

  • スクリーンキャストには、ページ コンテンツのみが表示されます。 スクリーンキャストの透明な部分は、Microsoft Edge アドレス バー、Windows 10 以降のタスク バー、Windows 10 以降のキーボードなどのデバイス インターフェイスを表します。

  • スクリーンキャストはフレーム レートに悪影響を与えます。 スクロールやアニメーションの測定中にスクリーンキャストを無効にして、ページのパフォーマンスをより正確に把握します。

  • ホスト デバイスの画面がロックされると、スクリーンキャストのコンテンツは消えます。 ホスト デバイス画面のロックを解除して、スクリーンキャストを自動的に再開します。

  • Last updated on