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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

Chromium 問題：1471102、1471103、1471105。

更多本機覆寫值改善

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

  • 在「Sources」 >「Page」中，如果您在來源對應檔案上按一下滑鼠右鍵，然後選取「Override content」，開發人員工具就會顯示對話方塊，引導您前往原始來源。來源對應檔案的內容無法覆寫。

    這個對話方塊會帶您前往原始程式碼，而非來源對應檔案。

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

    篩選「Has overrides」欄中的「has-overrides:yes」值。

  • 在「來源」 >「覆寫」中，已將「刪除所有覆寫」選單選項替換為「刪除」選項，並提供更精確的行為。

    在將「Delete all overrides」替換為「Delete」之前和之後。

先前的「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。

模擬 prefers-reduced-transparency 媒體功能

Chrome 118 現已支援 prefers-reduced-transparency 媒體功能。這項功能可讓開發人員根據使用者選取的偏好設定調整網頁內容，以便在作業系統中減少透明度，例如 macOS 上的「減少透明度」設定。

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

Chromium 問題：1424879。

Lighthouse 11

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

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

Chromium 問題：772558。

無障礙功能改善

開發人員工具現在支援更多導覽按鍵組合：

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

此外，我們也修正了幾個螢幕閱讀器朗讀問題。

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

其他精選內容

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

  • Network：新增常用資源類型的圖示：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 開發人員工具團隊聯絡

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。