開發人員工具、Chrome 125 的新功能's

Sofia Emelianova
Sofia Emelianova
GitHub

運用 Gemini 更準確地瞭解控制台中的錯誤和警告

這個 Chrome 版本將生成式 AI 功能導入開發人員工具控制台，可讓您進一步瞭解收到的錯誤和警告。

如要查看 AI 生成的錯誤或警告說明，請前往控制台，按一下該訊息旁的 發光的燈泡。「瞭解這項錯誤 (警告)」按鈕，然後按照指示操作。

AI 生成的錯誤說明。

詳情請參閱「運用 AI 更妥善瞭解錯誤和警告」。

「元素」>「樣式」支援 @position-try 項規則

為協助您對 CSS 錨定位置偵錯，「元素」 >「樣式」分頁現在支援 @position-try CSS 規則。分頁會解析 position-try-options 值，並將每個選項連結至專屬的 @position-try --name 區段。

支援 @position-try CSS 規則的前後對照比較。

詳情請參閱「隆重推出 CSS 錨定定位 API」一文。

Chromium 問題：40279608。

「來源」面板改善項目

這個版本改善了「來源」面板的功能。

設定自動美化排版和括號關閉功能

您現在可以在「來源」中為編輯器開啟或關閉自動美化排版和括號關閉功能。精確列印功能可讓使用者讀取壓縮檔案。括號 () 或 }) 或標記 (>) 會在您輸入開頭括號時，自動加上右括號。

如要設定相關行為，請依序前往 [設定] > [偏好設定] > [來源]，然後清除或清除新的 check_box 自動右括號和 check_box 自動美化壓縮來源選項。

新增自動美化排版和支架上鎖的前後版設定。

Chromium 問題：40865010、324314570。

系統會將處理遭拒的承諾視為已捕捉到

「來源」面板現在可正確將您透過 .catch() 或兩個引數 .then() 處理的遭拒承諾視為已發現。

換句話說，如果「來源」>「中斷點」>「check_box」check_box啟用「在未偵測到的例外狀況時暫停」設定，偵錯工具就不會暫停類似下列的陳述式：

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

識別出拒絕作業的前後對照比較。

Chromium 問題：40283993。

控制台中的錯誤原因

控制台現在會顯示堆疊追蹤中的錯誤原因鏈結 (如果有的話)。

為了方便偵錯，您可以在擷取和擲回錯誤時指定錯誤原因。當 Console 指引到原因鏈結時，就會輸出每個含有 Caused by: 前置字元的錯誤堆疊，因此您還是可以看到原始錯誤。

輸出堆疊追蹤前後，可以使用「Caused by」前置字串。

Chromium 問題：40182832。

改善網路面板

這個版本改善了「網路」面板。

檢查 Early 提示 標頭

在「Network」面板的要求中，早期提示標頭會有一個專屬的「Headers」區段。過去，您可以在「回應標頭」部分找到相關標頭。

Early 提示 是 HTTP 狀態碼 (103 Early Hints)，用來在最終回應之前傳送初步 HTTP 回應。這樣一來，當伺服器正忙於產生主要資源時，伺服器就會將網頁可能使用的重要子資源 (例如樣式表或重要 JavaScript) 或來源相關提示傳送給瀏覽器。

之前與之後新增的 Early Hints 專屬章節。

詳情請參閱「透過早期提示使用伺服器思考時間來加快網頁載入速度」。

Chromium 問題：40222701。

隱藏「刊登序列」欄

您現在可以隱藏「Network」面板中的「Waterfall」欄，方法與隱藏其他資料欄類似。在任一欄名稱上按一下滑鼠右鍵，然後清除下拉式選單中的 check_box_outline_blank 核取方塊。

新增「刊登序列」欄的「之前」和「之後」選項。

Chromium 問題：40574989。

效能面板改善項目

這個版本為「Performance」(效能) 面板進行了幾項改善。

擷取 CSS 選取器統計資料

「Performance」(效能) 面板提供新的設定，可讓您針對長時間執行的「Recalculate Style」(重新計算樣式) 事件擷取 CSS 選取器統計資料。

如要查看統計資料，請選取「Recalculate Style」(重新計算樣式) 事件，然後開啟新的「Selector Stats」(選取器統計資料) 分頁。這個分頁會顯示各選擇器的經過時間、比對嘗試次數和次數，以及各選取器不相符的緩慢路徑百分比資訊。

新增選取器統計資料的前後對照。

Chromium 問題：324282954。

變更播放順序並隱藏音軌

「效能」面板提供新的設定模式，可讓您變更及隱藏測試群組的順序。

如要進入設定模式，請按一下測試群組名稱左側的「編輯」按鈕。接著點選 arrow_upward 或 arrow_downward 即可移動音軌，或是按一下 visibility_off (隱藏功能)。完成後，按一下字幕軌名稱右側的「完成」按鈕。

下一個版本的 Chrome 126 會為這個使用者介面進行更多改善。

Chromium 問題：311439339。

忽略「Memory」面板中的保留器

您現在可以使用「Memory」(記憶體) 面板擷取堆積快照中的保留器。

如要忽略保留器，請選取物件，然後在「Retainer」部分，對保留器按一下滑鼠右鍵，從下拉式選單中選取「Ignore this 保留 er」(忽略此保留器)。忽略的保留器會在「Distance」資料欄中標示 ignored 值。如要停止忽略，請按一下頂端動作列中的「還原已忽略的保留器」。

之前和之後新增忽略保留器的選項。

此外，堆積快照現在支援更多 (數億) 的遏制邊緣和節點 (332350576)。

Chromium 問題：327337527。

Lighthouse 11.7.1

Lighthouse 面板現在會執行 Lighthouse 11.7.1 面板。查看完整異動清單。

值得注意的變更是已淘汰的發布商廣告外掛程式支援，但這個版本已經過時。

移除發布商廣告外掛程式支援的前後差異。

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

Chromium 問題：772558。

其他精選內容

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

  • 「錄音工具」面板現已正式停用預先發布版狀態 (329271496)。
  • 當自訂格式設定工具為 body() 函式傳回 null (此為有效行為) (329400119) 時，Console 現在不會顯示錯誤。
  • 「Sources」面板更新了語法醒目顯示工具，特別是現在支援規則運算式中的 v 和 d 標記。
  • 「網路」 >「Cookie」分頁修正了將豁免 Cookie 對應至回應 Cookie 的錯誤 (41491846)。
  • 「Elements」 >「Styles」分頁現在可執行下列操作：
    • 顯示具有自訂屬性的完整超載沿用規則 (41489874)。
    • 根據色彩主題醒目顯示 light-dark() 中套用的值 (331123816)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

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