共用方式為

DevTools (Microsoft Edge 111) 的新功能

  • 發行項

若要查看 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 存放庫中提出問題。

影片：DevTools 111 的新功能

影片「DevTools 111 的新功能」的縮圖影像

在 HoloLens 2 裝置上遠端偵錯 Microsoft Edge、PWA 和 WebView2 控制件

適用於 Microsoft Edge 的遠端工具 應用程式現在可在 HoloLens 2 裝置上使用。 適用於 Microsoft Edge 的遠端工具應用程式是 Windows Device Portal for Desktop 的外掛程式，可針對 Microsoft Edge、漸進式 Web 應用程式 (PWA) 和 WebView2 控件中的索引卷標啟用遠端偵錯。 藉由使用遠端偵錯，您可以在遠端裝置上執行 Web 內容，並直接從開發電腦進行偵錯。

Microsoft市集中適用於 Microsoft Edge 的遠端工具應用程式

啟用遠端偵錯後，您就不需要再在 HoloLens 2 裝置上開啟 DevTools。 相反地，您可以使用裝置入口網站連線到遠端 HoloLens 2 裝置、開 edge://inspect 啟頁面，然後選取要與 DevTools 搭配使用的目標 (索引卷標、PWA 或 WebView2 控件) 。

若要提供有關 Microsoft Edge 遠端偵錯流程的意見反應，請在 問題 136：遠端偵錯 HoloLens 2 裝置現已提供最新版本的 Remote Tools for Microsoft Edge 應用程式中留下批注。

另請參閱:

裝置模式工具列具有主題和視覺缺陷的模擬控件

在舊版的 Microsoft Edge 中，若要模擬不同的主題或視覺缺陷，您可以使用 轉 譯工具來模擬 Achromatopsia，也就是當使用者無法察覺任何色彩時。

在 Microsoft Edge 111 中，除了使用轉譯工具之外，您現在還可以直接從 [裝置模式] 工具列存取這些主題和視覺障礙模擬控件。

例如，若要模擬高對比度模式，並測試Web內容的回應方式：

  1. 在 [裝置模式 ] 工具列的 [ 節流 ] 下拉式列表右側，單擊 [ 模擬媒體功能 ] ([眼球] 圖示、[ 眼球圖示] 圖示) 。
  2. 選 取強制色彩：作用中：

直接從裝置模式工具列模擬高對比度模式

您也可以按兩下 [眼球] 圖示旁的 [眼睛] 圖示來模擬視覺缺陷。 例如，若要模擬模糊的視覺：

  1. 按兩下 [在眼睛圖示 ([模擬視覺 ]，然後按兩下 [眼睛] 圖示) 。
  2. 選取 [模糊視覺]：

直接從 [裝置模式] 工具列模擬模糊的視覺

另請參閱:

效能工具會在分析生產程序代碼時，將檔案和函式名稱解除管理

Microsoft Edge 99 已將新功能新增至稱為 Unminify 的效能工具。 這項 Unminify 功能會將來源對應套用至使用效 能工具記錄 的設定檔，然後將未完成的設定檔下載到您的電腦。 在使用您的來源對應在 DevTools 的新功能中顯示效能設定檔中的原始函式名稱 (Microsoft Edge 99) 中說明 Unminify 功能。

在 Microsoft Edge 111 中，這項功能已移除，因為只要載入來源對應，效能工具現在就會在分析生產程式代碼時自動提供原始檔案和函式名稱。 在 Azure Artifacts Symbol Server 上裝載來源對應，可以可靠且安全地載入。

在下圖中，您會在分析生產程序代碼時，在圖表中看到縮製的函式名稱：

縮放圖表中的函式名稱

現在在 Microsoft Edge 111 中， 效 能工具會在分析生產程式代碼時，自動將圖表中的函式名稱解除壓縮：

圖表中未指定的函式名稱

另請參閱:

[樣式] 窗格更容易在焦點模式中使用

在舊版的 Microsoft Edge 中，在 焦點模式中， [元素 ] 工具無法輕鬆存取 [樣 式 ] 窗格內的所有索引卷標。 在 Microsoft Edge 111 中，此問題已修正。 當 [ 樣式 ] 窗格具有窄的檢視區，且無法顯示所有其他可用的索引卷標時，請按兩下 [更多索 引標籤] 展開器圖示 ([ 更多索引卷標] 展開工具圖示) ：

焦點模式中 [樣式] 窗格中的折疊索引標籤

若只要在 [樣 式 ] 窗格中顯示幾個索引卷標，請按兩下 [ 更多 索引卷標] 折迭器圖示 ([更多] 索引卷 標折迭器圖示) ：

焦點模式中 [樣式] 窗格中展開的索引標籤

另請參閱:

將選取器統計數據表從效能工具複製到 Excel

Microsoft Edge 109 在效能工具中導入了選取器統計數據功能。 在 [效能] 工具中開啟 [啟用進階轉譯檢測 (慢速) ] 設定后，選取折線圖中的任何 [重新計算樣式] 事件會在底部窗格中新增 [選取器統計數據] 索引卷標。 請參閱在Edge 109 (Microsoft Edge 109 的新功能中，使用新的選取器統計數據偵錯長時間執行的重新計算樣式事件) 。

在 Microsoft Edge 111 中，您現在可以將每個 Recalculate Styles 事件的 Selector Stats 數據表導出至 Microsoft Excel 活頁簿。 然後，您可以使用 Excel 來執行匯總選取器效能分析，並識別配置檔存留期內成本最高的選取器。

若要匯出 選取器統計資料資料 表：

  1. 使用滑鼠按兩下左上方儲存格，然後拖曳以選取右下方儲存格。
  2. 以滑鼠右鍵按鍵表，然後選取 [ 複製]。 或者，按 Ctrl+C (Windows、Linux) 或 Command+C (macOS) 。
  3. 將數據表貼到 Excel 中。

選取整個選取器統計數據數據表以進行複製貼上

另請參閱:

在焦點模式中，當您將工具移至快速檢視時，輔助技術會宣告

在舊版的 Microsoft Edge 中，將工具從 [ 活動 列] 移至 [ 快速檢視 ] 工具列時，螢幕助讀程式之類的輔助技術並未宣布確認。 在 Microsoft Edge 111 中，此問題已修正。 當您將網路工具從活動列移至 [快速檢視] 工具列時，螢幕助讀程式現在會宣佈「已成功將網路新增至快速檢視」：

將網路工具從活動列移至 [快速檢視] 工具列

另請參閱:

Chromium 專案的公告

Microsoft Edge 111 也包含 Chromium 專案的下列更新：