這些是 Microsoft Edge DevTools 穩定版的最新功能。
現在有新消息，歡迎
Microsoft Edge DevTools 中的 「What's New」 工具現在有了全新外觀和新名稱： Welcome。 歡迎工具仍顯示最新的 DevTools 新聞與更新。 現在還包含了 Microsoft Edge DevTools 文件連結、提交回饋的方式等。 要在每次更新 Microsoft Edge 後顯示 歡迎 工具，請在 每次更新標題下方的「開啟」分頁 旁勾選方塊。
要關閉 歡迎 工具，請點擊分頁標題右側的 X 。
更新：此功能已發布，不再是實驗性功能。
另請參閱:
樣式窗格中的視覺字型編輯器
當你在 CSS 裡處理字型時，請使用新的視覺字型編輯器。 你可以定義備用字型，並使用滑桿來定義字體粗細、大小、行高和間距：
字型編輯器能幫助你：
- 在不同字型屬性間切換單位。
- 在不同字型屬性的關鍵字間切換。
- 轉換單位。
- 產生準確的 CSS 程式碼。
要開啟此實驗，請參閱 設定>實驗 ，並在 樣式窗格中勾選「啟用新字型編輯器工具」旁的勾選框。
關於Chromium開源專案中此功能的歷史，請參見第1093229期。
另請參閱:
- 在 Microsoft Edge DevTools 的實驗功能中，於樣式標籤中啟用新的字型編輯器。
- 在 DevTools 的樣式窗格中編輯 CSS 字型樣式和設定。
CSS Flexbox 除錯工具
DevTools 現在支援 Flexbox 佈局以及格狀佈局。
更新：此功能已發布，不再是實驗性功能。
另請參閱:
- 使用 Inspect 工具從分析頁面的 Inspect 覆蓋層取得元素資訊。
- 使用檢查工具，將滑鼠移到網頁上方即可偵測無障礙問題。
- 在 CSS 鏡像編輯) (樣式標籤中更新.css檔案 。
格子：
- CSS 網格
- 改進版 CSS 網格工具 ，收錄於 DevTools (Microsoft Edge 87) 。
MDN：
關於歷史，在Chromium開源專案中，請參見議題1136394與1139949。
新的 Flexbox 與 Flex) 圖示 (有助於識別與顯示 Flex 容器
在 Elements 工具中，新的 Flexbox (flex) 圖示幫助你辨識程式碼中的 Flexbox 容器。 點擊 Flexbox (flex) 圖示，可以開啟或關閉勾勒出 Flexbox 容器的覆蓋效果。 你可以在版 面 面板中自訂覆蓋層的顏色，該窗格位於 樣式 和 計算區旁邊。
要開啟或關閉勾勒 Flexbox 容器的覆蓋效果，請點擊 Flexbox (flex) 圖示。
你可以在 Layout 面板裡的 Styles 和 Computed 旁邊自訂覆蓋層的顏色。
Flexbox (flex) 圖示與網頁被標示：
在版面面板中標示的 Flexbox 覆蓋層：
更新：此功能已發布，不再是實驗性功能。
另請參閱:
- 使用 Inspect 工具從分析頁面的 Inspect 覆蓋層取得元素資訊。
- 檢查 CSS 格子的佈局。
當 Flexbox 版面變更時，使用 CSS 屬性顯示對齊圖示與視覺指引
當你編輯 Flexbox 版面的 CSS 時， 樣式 窗格中的 CSS 自動補全會在相關 Flexbox 屬性旁顯示有用的圖示。 要嘗試這個新功能，請打開 Elements 工具並選擇一個彈性容器。 然後在 Styles 窗格中新增或更改該容器的屬性。
自動補全選單現在會顯示顯示對齊屬性（如 align-content 和 align-items）效果的圖示。
此外，DevTools 現在會顯示一條指引線，幫助你更清楚地看到 CSS 屬性。align-items
gap CSS 屬性也被支援。 在下圖中， gap CSS 屬性設定為 ， gap: 12px; 並顯示每個空隙的陰影圖案。
自動補全選單標示出以以下 align-開頭的 CSS 屬性：
Flexbox gap 在 CSS 屬性與網頁中被標示：
更新：此功能已發布，不再是實驗性功能。
另請參閱:
- 使用 Inspect 工具從分析頁面的 Inspect 覆蓋層取得元素資訊。
- 檢查 CSS 格子的佈局。
使用新增的「更多工具」按鈕快速新增工具
你現在有一種新方式可以在 Microsoft Edge DevTools 中開啟更多工具。
「更多工具」圖示是主面板右側) (+ 加號。 若要顯示其他可新增至主面板的工具清單，請點擊 「更多工具 」 (+) 圖示：
更新：此功能已發布，不再是實驗性功能。
另請參閱:
輔助科技現在會公布 CSS 建議的位置與數量
當你編輯 CSS 規則時，會看到一個下拉選單的功能清單。 此功能未提供給輔助科技使用者，因為該功能是在 Microsoft Edge 第 89 版中宣布的。 輔助科技使用者現在可以在 樣式 窗格中瀏覽 CSS 建議。 在 Microsoft Edge 88 版本及更早版本中，使用者在樣式窗格編輯 CSS 時，會透過建議清單瀏覽輔助Suggestion技術。
在 Microsoft Edge 89 版本中，輔助科技使用者現在可以聽到目前建議的位置和數量。 每個建議都會在使用者瀏覽建議清單時公告，例如建議3/5。 想了解更多關於在 DevTools 中撰寫 CSS，請參閱 CSS 功能參考。 欲查看Chromium開源專案中此功能的歷史，請參見第 1157329 期。
若想觀看開啟此實驗並朗讀多項建議的影片，請參考 YouTube 上的 Voiceover 宣布開發者工具選項 。
另請參閱:
Emulate Surface Duo 與三星 Galaxy Fold
在以下裝置上測試您的網站或應用程式在 Microsoft Edge 的外觀。
- Surface Duo
- 三星 Galaxy Fold
要存取新的 CSS 媒體螢幕跨頁功能以及 getWindowSegments (現) visualViewport.segments JavaScript API，請前往 edge://flags 並切換實驗 性網頁平台功能旁的旗標：
為了提升你的網站或應用程式，適用於雙螢幕和摺疊裝置，模擬裝置時請使用以下功能：
關於Chromium開源專案中此功能的歷史，請參見第1054281期。
另請參閱:
Microsoft Edge 開發者工具 for Visual Studio Code 版本 1.1.2
Microsoft Edge 開發者工具的擴充套件 1.1.2 版本 Visual Studio Code Microsoft Visual Studio Code 自上一版本以來有以下變更。 Microsoft Visual Studio Code 會自動更新擴充功能。 若要手動更新至 1.1.2 版本，請參見「 手動更新擴充功能」。
- 在目標清單上的每個項目 (#248 新增了一個關閉實例按鈕)
- Edge DevTools 版本Microsoft 從 84.0.522.63 提升到 85.0.564.40 (#235)
- 將「Debugger for Microsoft Edge 作為相依性 (#233) 。
- 實作設定選項以更改 #229 ()
你可以在 vscode-edge-devtools 的 GitHub 倉庫上提交問題並貢獻擴充功能。
另請參閱:
Chromium 計畫的公告
以下章節將宣布 Microsoft Edge 中為開源 Chromium 專案所貢獻的額外功能。
視窗外的擷取節點截圖
在 Microsoft Edge 89 版本中，節點截圖更為精確，即使節點內容在視窗中看不到，也能捕捉整個節點。 在 元素 工具中，右鍵點擊元素，然後選擇 擷取節點截圖。
關於Chromium開源專案中此功能的歷史，請參見第1003629期。
另請參閱:
- 使用 DevTools (Microsoft Edge 86 的新內容選單中，使用 Elements 工具的右鍵選單擷取節點截圖)
元素工具更新
支援強制 ：target CSS 狀態
在 Elements 工具中，你現在可以強制執行 ：target CSS 偽類別。
:target偽類別是在目標元素 (唯一元素) 與 id URL 片段相符時觸發。 例如，http://www.example.com/index.html#section1URL 會觸發帶有 id="section1"的 HTML 元素上的偽類別。:target 想嘗試以第一部分為重點的示範，請參考 CSS ：target demo。
網頁被標示，沒有強制 CSS：
:target CSS 強制與網頁重點顯示：
關於Chromium開源專案中此功能的歷史，請參見第1156628期。
另請參閱:
- 使用狀態模擬來模擬動畫選單項目的懸停狀態 ，在 「驗證所有元素狀態的可及性」。
使用複製元素來複製元素
使用新的 「複製元素 」捷徑來複製元素。 在 元素 工具中，右鍵點擊元素，然後選擇 「重複元素」。 在所選元素下方會建立一個新元素。 若要使用鍵盤複製該元素，請按 Windows、Linux) (Shift+Alt+Down 箭頭 ，或在 macOS) 按 Shift+Option+Down 箭頭 (。
關於Chromium開源專案中此功能的歷史，請參見第1150797期。
另請參閱:
自訂 CSS 屬性的顏色選擇器
樣式窗格現在 會 顯示自訂 CSS 屬性的色彩選擇器。 要切換顏色值的 RGBA、HSLA 和 Hex 格式，按住 Shift 鍵，然後點擊色彩選擇器：
關於Chromium開源專案中此功能的歷史，請參見第1147016期。
另請參閱:
- 在 CSS Features 參考中使用 Color Picker 更改顏色
複製 CSS 類別與屬性
現在你可以在右鍵選單中新增幾個選項，更快複製 CSS 屬性。 在 元素 工具中，選擇一個元素。 要複製該值，請在 樣式 窗格中右鍵點擊 CSS 類別或 CSS 屬性，然後選擇複製選項。
在右鍵選單中複製 CSS 類別的選項：
| 選項 | 詳細資料 |
|---|---|
| 複製選擇器 | 複製目前的選擇器名稱。 |
| 複製規則 | 複製當前選擇器的規則。 |
| 複製所有聲明 | 複製所有依據現行規則的聲明，包括無效及前綴屬性。 |
在右鍵選單中複製 CSS 屬性的選項：
| 選項 | 詳細資料 |
|---|---|
| 副本聲明 | 複製當前行的聲明。 |
| 複製性質 | 複製當前行的屬性。 |
| 複製價值 | 複製當前行的數值。 |
關於Chromium開源專案中此功能的歷史，請參見第 1152391 期。
另請參閱:
Cookie 更新
新增顯示 URL 解碼 Cookie 的選項
你現在可以在 Cookies 面板顯示 URL 解碼的 Cookies 值。 要顯示已解碼的 Cookie，請選擇 「Application>Cookies」，點擊列表中任一 Cookie，然後勾選「 顯示已解碼網址」旁的勾選框：
關於Chromium開源專案中此功能的歷史，請參見第 997625 期。
另請參閱:
過濾並清除可見的 Cookie
在 Microsoft Edge 88 或更早版本中， 應用程式 工具僅提供透過 「清除所有 Cookies 」按鈕來清除所有 Cookie 的方法。 在 Microsoft Edge 89 版本中，你現在可以選擇 「清除過濾 Cookies 」，只刪除已過濾的 Cookie。
要篩選 Cookies，請選擇 Application>Cookies，然後輸入 「Filter 文字框」。 要刪除顯示的 Cookie，請點擊 「清除過濾 Cookies 」按鈕。 要顯示所有其他 Cookie，請清除篩選文字。
關於Chromium開源專案中此功能的歷史，請參見第 978059 期。
另請參閱:
儲存面板新增清除第三方 Cookie 的選項
DevTools 現在預設只清除第一方 Cookie。 若要僅清除網站資料和第一方 Cookie，請在 應用程式 工具左上角的 應用程式 區塊，點選 儲存，然後點擊 清除網站資料 按鈕。
要清除網站資料及所有 Cookie，請選擇 應用程式>儲存。 勾選 包含第三方 Cookie 的勾選框，然後點 選「清除網站資料」：
關於Chromium開源專案中此功能的歷史，請參見第 1012337 期。
另請參閱:
網路工具更新
另請參閱:
持續記錄網路日誌設定
在 Microsoft Edge 88 或更早版本中，DevTools 會在網頁重新整理時重置 記錄網路日誌 設定。 在 Microsoft Edge 89 版本中，DevTools 現在會持續保留 Record 網路日誌 設定：
關於Chromium開源專案中此功能的歷史，請參見第1122580期。
另請參閱:
- 請在網路特徵參考中記錄網路請求。
線上選項現在是 沒有限速選項
網路 模擬選項線上 版現已更名為 無限速。
關於Chromium開源專案中此功能的歷史，請參見第 1028078 期。
另請參閱:
控制台工具、來源工具和樣式面板新增了複製選項
在控制台與來源工具中複製物件
你現在可以在 控制台 和 來源 工具中複製物件值。 複製物件值的能力在處理大型物件時非常有用。
在 主控台 工具中，右鍵點擊物件，然後選擇 複製物件。
在 Sources 工具中，在斷點上，將滑鼠移到物件上，在 物件 彈出視窗中，右鍵點擊物件，然後選擇 複製物件。
關於Chromium開源專案中此功能的歷史，請參見議題1148353與1149859。
另請參閱:
在來源工具和樣式欄目中複製檔案名稱
你現在可以透過右鍵選單複製檔案名稱。
在 來源 工具中，右鍵點擊檔案名稱，然後選擇 複製檔案名稱。
在元素工具>的樣式窗格中，右鍵點擊檔案名稱，然後選擇複製檔案名稱。
關於Chromium開源專案中此功能的歷史，請參見議題1155120。
另請參閱:
車身匯報詳情
在 應用程式 工具中， 框架 頁面有以下更新。
服務人員資訊在框架細節中
應用程式工具現在會在父框架下列出專屬的服務工作者。 下圖顯示服務人員資料。 要顯示服務工作者詳細資料，請選擇 「Application>Frames>top>Service Workers 」，然後點擊服務工作者。
關於Chromium開源專案中此功能的歷史，請參見第1122507期。
另請參閱:
以框架細節衡量記憶體資訊
在應用程式工具的框架頁面中，performance.measureMemory()API 狀態現在顯示在 API 可用性區塊。 新的 performance.measureMemory() API 會估算整個網頁的記憶體使用量。
關於Chromium開源專案中此功能的歷史，請參見第 1139899 期。
另請參閱:
Performance 工具中的掉幀
當你在效能工具中分析載入效能時，幀 數 區塊現在會將掉幀標記為紅色。 要顯示幀率，請將滑鼠移到掉幀：
關於Chromium開源專案中此功能的歷史，請參見第1075865期。
另請參閱:
- 效能功能參考中的紀錄負載效能
新的色彩對比計算 - APCA (先進感知對比演算法)
APCA (Advanced Perceptual Contrast Algorithm) 取代了 AAA/AAA 指引的對比度比，該比值在 Color Picker 中被取代。 色彩選擇器則用於元素工具的樣式標籤。
APCA是一種計算對比度的新方法。 它是基於現代對色彩感知的研究。 與AA/AAA的指引相比，APCA更依賴情境。 對比度是根據文字、顏色和上下文的空間特性計算的。
- 文字的空間屬性，包括字體粗細與大小。
- 色彩的空間特性，包括文字與背景間感知到的對比。
- 情境的空間屬性，包括環境光線、環境及預期目的。
要開啟此實驗，請選擇 「設定>實驗」 ，然後勾選「 啟用新的先進感知對比演算法 (APCA」) 取代先前的對比度與AA/AAA指引的勾選框。 欲查看 Chromium 開源專案中此功能的歷史，請參見第 1121900 期。
另請參閱:
- 啟用新的先進感知對比演算法 (APCA) 取代先前 在 Edge DevTools 實驗功能中的對比度及 AA/AAA 指引Microsoft Edge 89) _。
- 使用 CSS 功能參考中的色彩選擇器更改顏色。
- 使用色彩選擇器測試文字與顏色對比度
注意事項
本頁部分內容基於 Google 創作與 分享 的作品，並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可 在此找到，作者為Jecelyn Yeen。
本作品採用 創用CC 姓名標示4.0國際授權條款授權。