這些是 Microsoft Edge DevTools 穩定版的最新功能。
影片:Microsoft Edge |DevTools 99 的新內容
用 Azure Artifacts Symbol Server 的原始碼地圖安全地除錯你的生產程式碼
Azure Artifacts Symbol Server 現在支援儲存建置過程在編譯、縮小及打包程式碼時產生的原始碼映射。 你現在不必將原始碼地圖託管在公共伺服器上,而是可以將原始碼地圖發佈到安全的 Azure Artifacts Symbol Server。 接著,將 DevTools 連接到 Symbol Server,讓 DevTools 自動取得你的原始碼映射。
透過使用原始碼映射,你可以在 DevTools 中查看並除錯原始原始碼,而不必處理伺服器回傳的已編譯、縮減和捆綁的生產程式碼。 將原始碼地圖託管在 Azure Artifacts Symbol Server 上,讓你能安全且私密地查看並處理原始碼,而不必將原始碼放在伺服器上,並公開原始程式碼。
要嘗試這個功能:
- 將你的原始碼映射發佈到 Azure Artifacts 符號伺服器。
- 打開 DevTools >設定>符號伺服器,並透過輸入你的 Azure DevOps 組織和個人存取權杖,將 DevTools 連接到 Azure Artifacts Symbol Server。
另請參閱:
- 將處理好的程式碼映射到原始原始碼,以便除錯
- 透過將原始碼映射發佈到 Azure Artifacts 符號伺服器,安全除錯原始程式碼
- 透過使用 Azure Artifacts 符號伺服器原始碼映射安全除錯原始程式碼
Microsoft Edge DevTools for Visual Studio 擴充
延續 Visual Studio Code 整合的成功,你現在也可以將 Microsoft Edge 開發工具嵌入 Visual Studio Microsoft即時除錯你的 ASP.NET 專案。 下載 Microsoft Edge 開發者工具 for Visual Studio 並試用看看。
要嘗試這個功能:
- 請確定 Visual Studio 2022 和 ASP.NET 工作負載都已安裝。
- 依照 Visual Studio 的 Edge 開發者工具Microsoft說明,將 Web Live Preview 設為預設Web Form Designer。
- 在 ASP.NET 專案中,請在 設計 視窗中開啟專案的網頁。
- 在 設計 視窗左上角,點擊 Open Edge DevTools (
) 按鈕:
Visual Studio 的 Edge DevTools 開啟,選取了 元素 工具:
網路 工具也 預設可用:
檢查 工具 (
) 與 切換螢幕投標 (
) 可用,而 「更多工具 」
) 選單中提供 問題、 網路狀況及 網路請求阻擋 工具。
另請參閱:
- Visual Studio 的 Edge 開發者工具 (預覽) ,來自 Visual Studio DevBlogs。
- Visual Studio 的 Edge DevTools 擴充功能。
3D 視圖中的圖層
自 Microsoft Edge 88 起, 3D 檢視 工具提供了圖 層 工具的改良版。 現在,在 Microsoft Edge 99 中,圖 層 工具的功能已被移除,圖 層 工具改為包含一個連結,將你導向 3D 檢視 工具中的合成圖層檢視。 你可以在 3D 檢視工具中找到之前在圖層工具中的所有特徵,以及更多功能。
更新:圖 層 工具現已移除。
另請參閱:
使用你的原始函式映射,在效能設定檔中顯示原始函式名稱
更新:在 Microsoft Edge 111 中,此功能已被移除,因為效能工具現在在製作生產程式碼時自動提供原始檔案與函式名稱,只要原始碼圖架設於 Azure Artifacts Symbol Server 上。 請參考 Performance 工具在 DevTools (Microsoft Edge 111) 中「在 DevTools 設定檔時解除檔案和函式名稱的縮小」。
已棄用的「最新消息」條目
在性能工具中記錄性能曲線會產生縮小的火焰圖表。 在先前版本的 Microsoft Edge 中,火焰圖不會使用原始函式映射來顯示原始函式名稱,即使你將原始碼映射放在伺服器上。
從 Microsoft Edge 99 版本開始,你可以在效能設定檔中顯示原始函式名稱,如下:
- 在 效能 工具中錄製個人檔案。
- 點擊新的 Unminify (
) 按鈕來建立並下載未壓縮的效能設定檔。 - 載入 (匯入) (載
) 未壓縮的效能設定檔到 效能 工具中。
Unminify 按鈕會使用原始碼映射,前提是它們與你的生產程式碼並列託管,來在效能工具的火焰圖表中還原功能名稱。
效能工具中的火焰圖最初顯示函式名稱為 b、O、Xt 和 bn,取自網頁伺服器回傳的最小化生產程式碼:
點擊 取消壓縮 (
) ,然後 Load profile (
) ,Performance 工具中的火焰圖表現在會顯示這些以有意義的名稱標示的函式: invokeFunc (b) 、 executeAction (O) 、 endBatch (Xt) ,以及 runReactions (bn) ,這些都是從你的原始地圖擷取的:
另請參閱:
- 在 Microsoft Edge 部落格的 DevTools 效能設定檔中解壓縮函式名稱。
- 在效能設定檔中顯示原始功能名稱。
網路主控台與 3D 檢視的可及性提升
在先前版本的 Microsoft Edge 中,輔助技術在網路控制台工具中提供自訂持有人令牌時會公告錯誤資訊。 在 Microsoft Edge 99 版本中,這個問題已經修正。 當選擇提供自訂持有人令牌的文字框時,輔助技術現在會顯示「令牌編輯文字請求檢視群組」。
在先前版本的 Microsoft Edge 中,輔助技術只會在 3D 檢視工具中宣布單選按鈕文字,並不會顯示按鈕所屬的群組名稱。 在 Microsoft Edge 99 版本中,這個問題已被修正。 例如,當焦點放在 使用螢幕材質 的單選按鈕上時,輔助科技現在會宣布:「顏色類型無線電群組,使用螢幕材質,選擇按鈕」
另請參閱:
優化的來源資料夾樹,位於來源面板
在來源工具的頁面標籤中,來源資料夾的樹狀結構有所改善,資料夾命名與輪廓的雜亂減少。 不必要的路徑前綴 ../ 如 和 ./ 已被移除。 樹狀結構透過合併等效的重複資料夾而簡化。
關於Chromium開源專案中此功能的歷史,請參見第1284737期。
另請參閱:
- 利用頁面標籤來探索在來源工具總覽中構建當前網頁的資源。
Chromium 計畫的公告
Microsoft Edge 99 版本也包含 Chromium 專案的以下更新:
注意事項
本頁部分內容基於 Google 創作與 分享 的作品,並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 Chromium專案的原始公告頁面是 Chrome99) DevTools (最新消息,作者為 Jecelyn Yeen。
本作品採用 創用CC 姓名標示4.0國際授權條款授權。