共用方式為


DevTools (Microsoft Edge 111 有什麼新)

這些是 Microsoft Edge DevTools 穩定版的最新功能。

影片:DevTools 111 的新內容

影片縮圖圖片「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 控制項中的分頁。 透過遠端除錯,你可以在遠端裝置上執行網頁內容,並直接從開發機器除錯。

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

啟用遠端除錯後,你就不需要再在 HoloLens 2 裝置上開啟 DevTools。 你可以透過裝置入口連接遠端HoloLens 2裝置,打開edge://inspect頁面,然後選擇你想用的目標 (分頁、PWA 或 WebView2 控制) 來搭配 DevTools。

想給我們 Microsoft Edge 遠端除錯流程的回饋,請在第 136 期留言:遠端除錯 HoloLens 2 裝置現已隨最新版本的 Microsoft Edge 遠端工具應用程式提供

另請參閱:

裝置模式工具列提供主題與視覺缺陷的模擬控制

在先前的 Microsoft Edge 版本中,為了模擬不同主題或視覺缺失,你會使用 渲染 工具來模擬,例如模擬無色視症(Achromatopsia),即使用者無法感知任何顏色。

在 Microsoft Edge 111 中,你現在可以直接從 裝置模式 工具列存取這些主題與視覺缺失的模擬控制,此外還能使用 渲染 工具。

例如,模擬高對比模式並測試你的網頁內容反應:

  1. 裝置模式 工具列中,降 下拉選單右側,點擊吸管圖示 (「 模擬媒體功能 」,吸 管圖示) 。
  2. 選擇 強制色彩:啟用

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

你也可以點擊滴管圖示旁的眼睛圖示來模擬視力缺失。 例如,要模擬模糊的視覺:

  1. 點擊眼睛圖示 (模擬 視力缺陷 ,眼睛 圖示) 。
  2. 選擇 模糊視線

直接從裝置模式工具列模擬模糊視線

另請參閱:

效能工具在製作程式碼設定檔時,會解除檔案名稱和函式名稱的縮小

Microsoft Edge 99 為 效能 工具新增了一項名為 Unminify 的功能。 這個 Unminify 功能會將 sourcemap 套用到 Performance 工具錄製的設定檔,然後將未壓縮的設定檔下載到你的電腦。 Unminify 功能詳見 DevTools (Microsoft Edge 99) 中「使用原始函式映射顯示原始功能名稱」一文。

在 Microsoft Edge 111 中,此功能已被移除,因為效能工具現在在設定生產程式碼時,只要載入原始碼映射,會自動提供原始檔案與函式名稱。 原始碼地圖可透過在 Azure Artifacts Symbol Server 上架設,可靠且安全地載入。

下圖中,當生產程式碼進行剖析時,火焰圖中會出現縮小的函式名稱:

火焰圖中的最小化函數名稱

現在在 Microsoft Edge 111 中, 效能 工具會在分析生產程式碼時自動解除火焰圖中的函式名稱:

火焰圖中的未最小化函數名稱

另請參閱:

在焦點模式下,樣式面板比較容易使用

在先前版本的 Microsoft Edge 中,焦點 模式中, Elements 工具無法提供輕鬆存取 樣式 窗格中所有分頁的方法。 在 Microsoft Edge 111 中,這個問題已經修正。 當 樣式 窗格的視口狹窄且無法顯示所有可用分頁時,請點擊 更多分頁 展開圖示 (更多分頁展開圖示) :

聚焦模式中樣式窗格中摺疊的分頁集

若要在 樣式 窗格中只顯示部分分頁,請點擊 「更多分頁 」摺疊圖示 (「 更多分頁」摺疊圖示) :

聚焦模式中樣式窗格中擴展的分頁集

另請參閱:

將 Selector Stats 表格從效能工具複製到 Excel

Microsoft Edge 109 在效能工具中引入了選擇器統計功能。 在效能工具中開啟「啟用進階渲染儀表 (慢) 設定,選擇火焰圖表中的任何重新計算風格事件,底部窗格會新增一個選擇器統計分頁。 請參閱 DevTools (Microsoft Edge 109) 中「除錯長期運行中的重新計算風格事件並新增選擇器統計」。

在 Microsoft Edge 111 中,你現在可以將每個重新計算樣式事件的選擇器統計表匯出到 Microsoft Excel 工作簿。 接著你可以使用 Excel 進行彙整選擇器效能分析,找出設定檔整個壽命週期中最昂貴的選擇器。

要匯出 選擇器統計 表:

  1. 用滑鼠點擊左上方的儲存格,然後拖曳選擇到右下角的儲存格。
  2. 右鍵點擊表格,然後選擇 複製。 或者,在 Windows、Linux) 按 Ctrl+C (在 macOS) (按 Command+C
  3. 把表格貼到 Excel 裡。

選取整個選擇器統計表進行複製貼上

另請參閱:

在專注模式下,輔助科技會在你將工具移到快速檢視時提醒你

在先前版本的 Microsoft Edge 中,輔助技術如螢幕閱讀器在將工具從 活動列 移至 快速檢視 工具列時,並不會顯示確認。 在 Microsoft Edge 111 中,這個問題已經修正。 螢幕閱讀器現在會在你將 網路 工具從 活動欄 移到 快速檢視 工具列時,提示「成功新增網路到快速檢視」:

將網路工具從活動列移到快速檢視工具列

另請參閱:

Chromium 計畫的公告

Microsoft Edge 111 也包含 Chromium 專案的以下更新:

另請參閱