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

Sofia Emelianova
Sofia Emelianova
GitHub

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

我們重新設計篩選列，讓您更輕鬆地篩選要求，並讓「Network」面板更整齊。

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

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

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

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

歡迎在 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。

改善來源對應支援

根據預設，「Settings」 >「Experiments」 >「check_box」「Resolve variable names in expressions using source maps」已開啟。

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

詳情請參閱對應的 RFC。

Chromium 問題：1444349。

效能面板改善

互動強化追蹤

「Performance」 >「Interactions」軌跡會顯示「whiskers」，用於指出處理時間邊界中的輸入和顯示延遲。

在「互動」追蹤記錄中加入長尾後的結果。

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

Chromium 問題：1495751。

「由下而上」、「呼叫樹狀圖」和「事件記錄」分頁中的進階篩選功能

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

  • 大小寫相符。
  • 規則運算式。
  • 全字相符。

三個用於進階篩選的全新按鈕。

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

Chromium 問題：1496355。

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

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

在縮排的程式碼區塊前後加上垂直線。

Chromium 問題：1479986。

針對「Network」面板中覆寫的標頭和內容提供實用工具提示

將滑鼠游標懸停在要求的「Headers」和「Response」分頁旁的紫色圓點圖示上時，現在「Network」面板會顯示工具提示。工具提示會告訴您開發人員工具覆寫了哪些內容。

「Headers」和「Response」分頁中紫色圓點圖示旁的新工具提示。

Chromium 問題：1469776。

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

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

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

「Add」指令會帶您前往對話方塊，以便指定模式；「Remove」指令則會移除所有模式，且不會開啟「Network request blocking」面板。

移除 CSP 違規實驗

第 89 版中推出的實驗性「CSP 違規」分頁已移除，因為這項功能已無必要。

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

「Application」面板中的「Content Security Policy」

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

「Application」面板中的「Content Security Policy」

Lighthouse 11.3.0

Lighthouse 面板現在執行 Lighthouse 11.3.0。請參閱完整變更清單。其中一個重大變更是可針對 404 頁面執行報表。

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

Chromium 問題：772558。

無障礙設定

這個版本包含下列無障礙功能改善措施：

  • 在「Network」 >「Payload」中，您現在可以將分頁焦點放在「view source」和「view URL-encoded」按鈕，然後按下「Enter」或「空格」觸發對應的動作。
  • 為避免混淆，主控台已將連至 偵錯工具 中已無法使用的指令碼的連結設為灰色，並且無法點選。
  • 在導覽樹狀結構中 (例如 Sources > Page 中的樹狀結構)，Enter 鍵現在會展開及收合含有子項的節點。

Chromium 問題：1338391、1500662、1420362。

其他精選內容

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

  • 運作方式：如果錄製失敗，您現在可以選擇下載原始追蹤記錄事件，並嘗試找出錯誤所在 (commit)。
  • 「顯示控制台」快速鍵 (Mac 為 Ctrl + `，Windows 和 Linux 為 Ctrl + +) 現已改為在按下第二次時關閉控制台，而不是開啟控制台。
  • 開發人員資源。修正導致無法回報 CSS 資源及其問題的錯誤 (1420362)。
  • 元素：
    • 修正 iframe 中檢查元素的錯誤 (1453375)。
    • 已計算：修正導致無法轉譯預設值的錯誤 (1499882)。
    • 搜尋：修正導致無法計算一或兩個字元的短查詢相符項目數量的錯誤 (1416457)。
  • 主控台。在「Filter」方塊中，現在可正確剖析結尾為轉義字元的規則運算式 (1346936)。
  • 依序前往「設定」 >「工作區」。修正導致無法新增排除資料夾的錯誤 (1503580)。
  • 依序點選「Network」 >「Preview」。現已透過 data: URI 算繪圖片 (1381791)。
  • 記憶體。在動作列中新增適當的「上傳」和「下載」儲存按鈕 (1275407)。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

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

開發人員工具的新功能

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