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

Sofia Emelianova
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 屬性的預設值。

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

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

Chromium 問題：1501781。

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

「元素」 >「樣式」現在可解析其他自訂屬性備用屬性的自訂屬性。

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

Chromium 問題：1499265。

改善來源對應支援

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

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

詳情請參閱對應的 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。

無障礙功能

這個版本有下列無障礙功能改善項目：

  • 在「Network」 >「Payload」中，您現在可以使用 Tab 鍵將焦點移至「檢視來源」和「查看網址編碼」按鈕，然後按下 Enter 鍵或空格鍵觸發對應動作。
  • 為避免混淆，在控制台中，導向指令碼的連結現在不會顯示在「偵錯工具」中，該連結會顯示為灰色且無法點選。
  • 在導覽樹狀結構中 (例如「來源」 >「頁面」中的樹狀結構)，按下 Enter 鍵現在可以展開和收合含有子項的節點。

Chromium 問題：1338391、1500662、1420362。

其他精選內容

這個版本包含多項重要修正和��善���目：

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59