本頁面由 Cloud Translation API 翻譯而成。

開發人員工具的新功能' (Chrome 121)

Sofia Emelianova

簡化「網路」面板中的篩選列

篩選列經過重新設計，可讓您更輕鬆篩選要求，以及整理「網路」面板。

對應的實驗已在這個版本中預設為啟用，但將還原。您可以在 crbug.com/1523150 中追蹤進度。

新的篩選列有兩個下拉式選單，一個用於選擇要求類型，另一個用於隱藏資料和擴充功能網址，或只顯示已封鎖的 Cookie 和要求，以及第三方要求。這兩個選單都支援複選功能。

如要立即恢復舊版篩選列，請依序輕觸「設定」 >「實驗」 >「check_box_outline_blank」在「網路」面板中重新設計篩選列。

簡化「網路」面板中篩選列的前後對照。

歡迎前往 crbug.com/1500573 提供你對這項功能的意見。

Chromium 問題：1486431。

改善元素

「`@font-palette-values`」支援頁面

「元素」面板現在支援 @font-palette-values CSS at-rule。可讓您自訂「font-palette」屬性的預設值。

在「Styles」中，按一下 font-palette 屬性的值，開發人員工具就會將您導向 @font-palette-values 專屬部分，方便您編輯自訂值。

「樣式」中的 @font-palette-values 部分。

Chromium 問題：1501781。

支援情況：用自訂屬性做為其他自訂屬性的備用資源

「Elements」(元素) >「Styles」(樣式) 現在會解析為另一個自訂屬性備用的自訂屬性。

之前和之後解析自訂屬性，做為另一個自訂屬性的備用屬性。

Chromium 問題：1499265。

改善來源對應支援

設定 > 實驗 > check_box 使用來源對應解析運算式中的變數名稱已預設為開啟。

開發人員工具使用來源對應，就能在「來源」和「範圍」中對原始程式碼進行偵錯，即使您已經合併、壓縮或編譯程式碼也沒關係。這項實驗能讓您以一致的方式評估開發人員工具中的原始變數名稱，包括但不限於：

控制台中的運算式和自動完成建議
即時運算式
監看運算式
條件中斷點和記錄點

詳情請參閱對應的 RFC。

Chromium 問題：1444349。

改善效能面板

加強型互動追蹤

依序前往「成效」 >「互動」軌跡，會在處理時間範圍內找出輸入和呈現延遲的部分。

前後在「互動」區塊中加入打呼鞋的前後對照。

此外，將滑鼠遊標懸停在互動上，就能查看說明時間的實用工具提示。

Chromium 問題：1495751。

在「Bottom Up」、「Call Tree」和「Event Log」分頁中執行進階篩選功能

「Performance」面板的「Bottom-Up」、「Call Tree」和「Event Log」分頁有三個新的進階篩選按鈕：

match_case [大小寫需相符]。
regular_expression 規則運算式。
match_word 比對整個字詞。

三個新增的進階篩選按鈕。

此外，為協助您保留上下文，現在只有頂層項目符合「由下往上」分頁的篩選器條件。先前這項篩選條件會比對所有節點。

Chromium 問題：1496355。

「來源」面板中的縮排標記

為方便起見，「來源」面板中的「編輯器」現在會以垂直線標示經過縮排的程式碼區塊。

前/後以垂直線標示縮排程式碼區塊。

Chromium 問題：1479986。

在「網路」面板中覆寫標頭和內容的實用工具提示

現在，當您將遊標懸停在要求的「Headers」和「Response」分頁旁邊的紫色圓點圖示上時，「Network」面板就會顯示工具提示。工具提示會說明開發人員工具覆寫的項目。

「標頭」和「回應」分頁中紫色圓點圖示旁邊的新工具提示。

Chromium 問題：1469776。

您現在可以在指令選單中輸入指令，新增或移除網路要求封鎖模式。

新增指令前後的指令，用於新增或移除網路封鎖模式。

Add 指令可前往對話方塊指定模式，Remove 指令移除所有模式且不會開啟「網路要求封鎖」面板。

已移除 CSP 違規事項實驗

版本 89 中引入的實驗性「CSP 違規事項」分頁已移除為多餘項目。

如要快速查看 CSP 詳細資料，請依序前往「應用程式」>「Frames」 >「內容安全政策 (CSP)」。

應用程式面板中的「內容安全政策」。

此外，「問題」面板會回報 CSP 違規事項。

應用程式面板中的「內容安全政策」。

Lighthouse 11.3.0 版本

Lighthouse 面板現在會執行 Lighthouse 11.3.0。查看完整異動清單。最大的改變是執行 404 個網頁報表。

如要瞭解使用開發人員工具中 Lighthouse 面板的基本概念，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：772558。

無障礙功能

這個版本改善了下列無障礙功能：

在「網路」 >「酬載」中，您現在可以用 Tab 鍵聚焦在「檢視來源」和「查看網址編碼」按鈕，然後按下 Enter 或空格鍵來觸發對應動作。
為了避免造成混淆，在控制台中，連往指令碼的連結已無法在「偵錯工具」中使用，會顯示為灰色，且無法點選。
在導覽樹狀圖中 (例如 [來源] > [網頁] 中的樹狀結構)，現在 Enter 鍵現在可展開並收合含有子項的節點。

Chromium 問題：1338391、1500662、1420362。

其他精選內容

這個版本包含幾項值得注意的修正和改善項目：

運作方式：如果記錄失敗，您現在可以選擇「下載原始追蹤記錄事件」，並嘗試找出問題所在 (修訂)。
顯示控制台快速鍵 (Mac 上為 Ctrl + ` 鍵，Windows 和 Linux 使用 Ctrl + +) 現在不只會開啟控制台，第二次按下時也會關閉。
開發人員資源：修正導致無法回報 CSS 資源及其問題的錯誤 (1420362)。
元素：
- 修正在 iframe 中檢查元素的錯誤 (1453375)。
- 運算。修正導致預設值無法轉譯的錯誤 (1499882)。
- Search。修正了無法計算一或兩個字元的簡短查詢相符項目數 (1416457) 的錯誤。
控制台。現在「篩選器」方塊中可正確剖析結尾為逸出字元的規則運算式 (1346936)。
「Settings」 >「Workspace」。修正無法新增排除資料夾的錯誤 (1503580)。
「網路」 >「預覽」。現在使用 data: URI 算繪圖片 (1381791)。
Memory. 在動作列中加入適當的「上傳」載入和「下載」儲存按鈕 (1275407)。

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

請透過 crbug.com 提交建議或意見回饋。
如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 >「說明」 >「回報開發人員工具的問題」。
在 @ChromeDevTools 張貼推文。
歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。