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

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

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

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

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

如要立即恢復舊版篩選器列，請依序前往「設定」 >「實驗」 > 取消勾選「網路面板中的篩選器列重新設計」。

歡迎在 crbug.com/1500573 提供這項功能的意見回饋。

Chromium 問題：1486431。

元素改善

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

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

在「樣式」中，按一下 font-palette 屬性的值，開發人員工具就會帶您前往 @font-palette-values 專屬區段，您可以在該處編輯自訂值。

Chromium 問題：1501781。

支援的案例：自訂屬性做為另一個自訂屬性的備用屬性

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

Chromium 問題：1499265。

改善來源對應支援

「設定」 >「實驗」 >「使用來源對應在運算式中解析變數名稱」核取方塊預設為開啟。

即使您已合併、壓縮或編譯原始碼，開發人員工具仍可使用來源對應，讓您在「來源」和「範圍」中偵錯原始碼。這項實驗可讓您在開發人員工具中評估原始變數名稱，包括但不限於：

• 控制台中的運算式和自動完成建議

  

• 即時運算式

  

• 監看運算式

  

• 條件中斷點和記錄點

  

詳情請參閱相應的 RFC。

Chromium 問題：1444349。

效能面板改善

加強型互動追蹤

「成效」 >「互動」追蹤會取得鬚狀線，指出處理時間界線的輸入和呈現延遲。

此外，將滑鼠游標懸停在互動上時，畫面上會顯示實用的工具提示，詳細說明時間資訊。

Chromium 問題：1495751。

在「由下而上」、「呼叫樹狀結構」和「事件記錄」分頁中進行進階篩選

「效能」面板的「由下而上」、「呼叫樹狀結構」和「事件記錄」分頁中，新增了三個進階篩選按鈕：

• match_case Match case。
• regular_expression 規則運算式。
• match_word 全字相符。

此外，為協助您保留脈絡，現在只有頂層項目會與「由下而上」分頁中的篩選器相符。先前，篩選器會比對每個節點。

Chromium 問題：1496355。

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

「來源」面板中的編輯器現在會以垂直線標示縮排的程式碼區塊，方便您查看。

Chromium 問題：1479986。

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

現在，當您將游標懸停在要求的「標頭」和「回應」分頁標籤旁的紫色圓點圖示上時，「網路」面板會顯示工具提示。工具提示會說明開發人員工具覆寫的內容。

Chromium 問題：1469776。

新增指令選單選項，可新增及移除要求封鎖模式

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

「新增」指令會開啟對話方塊，供您指定模式；「移除」指令則會移除所有模式，不會開啟「網路要求封鎖」面板。

已移除 CSP 違規實驗

我們移除了 第 89 版推出的實驗性「CSP 違規」分頁，因為這項功能已顯得冗餘。

如要一覽 CSP 詳細資料，請依序前往「Application」(應用程式) >「Frames」(框架) >「Content Security Policy (CSP)」(內容安全政策 (CSP))。

此外，「問題」面板也會回報 CSP 違規情形。

Lighthouse 11.3.0

「Lighthouse」面板現在會執行 Lighthouse 11.3.0。如需完整變更清單，請參閱這篇文章。其中一項重大變更，就是能夠針對 404 網頁執行報表。

如要瞭解如何使用開發人員工具中的 Lighthouse 面板，請參閱「Lighthouse：提升網站速度」。

Chromium 問題：772558。

無障礙設定

這個版本在無障礙功能方面有以下改善：

• 在「網路」>「酬載」中，您現在可以按 Tab 鍵將焦點移至「查看來源」和「查看網址編碼」按鈕，然後按 Enter 鍵或空格鍵觸發對應動作。
• 在控制台中，為了減少混淆，現在會將導向 Debugger 無法再使用的指令碼連結設為灰色，且無法點選。
• 在導覽樹狀結構 (例如「來源」>「頁面」中的樹狀結構) 中，現在可使用 Enter 鍵展開及收合含有子項的節點。

Chromium 問題：1338391、1500662、1420362。

其他重點

這個版本的重要修正和改良項目包括：

• 運作方式：如果錄製作業失敗，您現在可以下載原始追蹤事件，並嘗試找出問題所在 (commit)。
• 「顯示控制台」快速鍵 (Mac 版為 Ctrl+`，Windows 和 Linux 版為 Ctrl++) 現在不僅會開啟「控制台」，再次按下時也會關閉。
• 開發人員資源。修正錯誤，避免系統無法回報 CSS 資源及其問題 (1420362)。
• 元素：
  • 修正檢查 iframe 中元素時發生的錯誤 (1453375)。
  • 已計算。修正導致預設值無法轉譯的錯誤 (1499882)。
  • 搜尋。修正錯誤，避免無法計算一或兩個字元的簡短查詢比對次數 (1416457)。
• 主控台。現在可正確剖析「篩選器」方塊中以逸出字元結尾的規則運算式 (1346936)。
• 「設定」>「Workspace」。修正無法新增排除資料夾的錯誤 (1503580)。
• 依序點選「網路」 >「預覽」。現在會使用 data: URI 算繪圖片 (1381791)。
• 記憶體。在動作列中新增適當的「上傳」載入和「下載」儲存按鈕 (1275407)。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見或要求新功能，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。