DevTools (Microsoft Edge 99) 的新功能

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

影片：Microsoft Edge |DevTools 99 的新增功能

使用來自 Azure 成品符號伺服器的原始對應安全地偵錯生產程式碼

Azure Artifacts 符號伺服器現在支援儲存建置程序在編譯、縮小和搭售程式碼時所產生的來源對應。 現在可以將來源對應發佈到安全的 Azure 成品符號伺服器，而非在公用伺服器上託管來源對應。 然後，將開發工具連線到符號伺服器，讓開發工具自動擷取您的來源對應。

藉由使用原始檔對應，您可以在開發工具中查看和偵錯原始原始程式碼，而不必使用伺服器傳回的編譯、縮小和搭售的生產環境程式碼。 在 Azure Artifacts 符號伺服器上裝載來源對應可讓您安全且私密地查看和使用原始程式碼，而不是將來源對應放在伺服器上並公開顯示原始程式碼。

若要嘗試此功能：

1. 將來源對應發佈至 Azure 成品符號伺服器。
2. 輸入您的 Azure DevOps 組織和個人存取權杖，以開啟開發工具>設定>符號伺服器，並將開發工具連線至 Azure 成品符號伺服器。

另請參閱:

• 將處理後的程式碼對應至原始原始程式碼，以進行偵錯
• 藉由將原始檔對應發佈到 Azure Artifacts 符號伺服器，安全地偵錯原始程式碼
• 使用 Azure Artifacts 符號伺服器來源對應安全地偵錯原始程式碼

適用於 Visual Studio 的 Microsoft Edge DevTools 擴充功能

繼 Visual Studio Code 整合的成功之後，您現在也可以在 Microsoft Visual Studio 中內嵌 Microsoft Edge 開發人員工具，以即時偵錯您的 ASP.NET 專案。 下載 適用於 Visual Studio 的 Microsoft Edge 開發人員工具 並試用。

若要嘗試此功能：

1. 確定已安裝 Visual Studio 2022 和 ASP.NET 工作負載。
2. 將 Web Live 預覽設定為預設Web Form Designer，如 Microsoft Visual Studio 的 Edge 開發人員工具中所述。
3. 在 ASP.NET 專案中，在 [設計 ] 視窗中開啟專案的網頁。
4. 在 [設計 ] 視窗左上角，按一下 [ 開啟 Edge DevTools ] ) 按鈕：

Edge DevTools for Visual Studio 隨即開啟，且已選取 [元素] 工具：

網路 工具也 預設可供使用：

[ 檢查] 工具 ([檢查] ) 和 [ 切換螢幕錄影 ] ) 可用，而 [ 其他工具 ] () 功能表提供 [問題]、[ 網路狀況] 和 [網路要求封鎖] 工具。

另請參閱:

• 適用於 Visual Studio (預覽版) 的 Edge 開發人員工具，位於 Visual Studio DevBlogs。
• Visual Studio 的 Edge DevTools 擴充功能。

3D 檢視中的圖層

自 Microsoft Edge 88 起， 3D 檢視 工具已提供 圖層 工具的改良版本。 現在，在 Microsoft Edge 99 中，圖 層 工具中的功能已被刪除，圖 層 工具包含一個鏈接，可將您重新導向至 3D 視圖 工具中的複合圖層視圖。 您可以在「3D 視圖」工具中找到先前在「圖層」工具中的所有功能，以及更多功能。

更新： 圖層 工具現已被移除。

另請參閱:

• 使用 3D 檢視工具瀏覽網頁層、z 索引和 DOM

使用來源對應在效能設定檔中顯示原始函數名稱

