DevTools 的新功能 (Microsoft Edge 102)

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

影片：Microsoft Edge |DevTools 102 的新功能

DevTools 擴充功能：支援裝置和模式模擬和原始碼對應的新瀏覽器

適用於 Visual Studio Code 的 Microsoft Edge 開發工具擴充功能現在具有瀏覽器預覽版，可讓您模擬不同的裝置。 按一下新的 [ 模擬 CSS 媒體功能 ] ([ ]) 按鈕，以不同模式預覽目前專案，例如深色、淺色、列印和高對比：

按一下新的 [模擬視力缺陷] () 按鈕，輕鬆測試協助工具，例如顯示視力模糊或色覺辨識障礙使用者網頁的外觀。

其他新功能包括切換 CSS 鏡像的更簡單方法，現在也支援來源地圖。 這意味著您可以在瀏覽器中調試和修改由 Sass、React 和其他抽象創建的 CSS，並查看源文件中的更改。

另請參閱:

• 裝置與狀態模擬
• 將處理後的程式碼對應至原始原始程式碼，以進行偵錯
• 使用 Sourcemaps 進行 CSS 鏡像編輯：已知問題與意見反應

將堆積快照集中的所有字串儲存至 JSON

在 Microsoft Edge 102 中，在 記憶體 工具中拍攝堆積快照時，您現在可以將快照中的所有字串物件匯出至 JSON 檔案。 在 [記憶體] 工具的 [建構函式] 區段中，按一下項目旁的新 (string) [全部儲存至檔案] 按鈕。

記憶體 工具會 匯出包含堆積快照中所有字串物件的 JSON 檔案：

另請參閱:

• 在 [使用記憶體工具 (「堆積快照集」分析類型) 中，將堆積快照集中的字串儲存並匯出至 JSON 。

[記憶] 工具中保留器的新篩選器

在舊版的 Microsoft Edge 中，週期和內部節點會顯示在堆積快照集的 [ 保留器 ] 區段中。 為了協助簡化保留路徑，在 Microsoft Edge 102 中，[記憶體] 工具中的 [保留] 區段現在有新的篩選，可隱藏週期，以及隱藏保留路徑中的內部節點。

在 「保留器 」區段中，循環節點會以灰色表示。

在下列影像中，在 「篩選邊緣 」下拉式功能表中，未選取 「隱藏循環」 ，因此會顯示 (灰色) 的循環節點：

在下列影像中，在 [篩選邊緣 ] 下拉式功能表中，已選取 [隱藏循環] ，因此不會顯示循環節點：

循環 是在保留路徑中至少出現兩次的節點。 節點的一個外觀在保留路徑中較早，而該節點的其他外觀在保留路徑中較晚。 若要釋放記憶體，請務必移除保留器路徑中第一個出現的節點。 節點的第二次和可能的後續出現仍顯示在 「保留器 」區段中。

內部節點 是 Microsoft Edge) 中的 JavaScript 引擎 (V8 特有的物件。 內部節點也會顯示在 「保留器 」區段中。

另請參閱:

• 在 [使用記憶體工具記錄堆積快照] 中隱藏循環 (「堆積快照」分析類型) 。

[檢查元素] 工具提示現在可以持續存在，直到您將其關閉為止

先前，在 「元素」 工具中，您選取之節點的重疊只有在您使用 [檢查] 工具 ([ ) 時，才會在暫留時顯示。 以前的設計很難與屏幕放大鏡或其他輔助技術一起使用。

在 Microsoft Edge 102 中使用 [檢查 ] 工具並在轉譯的網頁中移動時，您可以保持顯示目前的 [檢查 ] 重疊。 在轉譯的網頁中移動時，按住 Ctrl+Alt (Windows、Linux) 或 Ctrl+Option (macOS) 。 當您將游標停留在轉譯網頁的不同部分上時， 檢查工具的 現有工具提示和格線色彩重疊會保持顯示：

此外，您現在可以按 Ctrl 來隱藏 [檢查] 工具的重疊，同時將滑鼠游標移到呈現的網頁上。

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

另請參閱:

• 使用 [檢查] 工具在 [分析頁面] 中保留 [檢查] 工具的工具提示和格線色彩重疊。
• 使用輔助技術在瀏覽開發工具中保存檢查工具的工具提示和格線色彩重疊。

改善高對比模式下下拉式功能表、按鈕和圖示的呈現

在舊版的 Microsoft Edge 中，下列項目無法在高對比模式下正確呈現：

• 問題 工具中的 下拉式功能表。
• [ 分離元素 ] 工具中的按鈕。
• 焦點模式中的 活動列 。

在 Microsoft Edge 版本 102 中，這些問題已經修正。

[ 問題 ] 工具的功能表在高對比模式下會正確顯示：

[ 分離的元素] 工具的 UI 在高對比模式下會正確顯示：

使用 [焦點模式] 時 (的 [ 活動列 ] 和 [快速檢視 ] 面板) 在高對比模式下會正確顯示：

另請參閱:

• 使用輔助技術瀏覽 DevTools
• Windows 高對比模式

從設定了解 DevTools 中的實驗

在 [設定>實驗] 頁面中，每個實驗現在都有一個 [說明 ] ) 按鈕：

若要取得實驗性功能的詳細資訊，請按一下對應的 [ 說明 ] () 按鈕。 [ 說明 ] 按鈕會顯示 Microsoft Edge 開發工具中的實驗性功能 一文的相關區段。

窄時網路設定的更好配置

在舊版的 Microsoft Edge 中，當開發工具非常狹窄時，使用 [網路] 工具中的齒輪圖示開啟網路設定會重疊：

在 Microsoft Edge 版本 102 中，這個問題已經修正。 個別設定現在可在窄版面配置中更妥善地顯示：

另請參閱:

• 在 [網路功能參考] 中Capture頁面載入期間的螢幕擷取畫面，有關 [網路] 工具的可設定設定。

來自 Chromium 專案的公告

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

• 模擬淺色和深色佈景主題的新快速鍵
• 改良 [網路預覽] 索引標籤的安全性
• 改善中斷點重新載入
• 主機更新
  • 在主控台中處理指令碼執行錯誤
  • 使用 Enter 認可即時運算式
• 在 [樣式] 窗格中顯示繼承的醒目提示虛擬元素
• [實驗性]複製 CSS 變更
• [實驗性]在瀏覽器以外挑選色彩

另請參閱

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