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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

這個版本的對應實驗已預設為啟用，但會被還原。如要追蹤進度，請前往 crbug.com/1523150。

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

如要立即顯示舊的篩選列，請關閉設定「設定」>實驗 >check_box_outline_blank 在網路面板中重新設計篩選列。

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

歡迎到 crbug.com/1500573 留下您對這項功能的寶貴意見。

Chromium 問題：1486431。

改善元素

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

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

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

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

Chromium 問題：1501781。

支援情況：自訂屬性是其他自訂屬性的備用資料

元素 >樣式現在可解析另一個自訂屬性備用項目的自訂屬性。

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

Chromium 問題：1499265。

改善來源對應支援

設定「設定」>實驗 >check_box 根據預設，「使用來源對應在運算式中解析變數名稱」功能已關閉。

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

詳情請參閱對應的 RFC。

Chromium 問題：1444349。

效能面板改善項目

加強型互動追蹤

「成效」>「互動」軌跡會棘手，指出輸入和顯示作業在處理期間發生延遲。

在「互動」測試群組的前後比較。

此外，將遊標懸停在互動上時，還可查看詳細說明時機的實用工具提示。

Chromium 問題：1495751。

「Bottom-Up」、「Call Tree」和「Event Log」分頁中的進階篩選功能

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

  • match_case 大小寫相符。
  • regular_expression 規則運算式。
  • match_word 比對完整字。

三個新按鈕可讓您執行進階篩選作業。

此外，為協助您保留內容，現在只有頂層項目符合「由下而上」分頁中的篩選器。過去篩選器會比對出所有節點。

Chromium 問題：1496355。

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

為了方便起見，「Sources」面板中的「Editor」現在會以垂直線標示縮排的程式碼區塊。

使用垂直線標示縮排程式碼區塊前後的程式碼區塊。

Chromium 問題：1479986。

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

現在，如果您將遊標懸停在要求「Headers」和「Response」分頁旁的紫色點圖示上，「Network」面板就會顯示工具提示。工具提示會指出開發人員工具覆寫了什麼內容。

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

Chromium 問題：1469776。

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

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

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

Add 指令會將您導向對話方塊來指定模式，而 Remove 指令則會移除所有模式，而不必開啟「網路要求封鎖」面板。

已移除 CSP 違規事項實驗

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

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

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

此外，「Issues」面板會回報 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)。
  • 「設定」>工作區。修正無法新增已排除資料夾的錯誤 (1503580)。
  • 網路 >預覽。現在使用 data: URI 轉譯圖片 (1381791)。
  • Memory：新增適當的「上傳」載入和「下載」儲存按鈕至動作列 (1275407)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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