遠端偵錯 Windows 裝置

從 Windows 或 macOS 計算機對 Windows 10 或更新版本裝置上的即時內容進行遠端偵錯。

本教學課程會教導您下列工作：

• 設定您的 Windows 裝置以進行遠端偵錯，並從您的開發電腦連線到它。

• 從您的開發電腦檢查 Windows 裝置上的即時內容並進行偵錯。

• 從 Windows 裝置到開發電腦上 DevTools 實例的螢幕廣播內容。

步驟 1：設定主機 (偵錯項目機器)

主機或偵錯項目計算機是您想要偵錯的 Windows 10 或更新版本裝置。 這可能是您難以實際存取的遠端裝置，或可能沒有鍵盤和滑鼠周邊，因此難以與該裝置上的 Microsoft Edge DevTools 互動。

若要在電腦 (設定主機) 專案：

1. 安裝和設定 Microsoft Edge

2. 從 Microsoft Store 安裝適用於 Microsoft Edge (Beta) 的遠端工具

3. 啟用 開發人員模式 並啟用 裝置入口網站

安裝和設定 Microsoft Edge

1. 如果您尚未偵錯，請在要偵錯的 Windows 10 或更新版本裝置上，從此頁面安裝 Microsoft Edge。

2. 如果您在主機 (偵錯專案) 計算機上使用預安裝的 Microsoft Edge 版本，請確認您已Microsoft Edge (Chromium) ，且未Microsoft Edge (EdgeHTML) 。 快速檢查的方式是在瀏覽器中載入 edge://settings/help ，並確認版本號碼為75或更高。

3. 在 Microsoft Edge 中移至 edge://flags 。

4. 在 [搜尋旗標] 中，輸入 [透過 Windows 裝置入口網站啟用遠端偵錯]。 將該旗標設定為 [已啟用]。 然後，按兩下 [ 重新啟動] 按鈕Microsoft Edge 重新啟動。

安裝適用於 Microsoft Edge (Beta) 的遠端工具

從 Microsoft Store 安裝 適用於 Microsoft Edge (Beta) 的遠端 工具。

