開發人員工具 (Chrome 131) 的新功能'

使用 Gemini 對 CSS 進行偵錯

Chrome 開發人員工具會提供全新的實驗性 AI 協助面板，讓您與 Gemini 對話，並取得 CSS 偵錯協助。

立即體驗！在「元素」面板中，按一下元素並選取「詢問 AI」，或按一下元素旁的對應 按鈕。開發人員工具會開啟新的「AI 輔助」面板。

新的面板會提示你啟用對應的設定。請確認您符合「需求條件」並開啟設定切換鈕，然後返回「AI 輔助」面板。所選元素會做為背景資訊。輸入關於元素的問題。

想進一步瞭解如何充分運用新面板，請參閱「開發人員工具 AI 輔助的 5 項酷炫觀光景點」，以及參閱「樣式適用的 AI 輔助功能」。

開發人員工具團隊期待收到你的寶貴意見。歡迎在 crbug.com/364805393 中提出問題。

在專屬的設定分頁中控管 AI 功能

您現在可以透過新的「設定」分頁，在單一位置管理所有 AI 功能：依序點選「設定」> 「AI 創新」分頁。當中列出重要考量、說明 AI 功能，並可讓您個別開啟或關閉這些功能。

詳情請參閱「設定 > AI 創新功能」。

按一下即可查看控制台的深入分析

開發人員工具不再需要開啟 AI 功能的設定同步功能。因此，只要按一下先前發布的 Console 深入分析資訊，以及 AI 協助樣式設定即可。

如果您已登入 Chrome，可以前往「設定」> 「AI 創新」啟用這些功能，這樣就可以開始使用。

效能面板改善

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

為效能發現項目加上註解及分享

「Performance」面板會在左側的展開式側欄中新增「Annotations」分頁，方便您在分享成效發現時，為追蹤記錄建立附註，並與他人協作。

您現在可以在追蹤記錄中標示事件、連結事件、以箭頭標示事件，以及醒目顯示時間範圍。接著，您可以儲存、分享加上註解的追蹤記錄，然後上傳回「Performance」面板。

直接在「效能」面板中取得成效深入分析資訊

現在起，您可以在「成效」面板左側的側欄中，透過全新「深入分析」分頁查看可做為行動依據的洞察資料。深入分析資訊是從 Lighthouse 報表和效能深入分析面板 (即將淘汰) 整合而來。

「Insights」分頁旨在提供引導式分析，並針對可能導致網站速度變慢的效能問題，提供可做為行動依據的洞察資料。如要善用洞察資料，請在「成效」面板左側欄開啟分頁，展開各種類別，然後將滑鼠遊標移到所需項目上。「Performance」面板會在追蹤記錄中醒目顯示對應的事件。

開發人員工具團隊期待收到您的意見回饋，瞭解您認為洞察資料是否實用、如何改善洞察資料，以及您在使用其他工具 (例如 PageSpeed Insights 和 Lighthouse) 時的體驗。歡迎前往 crbug.com/371170842 提供意見。

更輕鬆地找出過多版面配置位移

「版面配置位移」軌跡換上了全新外觀。版面配置變化現已以 (更顯眼的) 紫色鑽石標示，並根據時間軸上的相近程度進行分組。在「摘要」分頁中，您可以看到排班時間和相關叢集的時間表，以及時間、分數、元素和潛在問題。

此外，即時指標檢視畫面會收到「Layout shifts」(版面配置位移) 記錄，該記錄的分數及元素位於「Interactions」分頁旁。

Chromium 問題：369100729。

找出非合成的動畫

「動畫」軌現在會顯示非合成動畫的實用資訊：

• 根據對應的 CSS 屬性 (如有) 命名動畫。
• 在時間軸上以紅色三角形標示非合成的動畫。
• 在「摘要」分頁中顯示合成失敗的原因。

詳情請參閱「Stick to Compositor-Only Properties」以及「Manage Layer Count」。

Chromium 問題：41006273。

硬體並行功能移至感應器

「硬體並行性」設定已從「效能」面板移至更適當的位置：「感應器」面板。

Chromium 問題：371463665。

忽略匿名指令碼，並專注於堆疊追蹤中的程式碼

控制台中的堆疊追蹤記錄現在可正確偵測、忽略、折疊及 (如果展開) 灰掉來自略過清單檔案的畫面。先前，在展開的追蹤記錄中，函式名稱不會顯示為灰色。

您也可以開啟新的設定 (設定) >「忽略清單」>核取方塊「eval 或 Console 的匿名指令碼」，藉此將開發人員工具設為忽略來源網址的匿名指令碼。

此外，當您按一下滑鼠右鍵並另存為主控台記錄時，系統不會儲存「Show more/less」文字。

Chromium 問題：40279542、40945570、345248263。

元素 > 樣式：支援格線疊加層和適用 CSS 關鍵字關鍵字的 sideways-* 撰寫模式

「Elements」>「Styles」分頁現在支援下列功能：

• 可視區域中的格線疊加層現在會顯示 sideways-rl 和 sideways-lr 寫入模式的格線。
• 解決 CSS 層級關鍵字。基本上，這表示如果 inherit 是顏色，「Styles」分頁旁邊就會顯示顏色挑選器。

Chromium 問題：40280717、40706051、40501131。

Lighthouse 會在時間範圍模式和快照模式中稽核非 HTTP 網頁

Lighthouse 現在可以在時間範圍和快照模式中為非 HTTP 網頁產生報告。

無障礙設定

這個版本有下列無障礙功能改善項目：

• 在「來源」>「編輯器」中，只要按住「X」按鈕並按下 Enter 鍵或空格鍵，即可關閉含有開啟檔案的分頁。
• 在「效能」中，您現在可以選取追蹤記錄中的項目，然後按下空格鍵來開啟內容選單。
• 在「成效」部分，左側欄的「深入分析」分頁可使用鍵盤存取，而且可以「用 Tab 鍵瀏覽」。

Chromium 問題：372411090。

其他精選內容

這個版本包含多項重要修正和改善項目：

• 「效能」和「網路」面板之間的節流設定現在已可正確同步 (370332090)。
• 「Application」>「背景服務」>「推測載入」>「規則」現在有類似「來源」>「編輯器」的 {} 美化按鈕 (40279147)。
• 即時運算式：選取自動完成選項後，按下 Tab 鍵現在會退出編輯欄位，而不是縮排文字 (349939551)。
• 「元素」>「樣式」：anchor() 和 anchor-size() 支援新的語法，可讓您重新排列引數並省略 anchor-size() 方向 (343516786)。此外，修正了備用顯示方式 (365802559)。
• 網路：修正 GraphQL 預覽功能 (369931288)。
• 效能：現在會回報載入和處理追蹤記錄的增量進度。
• WebAuthn：現在會動態更新透過 signal* 方法修改的憑證 (368467199)。
• WebAssembly：現在，如果 WebAssembly 模組有可用的多個偵錯符號，且該模組正在使用中 (40879198、369515221)，畫面上就會顯示主控台的警告。
• 從「轉譯」分頁 328487897 中移除網站體驗核心指標重疊內容。
• 生成式 AI 功能現在不需要同步處理 Chrome 設定。

下載預覽管道

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

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

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

• 請透過 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序點選 more_vert 和 [更多選項] > [說明] > [回報開發人員工具問題] 回報開發人員工具問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

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