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

使用 Gemini 對 CSS 進行偵錯

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

立即試用！在「元素」面板中，按一下元素的滑鼠右鍵，然後選取「詢問 AI」，或按一下元素旁邊的對應 按鈕。開發人員工具會開啟新的「AI 協助」面板。

新的面板會提示你啟用對應的設定。確認您符合規定，開啟設定切換鈕，然後返回「AI 協助」面板。系統會將您選取的元素做為內容。輸入關於元素的問題。

如要進一步瞭解如何最佳運用新資訊面板，請參閱「使用開發人員工具 AI 輔助功能的 5 個實用技巧」和「樣式 AI 輔助功能」。

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

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

您現在可以透過新的「設定」 > 「AI 創新」分頁，集中管理所有 AI 功能。這份說明文件列出重要注意事項、說明 AI 功能，並讓您個別開啟或關閉這些功能。

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

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

開發人員工具不再需要開啟 AI 功能的設定同步功能。因此，只要按一下滑鼠，即可使用先前發布的 管理中心深入分析，以及樣式設定 AI 輔助功能。

如果你已登入 Chrome，請依序前往「設定」 >「AI 技術創新」，開啟這些功能即可使用。

效能面板改善

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

標註及分享成效結果

「Performance」面板會在左側的展開式側欄中新增「Annotations」分頁，方便您在分享成效發現時，建立用於追蹤探索和協作的附註。

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

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

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

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

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

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

「版面配置變更」軌跡已換上新版外觀。版面配置變化現在會以 (更顯眼的) 紫色鑽石標示，並根據時間軸上的相近程度分組。在「摘要」分頁中，您可以看到排班時間和相關叢集的資訊，包括時間、分數、元素和潛在的肇因。

此外，直播指標檢視畫面會取得「互動」分頁旁的「版面配置變更」記錄，其中包含分數和元素。

Chromium 問題：369100729。

找出非合成的動畫

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

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

詳情請參閱「只使用合成器專屬屬性，並管理圖層數量」。

Chromium 問題：41006273。

硬體並行功能移至感應器

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

Chromium 問題：371463665。

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

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

您也可以開啟新的設定 >「忽略清單」 >「勾選方塊」「來自 eval 或控制台的匿名指令碼」，將 DevTools 設為忽略沒有來源網址的匿名指令碼。

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

Chromium 問題：40279542、40945570、345248263。

「元素」>「樣式」：支援 sideways-* 寫入模式，適用於格線疊加和 CSS 全域關鍵字

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

• 檢視區中的格線疊加畫面現在會為 sideways-rl 和 sideways-lr 書寫模式顯示格線。
• 解析 CSS 全域關鍵字。實際上，這表示如果 inherit 是顏色，樣式分頁會在旁邊顯示顏色挑選器。

Chromium 問題：40280717、40706051、40501131。

在時間範圍模式和快照模式中，針對非 HTTP 網頁執行 Lighthouse 稽核

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

無障礙設定

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

• 在「來源」 >「編輯器」中，只要將焦點放在 X 按鈕，然後按下 Enter 或 Space，即可關閉含有開啟檔案的分頁。
• 在「Performance」中，您現在可以選取追蹤記錄中的項目，然後按下 空格鍵 開啟內容選單。
• 在「成效」頁面中，左側側欄的「洞察」分頁可透過鍵盤存取，也可以「透過分頁瀏覽」。

Chromium 問題：372411090。

其他精選內容

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

• 限制設定現在已在「Performance」和「Network」面板之間正確同步 (370332090)。
• 應用程式 > 背景服務 > 推測負載 > 規則 現在有 {} 精美列印按鈕，類似於「來源」 >「編輯器」 (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」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具的新功能

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