DevTools 的新功能 (Microsoft Edge 111)

這些是 Microsoft Edge 穩定版本中的最新開發工具功能。

影片：DevTools 111 的新功能

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

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

適用於 Microsoft Edge 應用程式的遠端工具現在可在 HoloLens 2 裝置上使用。 適用於 Microsoft Edge 應用程式的遠端工具是適用於桌面的 Windows 裝置入口網站的外掛程式，可遠端偵錯 Microsoft Edge 中的索引標籤、漸進式Web Apps (PWA) 和 WebView2 控制項。 藉由使用遠端偵錯，您可以在遠端裝置上執行 Web 內容，並直接從開發電腦進行偵錯。

Microsoft Store 中的 Microsoft Edge 遠端工具應用程式

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

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

另請參閱:

[裝置模式] 工具列具有針對佈景主題和視力缺陷的模擬控制項

在舊版的 Microsoft Edge 中，若要模擬不同的主題或視力缺陷，您可以使用 [轉譯 ] 工具，例如模擬色盲，也就是使用者無法察覺任何色彩的情況。

在 Microsoft Edge 111 中，除了使用轉譯工具之外，您現在可以直接從裝置模式工具列存取這些主題和視力缺陷模擬控制項。

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

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

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

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

  1. 按一下 [ 模擬視力缺陷] (眼睛圖示、 眼睛圖示) 。
  2. 選取 [視力模糊]：

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

另請參閱:

效能工具在分析生產程式碼時取消縮小檔案和函數名稱

Microsoft Edge 99 在 效能 工具中新增了一項名為 「取消縮小」的新功能。 此 [取消縮小 ] 功能會將來源對應套用至 使用 [效能 ] 工具記錄的設定檔，然後將未縮小的設定檔下載到您的電腦。 若要縮小功能，請參閱 開發工具 (Microsoft Edge 99 新功能的效能設定檔中，使用來源對應在效能設定檔中顯示原始函數名稱) 中說明。

在 Microsoft Edge 111 中，此功能已被移除，因為效能工具現在會在分析生產程式碼時，只要載入原始檔對應，就會自動提供原始檔案和函式名稱。 來源對應裝載在 Azure 成品符號伺服器上，即可可靠且安全地載入來源對應。

在下列影像中，當您分析生產程式碼時，您會在火焰圖中看到縮小的函數名稱：

火焰圖中縮小的函數名稱

現在在 Microsoft Edge 111 中， 效能 工具會在分析生產程式碼時自動取消縮小火焰圖中的函數名稱：

火焰圖中未縮小的函數名稱

另請參閱:

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

在舊版的 Microsoft Edge 中，在 焦點模式下， [元素 ] 工具無法提供存取 [樣式 ] 窗格內所有索引標籤的簡單方法。 在 Microsoft Edge 111 中，這個問題已經修正。 當 [樣式 ] 窗格的視埠較窄且無法顯示所有其他可用的索引標籤時，請按一下 [其他索引標籤] 展開器圖示 ([ 其他索引標籤] 展開器圖示) ：

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

若要只顯示 [樣式 ] 窗格中的幾個索引標籤，請按一下 [其他索引標籤] 摺疊圖示 ([ 其他索引標籤] 摺疊圖示) ：

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

另請參閱:

將選取器統計資料表格從效能工具複製到 Excel

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

在 Microsoft Edge 111 中，您現在可以將每個重新計算樣式事件的選取器統計資料表匯出至 Microsoft Excel 活頁簿。 接著，您可以使用 Excel 進行彙總選取器效能分析，並識別設定檔存留期內成本最高的選取器。

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

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

選取整個 [選取器統計資料] 資料表進行複製貼上

另請參閱:

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

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

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

另請參閱:

來自 Chromium 專案的公告

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

另請參閱

  • 上次更新時間：