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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

Chromium 問題：1471102、1471103、1471105。

更多本機覆寫值改善

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

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

    對話方塊會將您導向原始程式碼，而非來源對應檔案。

  • 「網路」面板會取得新的「含有覆寫值」欄和對應的 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。

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

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 開發人員工具團隊聯絡

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

開發人員工具新功能

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