Microsoft Edge 84) DevTools (的新功能

發行項
07/18/2024

若要查看 Microsoft Edge DevTools 的最新功能，以及適用於 Microsoft Visual Studio Code 和 Visual Studio 的 Microsoft Edge DevTools 擴充功能，請閱讀這些公告。

若要保持最新狀態並取得最新的 DevTools 功能，請下載測試人員預覽版的 Microsoft Edge。無論您是使用 Windows、Linux 或 macOS，請考慮使用 Canary (或其他預覽通道) 作為預設開發瀏覽器。 Beta、Dev 和 Canary 版本的 Microsoft Edge 會以個別應用程式的形式執行，並存於穩定發行的 Microsoft Edge 版本。請參閱Microsoft Edge 測試人員通道。

如需最新的公告，請遵循 Twitter 上的 Microsoft Edge 小組。若要回報 DevTools 的問題或要求新功能，請在 MicrosoftEdge/DevTools 存放庫中提出問題。

來自 Microsoft Edge DevTools 小組的公告

在 Windows 高對比度模式中使用 DevTools

當 Windows 處於高對比度模式時，Microsoft Edge DevTools 現在會以高對比度模式顯示。

高對比度模式中的 Microsoft Edge DevTools

依照指示在 Windows 中開啟高對比度模式。若要在 Microsoft Edge 中開啟 DevTools，請選取 F12 或 Ctrl+Shift+I。 DevTools 會以高對比度模式顯示。

注意：DevTools 目前在 Windows 上支援高對比度模式，但在 macOS 上則不支援。

Chromium 問題 #1048378

另請參閱:

檢查深色主題和淺色主題的對比問題

比對 DevTools 中的鍵盤快捷方式以 Visual Studio Code

從您的意見反應和 Chromium 公開問題追蹤器中，Microsoft Edge DevTools 小組已瞭解您想要能夠在 DevTools 中自定義鍵盤快捷方式。在 Microsoft Edge 84 中，您現在可以將 DevTools 中的鍵盤快捷方式與 Visual Studio Code 比對，這隻是小組針對快捷方式自定義所使用的其中一項功能。

比對 DevTools 中的鍵盤快捷方式以 Visual Studio Code

若要嘗試實驗：

在 DevTools 中，按 [設定] 或按兩下 [設定] (，) DevTools 中的圖示來開啟 [設定]。
在 [ 實驗] 區段中，選取 [ 啟用自定義鍵盤快捷方式設定] 索引標籤 (需要重載) 複選框。
重載DevTools。
再次開 啟 [設定 ]，然後選取 [快捷方式] 區 段。
按兩下預設下拉式清單中的 [比對快捷方式]，選取 [DevTools (預設) ]，然後選取 [Visual Studio Code]。

DevTools 中的鍵盤快捷方式現在符合 Visual Studio Code 中對等動作的快捷方式。

例如，在 Visual Studio Code 中暫停或繼續執行腳本的鍵盤快捷方式是 F5。使用 DevTools (預設) 預設值時，DevTools 中的相同快捷方式是 F8，但使用 Visual Studio Code 預設值時，該快捷方式現在也是 F5。

這項功能目前以實驗形式在 Microsoft Edge 84 中提供，因此請與小組分享您的意見反應！

Chromium 問題 #174309

另請參閱:

自訂鍵盤快捷方式

遠端偵錯 Surface Duo 模擬器

您現在可以使用 Microsoft Edge DevTools 的完整功能，從遠端偵錯在 Surface Duo 模擬器中執行的 Web 內容。

使用 Surface Duo 模擬器，您可以測試 Web 內容在新類別的可折疊和雙螢幕裝置上呈現的方式。模擬器會執行 Android 作業系統，並提供 Microsoft Edge Android 應用程式。在 Microsoft Edge 應用程式中載入您的 Web 內容，並使用 DevTools 進行偵錯：

在 Surface Duo 模擬器上執行的 Microsoft Edge 應用程式

Microsoft edge://inspect Edge 桌面實例中的頁面會顯示 SurfaceDuoEmulator ，其中包含在 Surface Duo 模擬器上執行的開啟索引卷標或 PWA 清單：

[edge://inspect] 頁面會在模擬器上執行的 Microsoft Edge 應用程式中顯示開啟的索引標籤清單

按兩下 [檢查 ] 以查看您要偵錯的索引標籤或 PWA，以開啟 DevTools。請遵循逐步指南，從遠端偵錯 Surface Duo 模擬器上的 Web 內容：從遠端偵錯 Surface Duo 模擬器。

更輕鬆地調整 DevTools 快速檢視面板的大小

在 Microsoft Edge 83 或更早版本中，您可以將隱藏 式選單 (現在的 [快速檢視 ] 面板重設大小，) 將滑鼠停留在 [隱藏式選單] 工具欄內。 Drawer 的行為不同於 DevTools 中其他重設大小控件，您將滑鼠停留在窗格框線上以調整窗格大小。下圖顯示在Edge 83版或更早版本中調整 隱藏式選單 的大小Microsoft運作方式：

在 Microsoft Edge 83 中調整隱藏式選單大小

從 Microsoft Edge 84 開始，您可以將滑鼠停留在框線上方，以調整 隱藏式選單 的大小。這項變更會對齊調整 隱藏式選單 與 DevTools 中其他窗格大小的行為。下圖顯示在 Edge 84 或更新版本Microsoft調整 隱藏式選單 大小的運作方式：

在 Microsoft Edge 84 中調整隱藏式選單大小

Chromium 問題 #1076112

在遠端偵錯 Android 裝置、Windows 10 或更新版本的裝置或 Surface Duo 模擬器時，您可以使用 DevTools 左上角的切換圖示來切換螢幕廣播。啟用螢幕廣播后，您可以從 DevTools 視窗瀏覽遠端裝置上Microsoft Edge 中的索引標籤。

在 Microsoft Edge 84 中，這些導覽按鈕現在也可供鍵盤存取。例如，從螢幕廣播的 URL 列按 Shift+Tab ，會將焦點放在 [ 重新整理 ] 按鈕上：

Chromium 問題 #1081486

網路面板 [詳細數據] 窗格現在可供存取

在 Microsoft Edge 84 中，當您在網路記錄中為資源開啟 [詳細數據] 窗格時，網路工具中的 [詳細數據] 窗格現在會取得焦點。這項變更可讓螢幕助讀程式讀出 [ 詳細數據] 窗格的內容並與其互動。

[網络] 面板中的 [詳細數據] 窗格現在會在開啟時取得焦點

Chromium 問題 #963183

來自 Chromium 專案的公告

下列各節會宣佈Microsoft Edge 84 中提供的其他功能，這些功能已對開放原始碼 Chromium 專案做出貢獻。

使用 DevTools 隱藏式選單中的新問題工具修正網站問題

隱藏式選單中的新 [問題] 工具現在 (DevTools 底部) [快速檢視] 面板，可減少控制台的通知疲勞和雜亂。目前， 主控台 是網站開發人員、連結庫、架構和 Microsoft Edge 記錄訊息、警告和錯誤的中心位置。 Issues 工具會以結構化、匯總和可採取動作的方式，匯總來自瀏覽器的警告。問題工具會連結至 DevTools 內受影響的資源，並提供如何修正問題的指引。

經過一段時間后， 問題工具中 會顯示更多警告，而非 控制台中，以簡化 控制台 訊息。

若要開始使用，請參閱使用問題工具尋找並修正問題。

DevTools 抽選框中的問題工具

Chromium 問題 #1068116

[ 檢查模式 ] 工具提示現在會指出專案是否具有可存取的名稱和角色，且可使用鍵盤焦點。

具有輔助功能資訊的檢查模式工具提示

Chromium 問題 #1040025

另請參閱:

使用檢查工具分析頁面

效能面板更新

另請參閱:

效能功能參考

錄製負載效能之後，[ 效能 ] 面板現在會在頁尾中顯示總封鎖時間 (TBT) 資訊。 TBT 是一種負載效能計量，可協助量化頁面變成可用所需的時間。 TBT 基本上會測量 頁面看起來只能 (多久，因為內容會轉譯到螢幕) ;但頁面實際上無法使用，因為 JavaScript 會封鎖主線程，因此頁面不會回應使用者輸入。 TBT 是近似第一個輸入延遲的主要計量。

若要取得總封鎖時間資訊，請勿使用 重新整理頁面 工作流程來記錄頁面載入效能。