從您的 Windows 或 macOS 電腦遠端除錯 Windows 10 或更新裝置上的即時內容。
這個教學會教你以下任務:
設定你的 Windows 裝置進行遠端除錯,並從開發機連接它。
檢查並除錯 Windows 裝置上的開發機即時內容。
將 Windows 裝置的內容螢幕播放到開發機器上的 DevTools 實例。
步驟 1:設定主機 (除錯機)
主機或除錯機器是你想除錯的 Windows 10 或更新版本裝置。 可能是遠端裝置,你很難實體存取,或者沒有鍵盤和滑鼠周邊,導致與該裝置上的 Microsoft Edge DevTools 互動變得困難。
要設定主機 (除錯) 機器,請依序使用以下子章節。
安裝並設定 Microsoft Edge
如果還沒安裝,在你想除錯的 Windows 10 或更新裝置上,從「了解 Microsoft Edge」安裝 Microsoft Edge。
如果你在主機 (除錯) 機上使用預裝的 Microsoft Edge,請確認你有Microsoft Edge (Chromium) ,而不是Microsoft Edge (EdgeHTML) 。 快速檢查方法是打開
edge://settings/help瀏覽器確認版本號是否為 75 或以上。在 Microsoft Edge 裡切換
edge://flags。在 搜尋旗標中輸入 「透過 Windows 裝置入口開啟遠端除錯」。 把那個標記設為 啟用。 接著,點擊 重新啟動 按鈕即可重新啟動 Microsoft Edge。
安裝 Microsoft Edge 的遠端工具
從 Microsoft Store 安裝 Microsoft Edge 的遠端工具。
要設定主機 (除錯) 機器,必須運行Windows 10版本 1903 或更新版本。 如果你使用的是 Windows 10 或更新版本 1809 或更早版本,該 Microsoft Edge 遠端工具頁面中的下載或取得按鈕可能會被停用。 更新主機 (除錯) 機器,以取得 Remote Tools for Microsoft Edge。
啟動 Microsoft Edge 的遠端工具,若被提示,請在應用程式中接受權限對話框。
關閉 Microsoft Edge 的遠端工具。 你不需要為未來遠端除錯時開啟它。
啟用開發者模式並啟用裝置入口網站
啟用開發者模式;請參見 「啟用您的裝置以供開發」。
啟用裝置入口網站;請參閱 Windows 裝置入口網站總覽。
如果你在 WiFi 網路上,請確保網路被標記為 網域 或 私人。 你可以打開 Windows 安全性 應用程式,選擇防火牆 & 網路保護,並查看你的網路是被列為網域網路還是私人網路來驗證狀態。
如果你的網路被列為公開,請到網路>Wi-Fi&> 設定網路,點選你的網路,然後將網路設定檔按鈕切換為私人。
打開 設定 應用程式。 在 尋找設定中,輸入
Developer settings並選擇它。 切換到 開發者模式。 你現在可以透過將「透過區域網路連線開啟遠端診斷」設定為「開啟」來開啟裝置入口網站。 接著你可以選擇開啟 驗證, 讓客戶端 (除錯器) 裝置必須提供正確的憑證才能連接到該裝置。如果「 透過區域網路連線開啟遠端診斷」 。之前已開啟,您必須關閉並重新開啟,裝置 入口 網站才能與 Microsoft Edge 遠端工具一起使用。
如果設定中沒有顯示「開發者推薦」區塊,表示裝置入口網站可能已經開啟,建議你試著重啟 Windows 10 或更新版本的裝置。
請注意在 「使用:連接」中顯示的機器 IP 位址和連線埠。 下圖中的 IP 位址為
192.168.86.78,連接埠為50080:
你要在下一節「步驟2:設定客戶端 (除錯器機器) 」中輸入用戶端 (除錯器) 裝置上的資訊。
Microsoft在你想從客戶端 (除錯器) 機器 (除錯主機) Edge 和 Progressive Web Apps (PWA 中開啟分頁) 。
步驟 2:設定客戶端 (除錯器機)
用戶端或除錯器機器就是你想要除錯的裝置。 這台裝置可能是你日常的開發機器,也可能只是你在家工作時的 PC 或 MacBook。
若要設定客戶端 (除錯器) 機器,如果你還沒安裝 Edge,請從 此頁面 安裝 Microsoft Edge。
如果你在主機 (除錯) 機上使用預裝的 Microsoft Edge,請確認你有Microsoft Edge (Chromium) ,而不是Microsoft Edge (EdgeHTML) 。 快速檢查方法是打開
edge://settings/help瀏覽器確認版本號是否為 75 或以上。請前往 Microsoft Edge 的頁面
edge://inspect。 預設情況下,你應該在 裝置 區塊。在 「連接遠端 Windows 裝置」中,依照此模式輸入主機 (除錯) 機器的 IP 位址及連接埠,並依照此模式輸入:http://
IP address:connection port。點擊 「連接裝置」。
如果你為主機 (除錯) 機器設定認證,系統會提示你輸入客戶端 (除錯器) 機器的 使用者名稱 和 密碼 ,才能成功連線。
使用 https 取代 http
如果你想用以下方式httpshttp連接主機 (除錯) 機器:
在
http://IP address:50080/config/rootcertificate客戶端Microsoft Edge (除錯器) 。 這會自動下載一個名為rootcertificate.cer. 的安全憑證。選擇
rootcertificate.cer。 這會開啟 Windows 憑證管理工具。點選 安裝憑證...,確認「 目前使用者 」已開啟,然後點 選「下一頁」。
點擊 「將所有憑證放入以下商店 」並點擊「 瀏覽...」。
選擇 「受信任根認證機構 」商店,然後點擊 確定。
按 [下一步],然後按一下 [完成]。
若被要求,請確認您想將此憑證安裝至 受信任根憑證機構 商店。
現在,當從客戶端 (除錯器) 使用
edge://inspect該頁面的機器連接到主機 (除錯器) 機器時,你必須使用不同的connection port值。 預設情況下,桌面 Windows 的裝置入口網站會使用50080connection porthttp。 對於https,裝置入口網站使用50043,請依照此模式:https://IP address:50043在頁面上edge://inspect。
要查看裝置入口網站使用的預設埠口,請參閱 Windows 裝置入口網站總覽中的設定表。
預設埠口
預設 http 埠口是 50080 ,預設 https 埠口是 50043,但情況並非總是如此,因為桌面版的裝置入口會聲稱擁有短暫範圍 (>50,000) ,以避免與裝置上現有埠口聲稱相撞。
要查看裝置入口網站使用的預設埠口,請參閱 Windows 裝置入口網站總覽中的設定表。
有關埠設定的資訊,請參閱 Windows 裝置入口網站桌面版。
另請參閱:
- Windows Device Portal for Desktop 中的登錄檔式設定。
步驟 3:從客戶端除錯主機上的內容
如果客戶端 (除錯器) 機器成功連接到主機 (除錯器) 機器, edge://inspect 客戶端頁面現在會顯示 Edge Microsoft分頁清單以及主機上所有未開啟的 PWA。
先決定你想除錯的內容,然後點 選檢查。 Microsoft Edge DevTools 會在新分頁開啟,並從主機 (除錯器) 機器螢幕播放內容,傳送給客戶端 (除錯器) 機器。 你現在可以在客戶端完整使用 Microsoft Edge DevTools 來執行主機上的內容。
另請參閱:
檢查元件
舉例來說,試著檢查一個元素。 到客戶端 DevTools 實例的 Elements 工具,將滑鼠移到某個元素上,在主機裝置的視窗中選取該元素。
你也可以點選主機螢幕上的元素,在 元素 工具中選擇它。 在客戶端的 DevTools 實例中選擇 「選擇元素 」,然後在主機裝置畫面點選該元素。
選擇元素 在第一次觸碰後就被停用了,所以每次想使用這個功能時都必須重新開啟。
重要事項
在 Windows 10 版本 1903 中,Elements 工具中的事件監聽器窗格是空白的。 這是已知的問題,團隊計劃在 Windows 10 1903 版本的維修更新中修正事件監聽者面板。
步驟 4:將主機螢幕投影到用戶端裝置
預設情況下,客戶端的 DevTools 實例開啟了螢幕投射功能,讓你可以在客戶端裝置上的 DevTools 實例中查看主機裝置上的內容。 點擊切換 螢幕播放 以開啟或關閉此功能。
你可以用多種方式與螢幕播放互動:
- 點擊聲會被轉換成點擊,觸發裝置上的正確觸碰事件。
- 電腦上的按鍵會傳送到裝置。
- 要模擬捏合手勢,拖曳時按住 Shift 。
- 要捲動,請使用觸控板或滾輪,或用滑鼠指標快速移動。
關於螢幕錄影的備註:
螢幕擷取只會顯示頁面內容。 螢幕播放的透明部分代表裝置介面,例如 Microsoft Edge 地址列、Windows 10 或更新版本的工作列,以及 Windows 10 或更新版本的鍵盤。
螢幕擷取會負面影響幀率。 在測量捲動或動畫時關閉螢幕播放,以獲得更準確的頁面效能狀況。
如果你的主機裝置螢幕鎖死,螢幕錄影的內容就會消失。 解鎖主機螢幕,自動恢復螢幕錄影。