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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

AI 生成的錯誤說明。

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

元素支援 @position-try 項規則 >風格

為協助您對 CSS 錨定位置偵錯，[元素]Elements >「樣式」分頁現在支援 @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「在未偵測到的例外狀況時暫停」已開啟，偵錯工具就不會在類似以下的陳述式中暫停：

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 現在不會顯示錯誤。
  • 「來源」面板已更新語法醒目顯示工具，特別是現在支援 v 和 d 旗標
  • 網路 >Cookie 分頁修正了將豁免 Cookie 對應至回應 Cookie 的錯誤 (41491846)。
  • Elements >「Styles」分頁現在可執行下列操作：
    • 顯示具有自訂屬性的完整超載沿用規則 (41489874)。
    • 根據色彩主題醒目顯示 light-dark() 中套用的值 (331123816)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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