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

Sofia Emelianova
Sofia Emelianova
GitHub

「元素」中自訂屬性的新專區 >風格

「元素」面板現在支援 @property CSS at-rule。您可以運用這項功能，明確定義 CSS 自訂屬性，並在樣式表中註冊這些屬性，完全不必執行 JavaScript。

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

Chromium 問題：1471102、1471103、1471105。

更多本機覆寫功能改善項目

為延續舊版的改善項目，本機覆寫現在會執行下列操作：

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

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

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

    篩選「has-overrides:yes」將「包含覆寫值」。

  • 在「來源」中 >覆寫：[刪除所有覆寫值] 選單選項已替換成「刪除」選項和精確行為。

    取代「刪除所有覆寫項目」前後的比較刪除

先前的「刪除所有覆寫項目」設定只刪除目前工作階段中有效 (以 已儲存。 紫色點圖示標示) 的覆寫值，讓您感到困惑。

新的「Delete」(刪除) 選項會先顯示警告訊息和提示確認，接著刪除您點選的資料夾及其所有內容。

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

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

「搜尋」結果現在會根據一行程式碼中找到的所有相符項目顯示項目。以往，這個程式碼只會顯示每一行程式碼的第一個相符項目。當你搜尋壓縮的檔案時，這項新行為特別實用。當你點選搜尋結果時，系統會在編輯器中開啟檔案，並同時將相符的項目捲動至檢視畫面，不僅垂直方向也跟著水平方向捲動。

搜尋前後的比對結果與每行的相符。

此外，搜尋速度也大幅提升。下一部影片將說明前後 (左) 和之後 (右) 的比較。

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

Chromium 問題：1468875、1472019。

改良版「來源」面板

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

「來源」面板中的工作區功能經過全新簡化：

  • 命名一致。最值得注意的是「來源」>「Filesystem」窗格已重新命名為「工作區」。此窗格中的各種 UI 文字現在更加清楚，沒有備援功能。
  • 改善設定。查看更多拖曳資料夾的提示，或按一下連結來選取資料夾。

來源 >在 Workspace 中，您可以將開發人員工具中的變更直接同步到來源檔案。

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

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

重新排序來源中的窗格

您現在可以拖曳「來源」面板左側的窗格，重新排列其順序，就像重新排列其他面板、分頁和窗格一樣。

Chromium 問題：1473758。

適用於更多指令碼類型的語法醒目顯示和美化排版

「Sources」(來源) 面板現在可以：

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

美化排版前後對照語法，以及醒目顯示推測規則指令碼類型的語法。

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

Chromium 問題：1473875。

模擬偏好縮減透明度媒體功能

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

如要模擬這項媒體功能，請開啟「Rendering」分頁並向下捲動。

Chromium 問題：1424879。

燈塔 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)。
  • 改善通訊協定監控中的指令編輯器，其中主要針對輸入錯誤顯示警告、編輯已傳送的指令、不含預先定義鍵的物件參數編輯器、支援未定義參照的列舉、不含類型參照的物件、依子字串比對篩選的指令等等 (1448050)。
  • 成效火焰圖會在圓餅圖的全部方塊周圍加上邊框 (1470147)。
  • 來源現在在 CSS 中，系統不會將破折號視為文字字元 (1471354)。
  • 自動完成功能現在一律會在結尾排序 CSS 相關關鍵字。
  • 規則運算式篩選器現在支援空格 (1346936)。
  • 元素：修正媒體查詢功能偵測 (1472693)。

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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