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

Sofia Emelianova

使用 Gemini 深入瞭解控制台中的錯誤和警告

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

如要取得錯誤或警告的 AI 生成說明，請按一下「控制台」中訊息旁的「瞭解這項錯誤 (警告)」按鈕，然後按照指示操作。

詳情請參閱「運用 AI 深入瞭解錯誤和警告」。

@position-try 元素 > 樣式中的規則支援

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

詳情請參閱「推出 CSS 錨點定位 API」。

Chromium 問題：40279608。

來源面板改善項目

這個版本對「來源」面板進行了多項改良。

設定自動美化列印和括號結尾

現在起，您可以在「來源」的「編輯器」中，開啟或關閉自動美化列印和括號關閉功能。美化排版功能可讓您閱讀壓縮檔。括號自動結尾：輸入左括號時，系統會自動新增右括號 () 或 }) 或標記 (>)。

如要設定相關行為，請在「設定」「偏好設定」「來源」中，勾選或取消勾選新的「自動關閉括號」和「自動美化縮排來源」選項。

Chromium 問題：40865010、324314570。

系統會將處理過的遭拒 Promise 視為已擷取

如果您使用 .catch() 或雙引數 .then() 處理遭拒的 Promise，來源面板現在會正確將其視為已擷取。

換句話說，當「來源」>「中斷點」>「check_box」check_box「在未處理的例外狀況中暫停」開啟時，偵錯工具不會在類似下列的陳述式中暫停：

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

Chromium 問題：40283993。

主控台中的錯誤原因

現在，如果堆疊追蹤記錄中存在任何錯誤原因鏈結，控制台就會顯示這些鏈結。

如要簡化偵錯程序，您可以在擷取並重新擲回錯誤時指定錯誤原因。控制台會逐步追溯原因鏈，並列印每個錯誤堆疊 (附有 Caused by: 前置字元)，因此您仍可查看原始錯誤。

Chromium 問題：40182832。

網路面板改善項目

這個版本對「網路」面板進行了多項改良。

檢查早期提示標頭

在「網路」面板的要求「標頭」分頁中，Early Hints 標頭會顯示在專屬部分。先前，您可以在「回應標頭」部分找到相關標頭。

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

詳情請參閱「使用 Early Hints 搭配伺服器思考時間，加快網頁載入速度」。

Chromium 問題：40222701。

隱藏瀑布圖資料欄

您現在可以隱藏「網路」面板中的「刊登序列」資料欄，就像隱藏其他資料欄一樣。在任何資料欄名稱上按一下滑鼠右鍵，然後在下拉式選單中取消勾選「瀑布圖」check_box_outline_blank核取方塊。

Chromium 問題：40574989。

效能面板改善

這個版本對「效能」面板進行了多項改良。

擷取 CSS 選取器統計資料

「效能」面板新增設定，可擷取長時間執行的「重新計算樣式」事件的 CSS 選取器統計資料。

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

Chromium 問題：324282954。

變更順序及隱藏軌

「效能」面板新增設定模式，可讓你變更軌道順序及隱藏軌道。

如要進入設定模式，請按一下音軌名稱左側的「編輯」按鈕。然後按一下「向上箭頭」arrow_upward或「向下箭頭」arrow_downward移動軌道，或按一下「隱藏」visibility_off。完成後，按一下曲目名稱右側的「完成」勾選按鈕。

Chrome 126 將進一步改善這個使用者介面。

Chromium 問題：311439339。

在「記憶體」面板中忽略保留器

您現在可以忽略使用「Memory」面板擷取的堆積快照中的保留項目。

如要忽略固位器，請選取物件，然後在「固位器」部分中，以滑鼠右鍵按一下固位器，並從下拉式選單中選取「忽略這個固位器」。遭忽略的保留項目會在「距離」欄中標示 ignored 值。如要停止忽略，請按一下頂端動作列中的「還原忽略的約聘人員」。

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

Chromium 問題：327337527。

Lighthouse 11.7.1

「Lighthouse」面板現在會執行 Lighthouse 11.7.1。如需完整變更清單，請參閱這篇文章。

其中一項重大變更，是這個版本已淘汰對 Publisher Ads 外掛程式的支援。

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

Chromium 問題：772558。

其他重點

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

• 「錄音工具」面板現已正式推出，不再是預先發布版本 (329271496)。
• 自訂格式化工具為 body() 函式傳回 null 時，「控制台」不會再顯示錯誤，這是正常行為 (329400119)。
• 「來源」面板更新了語法螢光筆，現在支援規則運算式中的 v 和 d 標記。
• 「網路」 >「Cookie」分頁修正了將豁免 Cookie 對應至回應 Cookie 的錯誤 (41491846)。
• 「元素」>「樣式」分頁現在會執行下列操作：
  • 顯示具有自訂屬性的完全過度負載繼承規則 (41489874)。
  • 根據顏色主題，醒目顯示 light-dark() 中套用的值 (331123816)。

下載預覽版

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

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

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

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

開發人員工具新功能

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