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

「來源」面板改善項目

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

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

您現在可以為「來源」中的「編輯器」開啟或關閉自動美化列印和結束符號功能。精確列印功能可讓使用者讀取壓縮檔案。輸入開方括號時，系統會自動新增結束方括號 () 或 }) 或標記 (>)。

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

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

Chromium 問題：40865010、324314570。

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

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

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

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

在偵測到遭拒絕的內容前後。

Chromium 問題：40283993。

主控台中的錯誤原因

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

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

在印出堆疊追蹤記錄之前和之後，會加上「Caused by」前置字串。

Chromium 問題：40182832。

改善網路面板

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

檢查早期提示標頭

在「網路」面板的「標頭」分頁中，早期提示標頭會在要求的「標頭」分頁中取得專屬區段。過去，您可以在「回應標頭」部分找到相關標頭。

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

在 Early Hints 專屬部分新增前後的畫面。

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

Chromium 問題：40222701。

隱藏「刊登序列」欄

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

新增隱藏「圖表」欄選項前後的畫面。

Chromium 問題：40574989。

效能面板改善

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

擷取 CSS 選取器統計資料

「Performance」面板新增設定，可讓您擷取長時間執行的「Recalculate Style」事件的 CSS 選取器統計資料。

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

新增選取器統計資料前後的比較。

Chromium 問題：324282954。

變更播放順序並隱藏音軌

「Performance」面板提供新的設定模式，可讓您變更曲目順序並隱藏曲目。

如要進入設定模式，請按一下音軌名稱左側的「編輯」 按鈕。接著，點選「向上」或「向下」來移動音軌，或是點選「隱藏」。完成後，按一下曲目名稱右側的「完成」圖示。

下一個版本的 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)。
  • 「元素」>「樣式」分頁現在會執行以下操作：
    • 顯示具有自訂屬性的完整超載沿用規則 (41489874)。
    • 根據顏色主題醒目顯示 light-dark() 中套用的值 (331123816)。

下載預覽頻道

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

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

請使用下列選項來討論最新功能、更新，或任何與開發人員工具相關的內容。

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。