這些是 Microsoft Edge DevTools 穩定版的最新功能。
影片:DevTools 111 的新內容
在 HoloLens 2 裝置上遠端除錯 Microsoft Edge、PWA 及 WebView2 控制項
Microsoft Edge 遠端工具應用程式現已在 HoloLens 2 裝置上使用。 Remote Tools for Microsoft Edge 應用程式是 Windows Device Portal for Desktop 的外掛,能遠端除錯 Microsoft Edge、Progressive Web Apps (PWA) 以及 WebView2 控制項中的分頁。 透過遠端除錯,你可以在遠端裝置上執行網頁內容,並直接從開發機器除錯。
啟用遠端除錯後,你就不需要再在 HoloLens 2 裝置上開啟 DevTools。 你可以透過裝置入口連接遠端HoloLens 2裝置,打開edge://inspect頁面,然後選擇你想用的目標 (分頁、PWA 或 WebView2 控制) 來搭配 DevTools。
想給我們 Microsoft Edge 遠端除錯流程的回饋,請在第 136 期留言:遠端除錯 HoloLens 2 裝置現已隨最新版本的 Microsoft Edge 遠端工具應用程式提供。
另請參閱:
裝置模式工具列提供主題與視覺缺陷的模擬控制
在先前的 Microsoft Edge 版本中,為了模擬不同主題或視覺缺失,你會使用 渲染 工具來模擬,例如模擬無色視症(Achromatopsia),即使用者無法感知任何顏色。
在 Microsoft Edge 111 中,你現在可以直接從 裝置模式 工具列存取這些主題與視覺缺失的模擬控制,此外還能使用 渲染 工具。
例如,模擬高對比模式並測試你的網頁內容反應:
- 在 裝置模式 工具列中,降 速 下拉選單右側,點擊吸管圖示 (「 模擬媒體功能 」,吸
) 。 - 選擇 強制色彩:啟用:
你也可以點擊滴管圖示旁的眼睛圖示來模擬視力缺失。 例如,要模擬模糊的視覺:
- 點擊眼睛圖示 (模擬 視力缺陷 ,眼睛
) 。 - 選擇 模糊視線:
另請參閱:
效能工具在製作程式碼設定檔時,會解除檔案名稱和函式名稱的縮小
Microsoft Edge 99 為 效能 工具新增了一項名為 Unminify 的功能。 這個 Unminify 功能會將 sourcemap 套用到 Performance 工具錄製的設定檔,然後將未壓縮的設定檔下載到你的電腦。 Unminify 功能詳見 DevTools (Microsoft Edge 99) 中「使用原始函式映射顯示原始功能名稱」一文。
在 Microsoft Edge 111 中,此功能已被移除,因為效能工具現在在設定生產程式碼時,只要載入原始碼映射,會自動提供原始檔案與函式名稱。 原始碼地圖可透過在 Azure Artifacts Symbol Server 上架設,可靠且安全地載入。
下圖中,當生產程式碼進行剖析時,火焰圖中會出現縮小的函式名稱:
現在在 Microsoft Edge 111 中, 效能 工具會在分析生產程式碼時自動解除火焰圖中的函式名稱:
另請參閱:
- 透過將原始碼映射發佈到 Azure Artifacts 符號伺服器,安全除錯原始程式碼
- 透過使用 Azure Artifacts 符號伺服器原始碼映射安全除錯原始程式碼
- Performance Features Reference中的紀錄表現。
在焦點模式下,樣式面板比較容易使用
在先前版本的 Microsoft Edge 中,焦點 模式中, Elements 工具無法提供輕鬆存取 樣式 窗格中所有分頁的方法。 在 Microsoft Edge 111 中,這個問題已經修正。 當 樣式 窗格的視口狹窄且無法顯示所有可用分頁時,請點擊 更多分頁 展開圖示 (
) :
若要在 樣式 窗格中只顯示部分分頁,請點擊 「更多分頁 」摺疊圖示 (「
) :
另請參閱:
將 Selector Stats 表格從效能工具複製到 Excel
Microsoft Edge 109 在效能工具中引入了選擇器統計功能。 在效能工具中開啟「啟用進階渲染儀表 (慢) 設定,選擇火焰圖表中的任何重新計算風格事件,底部窗格會新增一個選擇器統計分頁。 請參閱 DevTools (Microsoft Edge 109) 中「除錯長期運行中的重新計算風格事件並新增選擇器統計」。
在 Microsoft Edge 111 中,你現在可以將每個重新計算樣式事件的選擇器統計表匯出到 Microsoft Excel 工作簿。 接著你可以使用 Excel 進行彙整選擇器效能分析,找出設定檔整個壽命週期中最昂貴的選擇器。
要匯出 選擇器統計 表:
- 用滑鼠點擊左上方的儲存格,然後拖曳選擇到右下角的儲存格。
- 右鍵點擊表格,然後選擇 複製。 或者,在 Windows、Linux) 按 Ctrl+C (在 macOS) (按 Command+C 。
- 把表格貼到 Excel 裡。
另請參閱:
在專注模式下,輔助科技會在你將工具移到快速檢視時提醒你
在先前版本的 Microsoft Edge 中,輔助技術如螢幕閱讀器在將工具從 活動列 移至 快速檢視 工具列時,並不會顯示確認。 在 Microsoft Edge 111 中,這個問題已經修正。 螢幕閱讀器現在會在你將 網路 工具從 活動欄 移到 快速檢視 工具列時,提示「成功新增網路到快速檢視」:
另請參閱:
Chromium 計畫的公告
Microsoft Edge 111 也包含 Chromium 專案的以下更新: