瞭解 Chrome 開發人員工具中的 AI 輔助功能用途，以及如何在樣式、效能等方面支援您的偵錯工作流程。

閱讀說明文件

… 用於設定樣式

進一步瞭解元素的版面配置，以及如何透過提示進行修改：

How is this element laid out?

這是 Flex 項目嗎？是否為絕對位置？是否屬於格狀區塊？AI 輔助功能可概述元素樹狀結構的版面配置，並提供程式碼範例，說明如何修改版面配置。

動畫無法運作嗎？請 AI 助理協助您查看動畫元素：

Why is my animation not working?

AI 輔助功能會檢查相關的 CSS 屬性、事件監聽器等，找出可能的問題，並提供程式碼範例來修正問題。

示範

沒有可用於測試 AI 造型輔助功能的專案嗎？歡迎前往開發人員工具 Hangar 試用！

找出正確的提示，修正長方形輪子、損壞的位置燈和冒煙的引擎，讓 DevTools 飛機再次起飛。

探索示範內容

… 網路

要求和回應標頭通常包含一目瞭然的重要資訊。請 AI 助理說明這些內容： 

Does this request have any notable headers?

您是否曾經有過這種感覺：某項要求耗費的時間過長，但您不太確定原因為何？請 AI 助理為你調查：

Why is this request taking so long?

AI 助理會調查記錄的時間，並在發現任何異常時通知你。

… 以提升效能

找出網站速度緩慢的根本原因並不容易。無法瞭解成效報表中的高峰值嗎？AI 協助功能可為您簡化呼叫樹狀圖：

Anything to improve in this call tree?

… 來源

您很少會編寫網站使用的所有程式碼 - 無法瞭解為何載入特定資源，以及該資源的用途？AI 輔助功能可協助您：

What is this file used for?

無論是數據分析指令碼、社群媒體小工具或 A/B 測試程式庫，AI 輔助功能都會深入探究並找出問題。