DevTools 的新功能 (Microsoft Edge 106)

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

影片:DevTools 106 的新功能

影片「DevTools 106 的新功能」的縮圖影像

命令面板簡介

已在 Microsoft Edge 123 中移除命令面板實驗。

在 Microsoft Edge 106 中,您現在可以啟用並使用命令面板實驗。 命令面板讓您只需一個鍵盤快速鍵即可存取瀏覽器管理和開發人員工具命令: Ctrl+Shift+空格鍵。

若要啟用命令面板實驗:

  1. 移至edge://flags。 然後在 [搜尋標幟 ] 文字欄位中,開始輸入 [命令面板]。

  2. 在 [命令面板] 下拉式功能表中,選取 [已啟用]:

    版本 106 的旗標頁面中命令面板的鍵盤快速鍵

    請注意鍵盤快速鍵,它顯示在頁面的 edge://flags[命令面板] 區段中。

  3. 按一下 [ 重新啟動 ] 按鈕,當您選取 [已啟用] 時,該按鈕會出現在右下角。

若要在啟用實驗之後快速存取可用的瀏覽器管理命令和 DevTools 命令:

  1. 在 Microsoft Edge (開啟或不使用 DevTools 開啟) ,按 Ctrl+Shift+空格鍵。

  2. 開始輸入。 命令會根據您的輸入字元進行篩選,並分組為類別,例如 建議、 歷程記錄和 開發工具:

    Microsoft Edge 命令面板

  3. 若要將篩選範圍縮小為只列出開發工具命令,請輸入大於 (>) 字元:

    Microsoft Edge 命令面板 輸入 > 以選取開發工具命令

在問題 73 中張貼註解,讓我們知道您希望在未來版本的 Microsoft Edge 中看到哪些命令 :[意見反應]MicrosoftEdge/DevTools 存放庫中的命令面板實驗!

篩選並自動修正 DevTools for Visual Studio Code 中的程式碼問題

適用於 Visual Studio Code 的 Microsoft Edge 開發工具擴充功能現在提供快速修正選項,可讓您自動修正問題。

若要存取 快速修正 程式選項:

  1. 將游標停留在 DevTools 擴充功能報告的問題上,其以程式碼中的波浪底線表示。 問題旁邊會出現燈泡圖示。

  2. 按一下燈泡 (燈 泡圖示) 圖示。 隨即顯示 [ 快速修正] 功能表:

    快速修正程式選項

  3. 選取您想要用來解決問題或停止將它回報為問題的 快速修正 程式。 選取忽略問題會自動建立檔案 .hintrc ,告知擴充功能忽略此問題類型,並且不再回報。

另請參閱:

DevTools 現在在快取來源對應時會使用較少的磁碟空間

從 Microsoft Edge 版本 101 開始,開發工具開始在 IndexedDB 中快取來源對應,以減少擷取來源對應的網路要求量。 不過,如果從未移除這些來源對應,這項變更可能會佔用大量磁碟空間。

在 Microsoft Edge 版本 106 中,已修正此問題,方法是從 IndexedDB 儲存體移除 30 天內未存取的任何來源對應。 此外,提供的 localhost 來源對應也不再快取。 感謝您向我們提供此問題的意見反應!

若要瞭解開發工具如何取得並快取來源對應,請觀看 [來源對應監視器] 工具中的 [載入狀態] 資料行。 當您第一次載入網頁時, [來源地圖監視器 ] 工具會顯示尚未快取來源地圖:

來源地圖監視器工具,首次載入時

當您重新整理網頁時, [來源地圖監視器 ] 工具會顯示已使用快取的來源地圖:

來源地圖監視工具,第二次載入時

若要清除 IndexedDB 快取,並強制開發工具重新載入來源對應,請執行命令功能表中的清除來源對應快取命令。 請參閱 [ 命令] 功能表中的 [執行命令]。

有關歷史,請參見 第 89 期。

另請參閱:

Chromium 色彩佈景主題已棄用

為了改善可靠性,已過時 Chromium 淺色和 Chromium 深色佈景主題。 先前選取這些佈景主題的使用者將分別自動移轉至 [淺色 + ] 或 [深色 + 佈 景主題]:

Light+ 主題中的 DevTools:

Light+ 佈景主題中的 DevTools

Dark+ 主題中的 DevTools:

Dark+ 佈景主題中的開發工具

有許多 DevTools 色彩佈景主題可供選擇,例如 Monokai 和 Solarized。 若要在開發工具中變更色彩佈景主題,請按一下 [ 設定] ([設定] 圖示) 按鈕,然後在 [喜好設定 ] 頁面的 [佈景主題 ] 下拉式功能表中,選取佈景主題:

將開發工具佈景主題設定為 Monokai

焦點模式和高對比模式中的協助工具改良功能

焦點模式中的停駐位置和活動列位置按鈕現在能更適合與螢幕助讀程式搭配使用

在 Microsoft Edge 105 中,焦點模式獲得了多項改進,包括新的 停靠位置 和 活動欄位置 按鈕。 在 Microsoft Edge 版本 106 中,這些新按鈕現在能更適合與螢幕助讀程式等輔助技術搭配使用。

螢幕助讀程式現在會讀出目前選取的 [Dock 位置 ] 按鈕或 [ 活動列] 位置 按鈕,以及按鈕數目,代表可用的位置選項:

焦點模式中重新設計的 [連接] 功能表

另請參閱:

計算樣式在高對比模式下更容易看到

在高對比模式下,在舊版的 Microsoft Edge 中,在 [元素] 工具的 [計算] 索引標籤中,計算樣式的展開和摺疊按鈕無法正確呈現。 在 Microsoft Edge 版本 106 中,這個問題已經修正。 展開和摺疊按鈕現在可在高對比模式下顯示:

高對比模式中的計算樣式

另請參閱:

來自 Chromium 專案的公告

Microsoft Edge 106 也包含下列來自 Chromium 專案的更新:

另請參閱