開發人員工具提供 AI 輔助面板，可透過與內建 AI 代理程式對話，協助您瞭解網站並修正問題。
「AI 輔助」面板採用 Gemini 技術，可執行下列操作：
- 專長是網頁開發。
- 可回答有關整個網頁的一般問題，並提供各種主題的具體洞察資料，包括但不限於樣式、網路、效能等。
- 自動縮小範圍並選取特定情境，供您討論，例如 DOM 元素、網路要求、效能追蹤事件等。
- 可執行自主動作，例如執行稽核及記錄效能追蹤記錄。
- 逐步說明動作和推論過程，並提供開發人員工具相關部分的連結，方便您點擊查看。
- 可建議程式碼變更，並根據洞察資料產生提示，供您的程式碼編寫代理程式執行。
透過 AI 輔助工具，您可以偵錯網站的樣式、網路、效能、來源等。
如要在「AI 輔助」面板中與 Gemini 進行有效對話，請瞭解如何開啟面板、輸入提示及控管對話流程。
開啟 AI 輔助面板
根據預設，系統會在導覽匣中開啟「AI 輔助」面板。
如要開啟面板，請按一下頂端主要工具列右側全域進入點的「AI 輔助」按鈕。
透過面板
您可以透過兩種方式，直接從「元素」、「網路」、「來源」或「效能」面板開啟面板，並選取對話內容：
按一下元素、網路要求、來源檔案或展開的效能深入分析旁邊的「使用 AI 偵錯」
按鈕。
在元素、要求、檔案或追蹤項目上按一下滑鼠右鍵，然後從「使用 AI 偵錯」內容選單中選取其中一個常見提示選項。
透過指令選單
如要從指令選單開啟 AI 輔助，請輸入 AI，然後執行「Show AI assistance」(顯示 AI 輔助) 指令，該指令旁邊會顯示「Drawer」(抽屜) 徽章。
透過「更多工具」選單
你也可以依序選取右上角的「設定」更多選項 >「更多工具」 >「AI 輔助」。
提示
開始新對話時，AI 輔助功能會提供範例提示，協助你快速上手。
按一下任一提示，即可預先填入面板底部的提示輸入欄位。
或者，在輸入欄位中輸入自己的提示或問題。
如要傳送提示，請按下 Enter 鍵，或點選輸入欄位右側的箭頭。
沒有脈絡的開放式提示
使用任意形式的對話方塊，即可提出更深入的開放式問題，無須提供背景資訊。例如：
How to use DevTools to debug accessibility?AI 輔助功能會先執行 Lighthouse 無障礙稽核，以便更準確地回應提示。
What are the slowest network requests on this page?AI 輔助會在「網路」面板中提供可疑要求清單和相關連結，只要按一下即可選取要求做為對話內容。
What performance issues exist on the page?AI 輔助會根據您選取的設定自動記錄效能追蹤記錄，以回答這個提示。
How do I use the Animation panel?或Where is the high contrast setting in DevTools?等提示可直接提供有關開發人員工具的協助。
開始對話後，AI 輔助功能會在對話空白時，根據你的動作智慧更新內容，並在你手動選取時尊重你的選擇。
提供脈絡資訊的提示
從面板開啟 AI 輔助時，系統會在對話方塊中選取相應的對話內容，方便你針對所選內容進行對話。
您隨時可以選取「元素」、「網路」、「效能」或「來源」中的元素、要求、追蹤項目或檔案，手動變更環境。
您也可以從「來源」面板複製檔案的部分內容，然後貼到對話中，詢問該內容的作用。
接著，請進一步瞭解 AI 輔助的對話流程。
對話流程
傳送提示詞後，系統就會開始與服務專員對話。為提供最符合您需求的資訊，代理程式會生成並執行呼叫網頁 API 的 JavaScript。
系統會逐步顯示代理程式進度。初始步驟狀態為 Investigating…。
隨著代理程式執行更具體的動作來回答提示，初始步驟標籤也會更新。
視您要偵錯的內容而定，代理程式也可能會在開發人員工具中執行動作，例如記錄效能追蹤或執行 Lighthouse 稽核。
代理逐步操作說明
代理程式生成提示的回覆後，初始步驟標籤會變更為「顯示代理程式逐步解說」或「顯示思考過程」，展開後即可在右側的側邊面板中，查看代理程式分析資料的步驟。
步驟如下：
小工具右上角有「顯示」按鈕，可帶您前往開發人員工具的相關部分。
後續提示
代理得出最終答案後，可能會建議後續提示。按一下任一選項即可繼續對話。
生成提示詞給程式設計代理
如要為您的程式設計代理產生提示，請按一下「複製到程式設計代理」。
代理程式會以精簡或人類可讀的 Markdown 格式，摘要說明發現和洞察結果，並提供可執行的提示，您可以將提示複製到剪貼簿，然後繼續使用所選的 AI 代理程式編碼。
已暫停的對話
AI 輔助功能可能會生成具有副作用的程式碼。發生這種情況時，系統會先暫停對話，再執行程式碼。
對話暫停時，請檢查代理程式建議的程式碼。按一下「play_arrow」 點選「繼續」即可繼續，或點選「取消」來防止執行。
代理程式會在開發人員工具中套用變更，但您可以設定工作區，讓開發人員工具將變更儲存至來源。
儲存工作區變更
連結工作區資料夾後，您可以將 AI 輔助建議的樣式變更儲存回電腦上的 CSS 來源檔案。
步驟如下：
-
或者，你也可以手動新增資料夾。
從「元素」面板發起即時通訊。
AI 輔助會根據提示修改 CSS。
AI 輔助可能會生成程式碼並暫停執行。檢查程式碼，然後按一下「繼續」，即可測試即時變更。
展開「未儲存的變更」部分，然後按一下「套用至工作區」。
在
diff中查看變更，然後按一下「全部儲存」。
如要瞭解這項工作流程，請參閱：
未提供答案
AI 輔助可能因各種原因無法提供答案。
如果您認為 AI 輔助應該可以討論您的提示，請回報錯誤。
對話記錄
開始對話後，後續的每個回覆都會根據你與 AI 先前的互動內容生成。
AI 輔助功能會儲存工作階段之間的對話記錄，因此即使重新載入開發人員工具或 Chrome，您還是可以存取先前的對話。
使用面板左上角的控制項，控管對話記錄。
開始進行新的測量
如要根據目前選取的對話內容發起新對話，請按一下「新增」按鈕。
繼續
如要繼續先前的對話，請按一下「記錄」按鈕，然後從內容選單中選取。
刪除
如要從記錄中刪除對話，請按一下「刪除」按鈕。
為答案評分及提供意見回饋
AI 輔助是實驗功能，因此，我們積極尋求您的意見回饋，瞭解如何提升答案品質和整體體驗。
為答案投票
使用答案下方的「喜歡」 和「不喜歡」 按鈕，評價答案。
檢舉答案
如要檢舉不當內容，請按一下投票按鈕旁的「檢舉」按鈕。