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

Sofia Emelianova
Sofia Emelianova
GitHub

透過 Gemini 進一步瞭解控制台中的錯誤和警告

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

如要取得 AI 產生的錯誤或警告說明，請在「Console」(控制台) 中點選訊息旁的「瞭解 this error (warning)」圖示 燈泡閃光。，然後按照指示操作。

AI 產生的錯誤說明。

詳情請參閱「透過 AI 進一步瞭解錯誤和警告」。

「元素」>「樣式」支援 @position-try 規則

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

支援 @position-try CSS 規則的前後對照。

詳情請參閱「使用 CSS 錨定標記位置相互連結元素」一文。

Chromium 問題：40279608。

改善來源面板

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

設定自動美化列印功能及結尾處

您現在可以在「來源」中，開啟或關閉「編輯器」的自動美化列印和括號關閉功能。Pretty-printing 可讓壓縮的檔案處於可讀取狀態。當您輸入開頭的括弧 () 或 }) 或標記 (>) 時，自動括號的結尾選項會自動新增兩者。

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

前後比較新增自動美化排版與收納盒設定的新設定。

Chromium 問題：40865010、324314570。

系統會將處理遭拒的承諾視為已攔截

現在，如果您使用 .catch() 或兩個引數 .then() 處理遭拒的承諾，「Sources」面板現在可正確辨識遭攔截的承諾。

也就是說，如果已開啟「來源」>「中斷點」>「check_box」check_box「在未偵測到的例外狀況時暫停」，偵錯工具就不會暫停與以下內容類似的陳述式：

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

辨識遭拒的前後對照。

Chromium 問題：40283993。

控制台錯誤原因

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

為方便偵錯，您可以在擷取及擲回錯誤時指定錯誤原因。Console 推理原因時，會輸出每個錯誤堆疊並在前面加上 Caused by: 前置字元，因此您還是可以看到原始錯誤。

之前與之後輸出堆疊追蹤時，會包含「Caused by」前置字元。

Chromium 問題：40182832。

改善網路面板

這個版本為「網路」面板提供多項改善。

檢查早期提示標頭

早期提示標頭位於「Network」面板的要求「Headers」分頁中有一個專屬部分。以往，您可以在「回應標頭」部分找到相關標頭。

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

前後對照新增了「早期提示」專區。

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

Chromium 問題：40222701。

隱藏「刊登序列」欄

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

前後新增選項以隱藏瀑布欄。

Chromium 問題：40574989。

改善效能面板

這個版本改進了「效能」面板。

擷取 CSS 選取器統計資料

「成效」面板提供一項新設定，可讓您擷取長時間執行「重新計算樣式」事件的 CSS 選取器統計資料。

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

加入選取器統計資料的前後對照。

Chromium 問題：324282954。

變更排序及隱藏曲目

「Performance」面板提供新的設定模式，可讓你變更及隱藏測試群組的順序。

按一下測試群組名稱左側的「編輯」按鈕，即可進入設定模式。接著按一下arrow_upward 或 arrow_downward 向下移動曲目，或按一下 visibility_off (隱藏位置) 隱藏。完成後，按一下曲目名稱右側的「完成」按鈕。

下一版 Chrome 126 將針對這個使用者介面進行更多改善。

Chromium 問題：311439339。

忽略「記憶體」面板中的保留區

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

如要忽略控管器，請選取物件，然後在「Retainer」(保留器) 部分按一下右鍵，然後在下拉式選單中選取 [忽略這個保留器]。忽略的保留工具會在「距離」欄中以 ignored 值標示。如要停止忽略，請按一下頂端動作列中的「還原忽略的保留工具」。

之前和之後新增忽略保留器的選項。

此外，堆積快照現在支援更大量 (數億個) 的遏制邊緣和節點 (332350576)。

Chromium 問題：327337527。

Lighthouse 11.7.1 版本

Lighthouse 面板現在會執行 Lighthouse 11.7.1。查看完整異動清單。

以下列舉幾個重要的異動，其中已不再支援這個版本的發布商廣告外掛程式。

新增發布商廣告外掛程式支援的前後對照。

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

Chromium 問題：772558。

其他精選內容

這個版本包含幾項值得注意的修正和改善項目：

  • 錄音工具面板現已正式發布 (329271496)。
  • 如果自訂格式器為 body() 函式傳回 null，這是有效的行為，Console 現在不會顯示錯誤 (329400119)。
  • 「Sources」面板更新了語法醒目顯示工具，具體來說，現在支援規則運算式中的 v 和 d 旗標。
  • 「網路」 >「Cookie」分頁修正了將豁免的 Cookie 對應至回應 Cookie 的錯誤 (41491846)。
  • 「Elements」(元素) >「Styles」(樣式) 分頁標籤現在可執行下列操作：
    • 顯示含有自訂屬性且完全超載的沿用規則 (41489874)。
    • 根據色彩主題醒目顯示淺色-dark() 中套用的值 (331123816)。

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具新功能

「開發人員工具的新功能」系列文章已涵蓋所有功能。

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59