這些是 Microsoft Edge DevTools 穩定版的最新功能。
在專注模式下將工具群組在一起
專注模式是一種實驗性介面，允許你根據自己的除錯情境將不同工具分組在一起。 左側顯示的新 活動列 包含預設的工具群組，如 版面配置 與 除錯。 要自訂每個工具群組，請使用 關閉 (X) 圖示關閉工具，或使用 「更多工具 」 (+) 圖示新增工具。
要開啟實驗，請參見 「開啟或關閉實驗 」，並在 焦點模式和開發者工具提示 和 啟用+按鈕選單旁勾選可開啟更多工具。 欲了解更多此功能資訊或提出問題與想法，請參閱 DevTools：專注模式介面。
透過資訊性工具提示了解 DevTools
DevTools 工具提示功能能幫助你了解各種不同的工具和窗格。 將滑鼠移至開發工具中每個指定區域，了解如何使用該工具。 要開啟工具提示，請執行以下其中一項：
- 選擇 自訂並控制 DevTools (
...) >幫助>切換 DevTools 工具提示。 - 在 Windows、Linux) 按 Ctrl+Shift+H (，或在 macOS) 按 Command+Shift+H (。
- 打開指令選單 ，然後輸入 提示。
然後將滑鼠移到每個 DevTools 的區域上：
要關閉工具提示，請按 Esc。
更新：此功能已發布，不再是實驗性功能。
注意：截至 2022 年 5 月， 活動欄不再支援提示。
在設定中自訂鍵盤快捷鍵
你現在可以在 DevTools 裡自訂任何動作的快捷鍵。
要編輯鍵盤快捷鍵：
打開 DevTools，然後選擇 設定>捷徑。
選擇你想自訂的動作。
點擊 編輯 (
) 圖示。按下你想綁定到動作鍵的鍵。
點擊勾選 (
) 圖示。
欲了解更多關於自訂與編輯捷徑的資訊，請參閱 DevTools 中的自訂鍵盤捷徑。 欲了解Chromium開源專案中此功能的即時更新，請參見第 174309 期。
Microsoft Edge DevTools for Visual Studio Code 擴充功能更新 1.1.4
Microsoft Edge 開發者工具 for Visual Studio Code 擴充功能 1.1.4 版本（針對 Microsoft Visual Studio Code）現在會在每個 DevTools 實例旁邊顯示一個專頁。 來自 Microsoft Edge 的主控台訊息現在會顯示在 DevTools 主控台的 Microsoft Visual Studio Code 輸出中。 Microsoft Visual Studio Code 會自動更新擴充功能。 若要手動更新到 1.1.4 版本，請參見「 手動更新擴充功能」。 你可以在 vscode-edge-devtools 的 GitHub 倉庫上提交問題並貢獻擴充功能。
下圖顯示了 Microsoft Edge 控制台工具中 範例網頁的訊息：
下圖顯示了在 DevTools 主控台「Microsoft Visual Studio Code 輸出」下登錄的範例網頁中相同的訊息：
另請參閱:
改良版 CSS flexbox 編輯，搭配視覺化 flexbox 編輯器及多重疊加層
DevTools 現在有專用的 CSS Flexbox 除錯工具。 如果 display: flex or display: inline-flex CSS 風格套用到 HTML 元素，元素工具中該元素旁邊會出現一個彈性圖示。 要在網頁上顯示 (或隱藏) 彈性覆蓋層，請點擊 彈性 圖示。
要開啟 Flexbox 編輯器，在元素工具中，前往樣式標籤，然後點擊 or display: inline-flex 樣式旁邊display: flex的新圖示。
Flexbox 編輯器提供快速編輯 flexbox 屬性的方法：
此外，版面窗格中的 Flexbox 區塊會顯示網頁上所有 flexbox 元素。 你可以切換每個元素的覆蓋層：
關於Chromium開源專案中此功能的歷史，請參見議題1166710與1175699。
另請參閱:
網路請求的鍵盤導覽改進
過去，你無法像 Elements 工具中的 DOM 那樣，透過鍵盤上的方向鍵在 Initiator 面板中展開或摺疊請求鏈。 當 網路工具中 選擇網路請求時， 發起者 面板會顯示發起該請求的請求鏈。
在 Microsoft Edge 90 版本中，你可以使用鍵盤上的方向鍵在 發起者 面板中展開或收縮請求鏈。 鏈中聚焦的網路請求也被標示出來。
點選一個網路請求，然後點選 發起者 面板：
展開或摺疊請求發起者鏈，並依照標示的列操作：
欲了解更多關於 網路 工具中的啟動者，請參閱 顯示啟動者與相依關係。
關於Chromium開源專案中此功能的歷史，請參見議題1158276與1160637。
主控台的過濾比較穩定
當你用 控制台側邊欄篩選時，日誌 等級 下拉選單中的篩選選項無法使用。 過去，當你滑鼠移到 日誌等級 列表上時，即使選擇了控制台 側邊欄 的篩選器，日誌等級下拉選單也會被高亮顯示。 在 Microsoft Edge 90 版本中，當您滑鼠移到 日誌等級 列表上，選擇 控制台側邊欄 的篩選器時，日誌等級下拉選單不再被高亮顯示。
想了解更多關於主控台過濾的資訊，請參閱「主控台功能中的訊息過濾」參考資料。
之前，如果你打開 主機側邊欄 並將滑鼠移到 預設關卡，會被高亮顯示：
從 Microsoft Edge 90 開始，如果你點選 控制台側邊欄 並將滑鼠移到 預設等級，它不會標示：
Chromium 計畫的公告
以下章節將宣布 Microsoft Edge 中為開源 Chromium 專案所貢獻的額外功能。
控制台現在擺脫了雙引號字元
之前， Console 不會輸出有效的雙引號 (" JavaScript 字串中的) 字元。 從 Microsoft Edge 90 版本開始， 主控台 會使用) 字元 (" 逃逸雙引號輸出 JavaScript 字串：
關於Chromium開源專案中此功能的歷史，請參見第1178530期。
另請參閱:
模擬 CSS 色域媒體功能
色 域 媒體查詢模擬瀏覽器和裝置所支援的近似色彩範圍。 在 Emulate CSS 媒體特性 下的下拉選單中，色域包含 DevTools 可模擬的色彩空間。 例如，要觸發 color-gamut: p3 媒體查詢，請從下拉選單中選擇 色域：p3 。
要模擬 CSS 色域媒體功能：
- 要開啟 DevTools，請右鍵點擊網頁，然後選擇 檢查。 或者，在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 DevTools 開啟。
- 在 DevTools 的主工具列中，選擇 渲染標籤。 如果該分頁看不到，請點擊 「更多分頁 」 (
) 按鈕，或點擊 「更多工具 」 
按鈕。 渲染 工具開啟 。 - 在 Emulate CSS 媒體功能色域 下拉選單中，選擇色 域 選項：
欲了解更多此功能 color-gamut ，請參閱 色彩顯示品質：「色域」功能。
關於Chromium開源專案中此功能的歷史，請參見第1073887期。
另請參閱:
Progressive Web Apps 改良工具
主控台中 PWA 可安裝性警告
控制台現在顯示了更詳細的可安裝性警告訊息，針對 Progressive Web Apps (PWA) ，並附有「改善 Progressive 網頁應用程式離線支援偵測」的連結。
另請參閱:
在清單面板中顯示 PWA 描述長度警告
在 應用程式 工具中，如果清單描述超過 324 字元， 清單面板會 顯示警告訊息：
關於Chromium開源專案中此功能的歷史，請參見議題965802、1146450與1169689。
另請參閱:
網路工具中的新遠端位址空間欄位
在 網路 工具中，新的 遠端位址空間 欄位顯示每個網路資源的網路 IP 位址空間。 要顯示新的 遠端位址空間 欄位：
在 DevTools 裡，打開 網路 工具。
在請求表 (網路工具) 主下方，右鍵點擊標頭列，然後選擇 遠端位址空間：
請求表現在 顯示遠端位址空間 欄位：
欲查看Chromium開源專案中此功能的歷史，請參閱第 1128885 期。
另請參閱:
- 新增或移除欄位，請參考網路特徵。
框架詳細檢視中允許與禁止的顯示功能
在 應用程式 工具中，左下角的 框架 節點會開啟框架細節檢視。 框架詳細檢視現在包含 權限政策 區塊，顯示允許與禁止的瀏覽器功能清單：
此清單由權限政策網頁平台 API 控制，該 API 允許網頁在單一框架或該框架所嵌入的 iframe 中使用或阻止其使用指定的瀏覽器功能。
關於Chromium開源專案中此功能的歷史，請參見第1158827期。
另請參閱:
Cookies 面板新增 SameParty 欄位
應用程式工具中的 Cookies 面板現在顯示SameParty每個 Cookie 的屬性：
屬性 SameParty 是一個新的布林屬性，用來指示 cookie 是否包含在對同一 第一方 Sets 的來源請求中。
關於Chromium開源專案中此功能的歷史，請參見第 1161427 期。
另請參閱:
主控台工具中的 fn.displayName 屬性現已不再棄用
過去，這個 fn.displayName 特性允許你控制函式的除錯名稱，這些名稱要顯示在 error.stack DevTools 堆疊追蹤中。 從 Microsoft Edge 90 版本開始，該 fn.displayName 屬性已被棄用，取而代之的是 fn.name 以下屬性：
使用標準 Object.defineProperty 方法來定義該 fn.name 性質。 欲了解更多， fn.name請參閱 Function.name。
關於Chromium開源專案中此功能的歷史，請參見第1177685期。
另請參閱:
Elements 工具中的完整無障礙樹檢視
此實驗在 Elements 工具中提供了完整的無障礙樹狀圖。 Accessibility 分頁 (與 Styles 分頁) 提供部分無障礙樹檢視，顯示從根節點到檢查節點的直接祖先鏈。 當你開啟這個實驗並重新載入 DevTools 後，點擊 Elements 面板頂端的按鈕區域，即可切換網頁上所有元素的顯示方式。
要顯示 DOM 樹狀圖，請點擊頂部的 「切換至 DOM 樹狀圖」 按鈕區域：
要顯示完整的無障礙樹，請點擊頂部的 「切換至無障礙樹檢視 」按鈕區域：
要開啟實驗，請參考「 開啟或關閉實驗 」，並在 Elements 面板中勾選「 啟用完整無障礙樹檢視」旁的勾選框。
關於Chromium開源專案中此功能的歷史，請參見第887173期。
另請參閱:
注意事項
本頁部分內容基於 Google 創作與 分享 的作品，並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可 在此找到，作者為Jecelyn Yeen。
本作品採用 創用CC 姓名標示4.0國際授權條款授權。