如果您使用 Windows 10 或更新版本 1809 或更早版本，Microsoft Edge (Beta) 的 [取得] 按鈕可能會停用。 若要在) 電腦 (設定主機，它必須執行 Windows 10 1903 版或更新版本。 將主機更新 (偵錯專案) 計算機，以取得 適用於 Microsoft Edge (Beta) 的遠端工具 。

啟動 適用於 Microsoft Edge (Beta) 的遠端工具 ，並在出現提示時接受應用程式中的許可權對話方塊。 您現在可以關閉 適用於 Microsoft Edge (Beta) 的遠端工具 ，而且不需要為未來的遠端偵錯會話開啟它。

啟用開發人員模式並啟用裝置入口網站

如果您使用WiFi網路，請確定網路已標示為 網域 或 私人。 您可以開啟 Windows 安全性 應用程式、選取 [防火牆] & 網络保護，並檢查您的網路是否列為網域網路或專用網，以確認狀態。

如果您的網络列為 [公用]，請移至 [ 設定>網络 & 因特網>Wi-Fi]，按兩下您的網路，然後將 [ 網路配置檔 ] 按鈕切換為 [ 私人]。

現在，開啟 [設定] 應用程式。 在 [尋找設定] 中，輸入 Developer settings 並加以選取。 切換開發 人員模式。 您現在可以將 [透過局域網络連線開啟遠程診斷] 設定為 [開啟]，以開啟Device Portal。 然後，您可以選擇性地開啟 驗證 ，讓用戶端 (調試程式) 裝置必須提供正確的認證才能連線到此裝置。

如果 透過局域網路連線開啟遠程診斷。 先前已開啟，您必須將它關閉並重新開啟， 裝置入口網站 才能使用 適用於 Microsoft Edge 的遠端工具 (Beta) 。 如果 [設定] 中未顯示 [適用於開發人員] 區段，則裝置入口網站可能已開啟，因此請嘗試改為重新啟動 Windows 10 或更新版本的裝置。

請注意計算機 IP 位址和連線埠，這些埠會顯示在 [使用下列項目連線] 下： 下圖中的 IP 位址為 192.168.86.78 ，而連線埠為 50080：

您會在 下一節中輸入用戶端 (調試程式) 裝置的資訊。 在您想要從用戶端 (調試程式) 計算機偵錯的主機 (偵錯專案) 計算機上，開啟 Microsoft Edge 和漸進式 Web Apps (PWA ) 中的索引標籤。

步驟 2：設定用戶端 (調試程式電腦)

用戶端或調試程式電腦是您想要偵錯的裝置。 此裝置可能是您的每日開發計算機，或可能是您在家工作時的電腦或 MacBook。

1. 若要在計算機) 設定用戶端 (調試程式，如果您尚未安裝，請從 此頁面 安裝 Microsoft Edge。

2. 如果您在主機 (偵錯專案) 計算機上使用預安裝的 Microsoft Edge 版本，請確認您已Microsoft Edge (Chromium) ，且未Microsoft Edge (EdgeHTML) 。 快速檢查的方式是在瀏覽器中載入 edge://settings/help ，並確認版本號碼為75或更高。

3. 移至 Microsoft edge://inspect Edge 中的頁面。 根據預設，您應該在 [ 裝置] 區 段上。

4. 在 [ 連線到遠端 Windows 裝置] 底下，在下列模式的文字框中輸入主機 (偵錯專案) 機的 IP 位址和聯機埠：http://IP address：connection port。

5. 按兩下 [連線到裝置]。

   

6. 如果您在偵錯專案) 計算機 (主機設定驗證，系統會提示您輸入用戶端的 使用者名稱 和 密碼 ， (調試程式) 計算機成功連線。

使用 HTTPs 而非 HTTP

如果您要連線到主機 (使用 來偵錯專案) 電腦， https 而不是 http：

1. http://IP address:50080/config/rootcertificate在用戶端 (除錯程式) 電腦的 Microsoft Edge 中移至 。 這會自動下載名為 rootcertificate.cer的安全性憑證。

2. 選取 rootcertificate.cer。 這會開啟 Windows 憑證管理員工具。

3. 按兩下 [安裝憑證...]，確定 [ 目前使用者 ] 已開啟，然後按 [ 下一步]。

4. 按兩下 列存放區中的所有憑證】 ，然後按兩下 [ 流覽...]。

5. 選取 [ 受信任的跟證書授權 單位] 存放區，然後按兩下 [ 確定]。

6. 按 [下一步]，然後按一下 [完成]。

7. 如果出現提示，請確認您想要將此憑證安裝到 受信任的跟證書授權 單位存放區。

8. 現在，當使用 edge://inspect 頁面從用戶端 (調試程式) 計算機連線到主機 (偵錯專案) 機時，您必須使用不同的 connection port 值。 根據預設，針對桌面 Windows，Device Portal 會使用 50080 作為 connection port 的 http。 針對 https，Device Portal 會使用 50043 ，因此請遵循下列模式：https://IP address：50043 在 edge://inspect 頁面上。 深入瞭解裝置入口網站所使用的預設埠。

默認埠

的預設埠 http 是 50080 ，而的預設埠 https 是 50043，但不一定如此，因為桌面上的 Device Portal 會宣告暫時範圍內的埠 (>50,000) ，以避免與裝置上現有的埠宣告發生衝突。 若要深入瞭解，請參閱 Windows 桌面上裝置入口網站 的埠設定 一節。

步驟 3：從用戶端對主機上的內容進行偵錯

如果用戶端 (調試程式) 計算機成功連線到主機 (偵錯專案) 機， edge://inspect 則用戶端上的頁面現在會顯示 Microsoft Edge 中的索引卷標清單，以及主機上任何開啟的 PWA。

判斷您想要偵錯的內容，然後按兩下 [檢查]。 Microsoft Edge DevTools 會在新的索引標籤中開啟，並將內容從主機 (偵錯專案) 機到) 計算機的用戶端 (調試程式。 您現在可以在用戶端上使用Microsoft Edge DevTools 的完整功能，來取得在主機上執行的內容。 在這裡深入瞭解如何使用 Microsoft Edge DevTools。

檢查元素

例如，嘗試檢查專案。 移至用戶端上 DevTools 實例的 Elements 工具， 並將滑鼠停留在元素上，以在主機裝置的檢視區中反白顯示它。

您也可以點選主機裝置畫面上的元素，在 [元素 ] 工具中加以選取。 選取用戶端上 DevTools 實例上的 [選取元素]，然後點選主機裝置畫面上的 元素。

選取專案 會在第一次觸控之後停用，因此您每次想要使用此功能時都必須重新開啟它。

重要事項

在 1903 版 Windows 10，[元素] 工具中的 [事件接聽程式] 窗格是空白的。 這是已知問題，小組計劃修正服務更新中的事件接聽程式窗格，以 Windows 10 1903 版。

步驟 4：將主機畫面螢幕螢幕廣播至用戶端裝置

根據預設，用戶端上的 DevTools 實例已開啟螢幕廣播，可讓您在用戶端裝置的 DevTools 實例中檢視主機裝置上的內容。 按兩下 [切換螢幕廣播 ] 以開啟或關閉此功能。

您可以透過多種方式與螢幕廣播互動：

• 點選會轉譯成點選，在裝置上引發適當的觸控事件。
• 您電腦上的按鍵會傳送至裝置。
• 若要模擬捏合手勢，請在拖曳時按 住 Shift 。
• 若要捲動，請使用您的追蹤板或滑鼠滾輪，或使用滑鼠指標來切換。

有關螢幕廣播的注意事項：

• 屏幕廣播只會顯示頁面內容。 屏幕廣播的透明部分代表裝置介面，例如Microsoft Edge 網址列、Windows 10 或更新版本任務列，以及 Windows 10 或更新的鍵盤。

• 屏幕廣播會對幀速率造成負面影響。 在測量捲動或動畫時停用螢幕廣播，以取得更精確的頁面效能圖片。

• 如果您的主機裝置螢幕鎖定，您的螢幕廣播內容就會消失。 解除鎖定主機裝置畫面，以自動繼續屏幕廣播。

已知問題

• 在 1903 版 Windows 10，[元素] 工具中的 [事件接聽程式] 窗格是空白的。 小組計劃將服務更新中的 [事件接聽程式] 窗格修正為 Windows 10 1903 版。

• 應用程式面板中的 [Cookie] 窗格在 Windows 10 1903 版上是空白的。 小組計劃將服務更新中的 [Cookie] 窗格修正為 Windows 10 1903 版。

• [稽核] 工具、[3D 檢視] 工具、[設定] 中的 [模擬裝置] 區段，以及 [元素] 工具中的 [輔助功能] 樹狀目錄窗格目前未如預期般運作。

• 當您遠端偵錯時，檔案總管不會從 [來源 ] 工具或 [ 安全 性] 面板中的DevTools啟動。