What's 開發人員工具的新功能 (Chrome 118)

在「元素」>「樣式」中新增自訂屬性專區

「Elements」面板現在支援 @property CSS at-rule。您可以使用此方法明確定義 CSS 自訂屬性，並在樣式表中註冊這些屬性，而無須執行任何 JavaScript。

如要檢查已註冊的自訂屬性，請依序前往「元素」 >「樣式」，將滑鼠游標懸停在屬性名稱上，然後在工具提示中查看描述符。按一下工具提示中的連結，即可在可收合的 @property 部分中查看已註冊的屬性。

Chromium 問題：1471102、1471103、1471105。

更多本機覆寫值改善

繼先前版本的一系列改善措施後，本機覆寫值現在可執行以下操作：

• 在「來源」>「頁面」中，當您在來源對應檔案上按一下滑鼠右鍵，然後選取「Override content」，開發人員工具會顯示對話方塊，將您導向原始來源。無法覆寫來源對應檔案的內容。

  

• 「網路」面板會取得新的「含有覆寫值」欄和對應的 has-overrides:[content|headers|yes|no] 篩選器。如要查看「Has overrides」欄，請按一下表格標題，然後選取該欄。

  

• 在「來源」 >「覆寫」中，「刪除所有覆寫」選單選項已改為「刪除」選項，並且會執行精確的動作。

  

先前的「Delete all overrides」選項會造成混淆，因為它只會刪除目前工作階段中有效的覆寫值，並以 紫色圓點圖示標示。

新的「刪除」選項會先顯示警告訊息並提示確認，然後刪除您點選的資料夾及其所有內容。

如要恢復先前的選項，請在 「設定」>「實驗」中勾選 「啟用『暫時刪除所有覆寫值』」。

Chromium 問題：1472952、1416338、1472580、1473681 1475668。

強化搜尋功能

搜尋結果現在會針對程式碼中找到的所有相符項目顯示一個項目。以往，這個程式碼只會顯示每一行程式碼的第一個相符項目。當你搜尋壓縮的檔案時，這項新行為特別實用。點選搜尋結果後，系統會在編輯器中開啟檔案，並且現在會在垂直和水平方向捲動符合條件的內容。

此外，搜尋功能的速度也提升了。請參閱下一個影片中的前後對照比較 (左側為前，右側為後)。

最後，搜尋功能現在支援略過清單，不會顯示略過的檔案結果。

Chromium 問題：1468875、1472019。

改善「來源」面板

「來源」面板中的簡化工作區

「來源」面板中的「工作區」功能現在已簡化：

• 命名一致。最值得注意的是，「Sources」 >「Filesystem」窗格已重新命名為「Workspace」。這個窗格中的各種 UI 文字現在更清楚，且沒有多餘的內容。
• 改善設定程序。提供更清楚的提示，說明如何拖曳資料夾，或點選連結來選取資料夾。

來源 > 工作區：您可以直接將在開發人員工具中所做的變更同步至來源檔案。

查看實際設定和工作流程的實際運作方式：

Chromium 問題：1473771、1473880、1473963、1474686、1474687。

重新排序「來源」中的窗格

您現在可以拖曳「來源」面板左側的窗格，重新排序窗格，類似於重新排序其他面板、分頁和窗格。

Chromium 問題：1473758。

支援更多指令碼類型的語法醒目顯示和美化列印功能

來源面板現在可執行以下操作：

• 在下列指令碼類型中，美化內嵌 JavaScript：module、importmap、speculationrules。
• 醒目顯示 importmap 和 speculationrules 指令碼類型的語法，這兩者都會保留 JSON。

如要進一步瞭解推測規則，請參閱「在 Chrome 中預先轉譯頁面以進行即時網頁瀏覽」。

Chromium 問題：1473875。

模擬偏好降低透明度媒體功能

Chrome 118 現已支援 prefers-reduced-transparency 媒體功能。這項功能可讓開發人員根據使用者所選偏好設定調整網頁內容，降低 OS 的透明度，例如 macOS 的「降低透明度」設定。

如要模擬這項媒體功能，請開啟「算繪」分頁，然後向下捲動至該功能。

Chromium 問題：1424879。

Lighthouse 11

Lighthouse 面板現在會執行 Lighthouse 11。最值得注意的是，這個版本移除了舊版導覽功能，並新增無障礙性稽核功能，以及變更無障礙性類別的評分方式。

另請參閱完整變更清單。如要瞭解在開發人員工具中使用「Lighthouse」面板的基本概念，請參閱「Lighthouse：最佳化網站速度」。

Chromium 問題：772558。

無障礙功能改善

開發人員工具現已支援更多瀏覽按鍵：

• CSS 總覽：使用向上鍵和向下鍵瀏覽左側邊欄中的各個部分。
• 記憶體：在左側欄中，使用 Tab 鍵將焦點移至快照旁的「儲存」按鈕，然後按下 Enter 鍵選取資料夾。

此外，我們修正了一些螢幕閱讀器公告問題。

Chromium 問題：1470401、1471301、1474108、1468631。

其他精選內容

以下是這個版本中值得注意的修正和改善項目：

• 網路：熱門資源類型的新圖示：media、wasm、websocket、manifest、fetch/xhr、json (1466298)。
• 許多 UI 元素的顏色已更新為 Material 3 顏色，其中最明顯的是「Elements」和「Performance」面板 (1456690、1472243)。
• 問題：現在會在導覽期間保留 Cookie 問題 (1466601)。
• 改善各種應用程式 > 預先載入功能，其中最值得注意的是可排序的格線和修訂的規則集詳細資料 (1410709)。
• Protocol monitor 中的指令編輯器有許多改善之處，其中最值得注意的是錯誤輸入的警告、編輯已傳送的指令、沒有預先定義鍵的物件參數編輯器、支援參照未定義的列舉、沒有類型參照的物件、依據子字串比對篩選指令等 (1448050)。
• 成效火焰圖的圓餅圖中，總計方塊周圍會加上邊框 (1470147)。
• Sources 現已不會將破折號視為 CSS 中的字詞字元 (1471354)。
• 自動完成功能現在會在最後排序 CSS 相關關鍵字。
• 規則運算式篩選器現在支援空格 (1346936)。
• Elements 已修正媒體查詢功能偵測問題 (1472693)。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

與 Chrome 開發人員工具團隊聯絡

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

• 請透過 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序點選 more_vert 和 [更多選項] > [說明] > [回報開發人員工具問題] 回報開發人員工具問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 歡迎留言分享開發人員工具 YouTube 新功能或開發人員工具秘訣 YouTube 影片。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。