Edgeブラウザでデバッグをするために開発者ツールを表示すると、このようにEdge開発者チームによる新着情報が表示されます。
ここにある「Windows10デバイスのMicrosoft Edgeをリモートでデバッグする」がどのようなものか気になったので、今回は概要、設定手順やできることを調べてみました。
なお、本記事はMicrosoft MVPブログ企画の記事として投稿しています。その他の記事はこちらからご覧ください。
以下の環境で動作を確認しています。
Microsoft Edge ブラウザ (Windows) : 83.0.478.54
ホストPC（デバッグされる側）：Windows 10 Pro 1909
クライアントPC (デバッグ実行する側) : Windows 10 Home 1909
1. Edgeブラウザによるリモートデバッグの概要
これは、Edgeブラウザから他のデバイスのEdgeブラウザをデバッグできる仕組みです。 物理的なアクセスが難しいPCのEdgeブラウザをデバッグしたいという時に使えます。
2. リモートデバッグを行う手順
基本的な手順は以下にまとまっています。
大まかには以下の準備をします。
ホストPC（デバッグされるWindows10PC）
・Edgeブラウザ、デバッグ用ツールのインストール(Microsoft Storeから取得可能)
・ファイアーウォールの設定（プライベートネットワークにする)
・開発者モードの切り替え
今回、ホストPCを開発者モードに切り替えたのが初めてなのと、Windows Updateが重なったためか、開発者モードが使えるようになるまで1時間近くかかりました。
クライアントPC (デバッグを行うPC）
・Edgeブラウザのインストール
・edge://flagsで、 "Enable remote Windows device debugging in edge://inspect" を有効化
ちなみに、MacのEdgeブラウザでは、edge://flags/ で開いたページで "Enable remote Windows device debugging in edge://inspect"が表示されなかったので、いまのところMacでは使用できないようです。
デバッグ実行するには、クライアントPCのEdgeブラウザで、 edge://inspect を開き、Connect to a remove Windows deviceの下にあるフィールドに、ホストPCのデバイスポータルのアドレスを入力して、 Connect to Device ボタンを実行します。
デバイスポータルのアドレスは、Microsoft Docsのデバイスポータル概要によると、http://IPアドレス:50080 または、 https://IPアドレス:50043 です。
すると、以下の画面のように、Remote TargetにPC名が表示されます。
この時点で、クライアントPCがホストPCに接続できており、ホストPCがEdgeブラウザを開くと、開いたタブの情報が表示されます。Inspectというリンクを選択すると、ホストPCのEdgeブラウザで開いているページが、クライアントPC側のEdgeブラウザでも表示されます。
以下の例は、ホストPCで、 https://www.crossroad-tech.com/ を表示させているとき、クライアントPCのEdgeブラウザで表示される画面です。
このように、ホストPCのEdgeブラウザで開いている画面が表示されます。また、ここでスクロール、クリック操作するとホストPCの画面も連動します。
次に、クライアントPC側のデバッグ画面で、html要素を変更してみます。「開発情報 (その他)」と書いてある箇所を「リモートデバッグテスト」と変更してみます。
クライアントPC側のデバッグ画面の変更が、ホストPC側にも反映されました。
3. Tips
3.1 can't connect to device at this addressと表示されてホストPCに接続できない
デバイスポータルに接続できないと発生します。私の場合、手順が合っているのにデバイスポータルに接続できないことが続きましたが、ちょうど表示されたWindows Updateを実行後、再起動すると、デバイスポータルに接続できました。また、デバイスポータルに接続できると、edge://inspectのConnect to Deviceボタンではエラーが出ませんでした。
3.2 Edgeブラウザの新着情報をみる方法
Edgeブラウザの設定状況によっては、開発者ツールを開いても冒頭で紹介したような新着情報が表示されない場合があります。これを表示させるには、画像右上の赤い枠で囲った箇所を選択して、「コンソールドロワーを表示する」を選びます。これで、開発者ツール下側にも情報が表示されます。
これでも表示されない場合、コンソールドロワーの左側 (画像下付近の赤い枠で囲った箇所) を選択すると新着情報を選ぶことができます。
4. おわりに
Microsoft Docsに手順が丁寧に書いてあるので、基本的には迷うことはありませんでした。ただ、なぜかデバイスポータルにうまくアクセスできず、調査に思ったよりも時間がかかりました。
今回紹介した昨日は、デバッグ対象の端末がリモートに存在しているとき、都度その場所へ行かなくてもデバッグできるので、Web開発者に便利な機能だと思います。