更新：在 Microsoft Edge 111 中，此功能已被移除，因為效能工具現在會在分析生產程式碼時自動提供原始檔案和函式名稱，只要來源對應裝載在 Azure 成品符號伺服器上即可。 請參閱 Microsoft Edge 111 的新功能 中的 [ 效能工具在分析生產環境程式碼時取消縮小檔案和函式名稱 (Microsoft Edge 111) 。

已過時的新增功能項目

在 [效能] 工具中記錄效能設定檔會產生縮小的火焰圖。 在舊版的 Microsoft Edge 中，火焰圖不會使用來源對應來顯示原始函數名稱，即使您在伺服器上託管來源對應也一樣。

從 Microsoft Edge 版本 99 開始，您可以在效能設定檔中顯示原始函數名稱，如下所示：

1. 在 [ 效能 ] 工具中錄製設定檔。
2. 按一下新的 [取消縮小 ] () 按鈕，以建立並下載未縮小的效能設定檔。
3. 載入 (匯入) (載 可將未縮小的效能設定檔) 至 [ 效能 ] 工具中。

[ 取消縮小 ] 按鈕將使用來源地圖（前提是它們與您的生產程式碼並排託管），以取消縮小 [ 效能 ] 工具火焰圖中的函數名稱。

效能 工具中的 火焰圖最初將函數名稱顯示為 b、 O、 Xt 和 bn，取自 Web 伺服器傳回的縮小生產代碼：

按一下 [取消縮小 ] ([ ) ，然後按一下 [ 載入設定檔 ] ) ，[ 效能 ] 工具中的火焰圖現在會顯示以有意義的名稱標示的函數： invokeFunc (b) 、 executeAction (O) 、 endBatch (Xt) 和 runReactions (bn) ，擷取自來源地圖：

另請參閱:

• 取消縮小 Microsoft Edge 部落格中開發工具效能設定檔中的函數名稱。
• 在效能設定檔中顯示原始函數名稱。

改良網路主控台與 3D 檢視的協助工具

在舊版的 Microsoft Edge 中，輔助技術在網路主控台工具中提供自訂持有人權杖時，公告了不正確的資訊。 在 Microsoft Edge 版本 99 中，這個問題已經修正。 選取文字方塊以提供自訂持有人權杖時，輔助技術現在會讀出「權杖編輯文字要求檢視群組」。

在舊版的 Microsoft Edge 中，輔助技術只會唸出 3D 檢視工具中的選項按鈕文字，而不會唸出按鈕所屬的群組名稱。 在 Microsoft Edge 版本 99 中，此問題已修正。 例如，當焦點位於 [使用螢幕紋理 ] 選項按鈕上時，輔助技術現在會宣告：「色彩類型選項群組、使用螢幕紋理、選項按鈕、已選取」。

另請參閱:

• 使用輔助技術瀏覽 DevTools

改良 [來源] 面板中的來源資料夾樹狀結構

在 [來源] 工具的 [頁面] 索引標籤中，來源資料夾的樹狀結構現已得到改善，減少資料夾命名和外框的雜亂。 不需要的路徑首碼，例如 ../ 和 ./ 已經移除。 透過合併對等的重複資料夾，簡化了樹狀結構。

如需 Chromium 開放原始碼專案中此功能的歷程記錄，請參閱問題 1284737。

另請參閱:

• 使用 [頁面] 索引標籤，在[來源] 工具概觀中探索建構目前網頁的資源。

來自 Chromium 專案的公告

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

• 節流 WebSocket 要求
• [應用程式] 面板中的新增 [報告 API] 窗格
• 更好的主機樣式、格式設定和篩選
  • 使用 ANSI 逸出碼正確設定記錄訊息的樣式
  • 正確支援 %s、%d、%i 和 %f 格式規範
• Sourcemaps 改進功能
  • 使用原始檔對應檔案偵錯延伸模組
  • 在 [來源] 面板中顯示背景工作者來源檔案
• 觸控式易記色彩選擇器和分割窗格

本作品已根據 知識共享署名 4.0 國際許可證獲得許可。

另請參閱

• Microsoft Edge DevTools 的新增功能
• Microsoft Edge Web 平台的版本資訊