開發人員工具、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。

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

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

如要忽略固位器，請選取物件，然後在「固位器」部分中，以滑鼠右鍵按一下固位器，並從下拉式選單中選取「忽略這個固位器」。遭忽略的保留項目會在「距離」欄中標示 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 影片中留言。

開發人員工具新功能

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