開發人員工具、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() 處理遭到拒絕的承諾，來源面板現在會正確將其視為已捕捉。

換句話說，如果您已開啟「Sources」>「Breakpoints」>「check_box」「Pause on uncaught exceptions」，偵錯工具就不會在下列類似陳述式中暫停：

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

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

Chromium 問題：40283993。

主控台中的錯誤原因

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

為方便偵錯，您可以在擷取及重新擲回錯誤時指定錯誤原因。主控台會逐一查看錯誤鏈結，並在每個錯誤堆疊前面加上前置字串 Caused by:，讓您仍能看到原始錯誤。

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

Chromium 問題：40182832。

網路面板改善

這個版本針對「Network」面板進行了多項改善。

檢查早期提示標頭

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

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

在 Early Hints 專用區段新增前後的畫面。

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

Chromium 問題：40222701。

隱藏瀑布圖欄

您現在可以隱藏聯播網面板中的刊登序列資料欄，方法與隱藏其他欄相同。在任何資料欄名稱上按一下滑鼠右鍵，然後在下拉式選單中清除「Waterfall」核取方塊。

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

Chromium 問題：40574989。

效能面板改善

這個版本針對「Performance」面板進行了多項改善。

擷取 CSS 選取器統計資料

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

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

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

Chromium 問題：324282954。

變更順序和隱藏音軌

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

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

下一個版本 (Chrome 126) 將進一步改善這個 UI。

Chromium 問題：311439339。

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

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

如要忽略保留者，請選取物件，然後在「Retainer」部分，按一下保留者的滑鼠右鍵，並在下拉式選單中選取「Ignore this retainer」。在「Distance」欄中，系統會以 ignored 值標示已忽略的保留資料。如要停止忽略，請按一下頂端操作列中的「還原已忽略的保留器」。

新增略過保留者的選項前後的效果。

此外，堆積屍塊快照現在支援更多 (數百萬) 的包含邊和節點 (332350576)。

Chromium 問題：327337527。

Lighthouse 11.7.1

Lighthouse 面板現在執行 Lighthouse 11.7.1。請參閱完整變更清單。

其中一個重大變更是已淘汰的發布商廣告外掛程式，這個外掛程式已在這個版本中淘汰。

新增及移除發布商廣告外掛程式支援功能前後的比較。

如要瞭解在開發人員工具中使用 Lighthouse 面板的基本知識，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：772558。

其他精選內容

以下是這個版本中值得注意的修正和改善項目：

  • 錄音工具面板現已正式推出 (329271496)。
  • 自訂轉換器為 body() 函式傳回 null 時，控制台現在不會顯示錯誤，這是有效的行為 (329400119)。
  • 來源面板更新了語法醒目顯示功能，現在支援規則運算式中的 v 和 d 標記。
  • Network > Cookies 分頁修正了將豁免 Cookie 對應至回應 Cookie 的錯誤 (41491846)。
  • 「元素」 >「樣式」分頁現在會執行以下操作：
    • 顯示含有自訂屬性的完全重載繼承規則 (41489874)。
    • 根據顏色主題醒目顯示 light-dark() 中套用的值 (331123816)。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。