遠端偵錯 Windows 裝置

從 Windows 或 macOS 電腦，在 Windows 10 或更新版本裝置上遠端偵錯即時內容。

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

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

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

  • 將內容從 Windows 裝置螢幕投影片到開發電腦上的開發工具執行個體。

步驟 1：設定主機 (偵錯專家電腦)

主機或偵錯對象電腦是您要偵錯的 Windows 10 或更新版本裝置。 這可能是您難以實際存取的遠端裝置，或可能沒有鍵盤和滑鼠周邊設備，導致難以與該裝置上的 Microsoft Edge 開發工具互動。

若要設定 host (debuggee) 電腦，請依序使用下列小節。

安裝和設定 Microsoft Edge

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

  2. 如果您在主機 (偵錯工具) 電腦上使用預先安裝的 Microsoft Edge 版本，請驗證您已安裝Microsoft Edge (Chromium) ，而不是Microsoft Edge (EdgeHTML) 。 快速檢查的方法是在瀏覽器中載入 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 和漸進式 Web Apps (PWA 中的索引標籤) (偵錯對象) 電腦，您要從電腦的用戶端 (偵錯工具偵錯) 電腦。

步驟 2：設定用戶端 (偵錯工具電腦)

用戶端或偵錯工具機器是您要從中偵錯的裝置。 該設備可能是您的日常開發機器，也可能只是您在家工作時的 PC 或 MacBook。

  1. 若要在電腦) 設定用戶端 (偵錯工具，請先安裝 [Microsoft Edge]，如果您尚未安裝 [ 了解 Microsoft Edge ]。

  2. 如果您在主機 (偵錯工具) 電腦上使用預先安裝的 Microsoft Edge 版本，請驗證您已安裝Microsoft Edge (Chromium) ，而不是Microsoft Edge (EdgeHTML) 。 快速檢查的方法是在瀏覽器中載入 edge://settings/help ，並確認版本號碼為 75 或更高版本。

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

  4. 在 [連線到遠端 Windows 裝置] 底下，在遵循此模式的文字方塊中輸入主機 (偵錯工具) 電腦的 IP 位址和連線埠：http://IP address：connection port。

  5. 按一下 [連線至裝置]。

    用戶端上的 [edge://inspect] 頁面

  6. 如果您為主機 (偵錯工具) 電腦設定驗證，系統會提示您輸入使用者 名稱 和 密碼 ，讓電腦) 用戶端 (偵錯工具成功連線。

使用 https 代替 http

如果您想要使用以下http方法https連線到主機 (偵錯對象) 電腦 ：

  1. 在 Microsoft Edge 用戶端 (偵錯工具) 電腦上移至 [移至 http://IP address:50080/config/rootcertificate ]。 這會自動下載名為 rootcertificate.cer的安全性憑證。

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

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

  4. 按一下 [ 將所有憑證放在下列存放區] ，然後按一下 [瀏覽...]。

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

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

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

  8. 現在，當使用頁面從 edge://inspect 用戶端 (偵錯工具) 電腦連線到主機 (偵錯對象) 電腦時，您必須使用不同的 connection port 值。 根據預設，對於桌面 Windows，裝置入口網站會用作 50080connection porthttp。 針對 https，裝置入口網站會使用50043，因此請遵循下列模式： https://IP address：50043。edge://inspect

若要查看裝置入口網站所使用的預設連接埠，請參閱 Windows 裝置入口網站概觀中的設定中的表格。

預設連接埠

is 的http預設連接埠和 is 50043的https預設連接埠，但事實並非總是如此，因為桌面上的裝置入口網站會宣告暫時範圍內的連接埠 (>50,000) ，以防止與裝置上的現有連接埠宣告發生50080衝突。

若要查看裝置入口網站所使用的預設連接埠，請參閱 Windows 裝置入口網站概觀中的設定中的表格。

有關連接埠設定的資訊，請參閱 桌面的 Windows 裝置入口網站。

另請參閱:

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

如果電腦) 用戶端 (偵錯工具成功連線到主機 (偵錯工具) 電腦， edge://inspect 用戶端上的頁面現在會顯示 Microsoft Edge 中的索引標籤清單，以及主機上任何開啟的 PWA。

用戶端上的 [edge://inspect] 頁面會顯示 Microsoft Edge 中的索引標籤和主機上的 PWA

判斷您要偵錯的內容，然後按一下 [檢查]。 Microsoft Edge 開發工具會在新索引標籤中開啟，並將內容從主機 (偵錯工具) 電腦螢幕擷取畫面 (電腦偵錯工具) 電腦。 現在，您可以針對在主機上執行的內容使用用戶端上 Microsoft Edge DevTools 的完整功能。

用戶端上的 Microsoft Edge DevTools 偵錯主機上的 Microsoft Edge 中的索引標籤

另請參閱:

檢查元素

例如，嘗試檢查元素。 移至用戶端上開發工具執行個體的 [元素 ] 工具，然後將游標停留在元素上，以在主機裝置的檢視區中醒目提示該元素。

您也可以點選主機裝置螢幕上的元素，以在 [元素] 工具中選取該元素。 在用戶端的開發工具執行個體上選取 [ 選取元素 ]，然後在主機裝置畫面上點選該元素。

第一次觸控後，[選取元素] 即會停用，因此每次想要使用此功能時，都必須再次開啟。

重要事項

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

步驟 4：將主機螢幕螢幕投影到用戶端裝置

根據預設，用戶端上的 DevTools 執行個體已開啟螢幕投射，可讓您在用戶端裝置上的 DevTools 執行個體中檢視主機裝置上的內容。 按一下 [切換螢幕錄影 ] 以開啟或關閉此功能。

用戶端上 Microsoft Edge 開發工具中的 [切換螢幕錄影] 按鈕

您可以透過多種方式與螢幕錄影互動：

  • 點擊會轉化為點擊，在裝置上觸發適當的觸控事件。
  • 電腦上的按鍵輸入會傳送到裝置。
  • 若要模擬捏合手勢，請按住 Shift 並同時拖曳。
  • 若要捲動，請使用觸控板或滑鼠滾輪，或使用滑鼠指標來甩動。

關於螢幕錄影的注意事項：

  • 螢幕錄影僅顯示頁面內容。 螢幕錄影的透明部分代表裝置介面，例如 Microsoft Edge 網址列、Windows 10 或更新版本的工作列，以及 Windows 10 或更新版本的鍵盤。

  • 螢幕錄影會對畫面播放速率造成負面影響。 在測量捲軸或動畫時禁用屏幕投射，以更準確地了解頁面的性能。

  • 如果主機裝置螢幕鎖定，螢幕錄影的內容就會消失。 解除鎖定主機裝置螢幕以自動繼續螢幕錄影。

  • Last updated on