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

Sofia Emelianova
Sofia Emelianova

使用 Gemini 對 CSS 進行偵錯

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

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

「Ask AI」選單選項和對應的按鈕。

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

新的 AI 助理面板正在回答提示。

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

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

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

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

新的 AI 創新分頁。

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

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

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

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

效能面板改善

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

標註及分享成效結果

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

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

左側邊欄中的新註解分頁,以及註解事件、範圍和連線。

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

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

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

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

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

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

更新「版面配置變更」追蹤記錄和重新排列「摘要」分頁後的對照圖。

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

在即時指標檢視畫面中新增「版面配置變更」記錄前後的畫面。

Chromium 問題:369100729

找出非合成的動畫

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

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

軌道中動畫的命名前後狀態、標示未合成的動畫,以及顯示失敗原因。

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

Chromium 問題:41006273

硬體並行功能移至感應器

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

將「硬體並行處理」設定移至「感應器」面板前後的畫面。

Chromium 問題:371463665

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

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

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

改善堆疊追蹤中略過清單前後的差異。

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

Chromium 問題:4027954240945570345248263

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

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

  • 檢視區中的格線疊加畫面現在會為 sideways-rlsideways-lr 書寫模式顯示格線。
  • 解析 CSS 全域關鍵字。舉例來說,如果 inherit 是顏色,Styles 分頁會在旁邊顯示顏色挑選器。在 CSS 全域關鍵字解決前後的對照。

Chromium 問題:402807174070605140501131

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

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

在時間範圍和快照模式中,針對非 HTTP 網頁啟用稽核功能前後的畫面。

無障礙設定

這個版本包含下列無障礙功能改善措施:

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

Chromium 問題:372411090

其他精選內容

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

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

下載預覽管道

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

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

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

開發人員工具的新功能

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