開發人員工具提供 AI 輔助面板，可透過與 AI 代理程式對話，協助您瞭解網站並修正問題。
透過 AI 輔助，您可以對網站的樣式、網路、效能和來源進行偵錯。
如要在「AI 輔助」面板中與 Gemini 進行有效對話，請瞭解如何開啟面板、輸入提示及控管對話流程。
開啟 AI 輔助面板
「AI 輔助」面板會在抽屜式選單中開啟。
如要開啟面板，請按一下頂端主要工具列右側全域進入點的「AI 輔助」按鈕。
您也可以在「元素」、「網路」、「來源」或「效能」面板中，對元素或要求按一下滑鼠右鍵，然後選取「詢問 AI」，直接開啟面板。
透過指令選單
如要從指令選單開啟 AI 輔助，請輸入 AI，然後執行「Show AI assistance」(顯示 AI 輔助) 指令，該指令旁邊會顯示「Drawer」(抽屜) 徽章。
從「更多工具」選單
你也可以依序選取右上角的「設定」更多選項 >「更多工具」 >「AI 輔助」。
提示
開始新對話時，AI 輔助功能會提供範例提示，協助你快速上手。
按一下任一提示，即可預先填入面板底部的提示輸入欄位。
或者，在輸入欄位中自行輸入提示或問題。
如要傳送提示，請按下 Enter 鍵，或點選輸入欄位右側的箭頭。
您可以在免費的對話方塊中提出較高層次的問題，例如「如何使用開發人員工具偵錯無障礙功能？」或「哪些網路要求速度緩慢？」，也可以從「來源」面板複製部分檔案，然後貼到對話方塊中，詢問檔案的作用。
AI 輔助造型
使用「AI 輔助」面板設定樣式，瞭解網站的整體版面配置、特定元素樣式，並取得 AI 生成的 CSS 錯誤修正。
從「元素」面板開啟 AI 輔助
如要從「元素」面板開啟 AI 輔助，請檢查 DOM 節點，然後在節點上按一下滑鼠右鍵，並選取「詢問 AI」選項。
以這種方式開啟 AI 輔助時，系統會預先選取檢查的 DOM 元素，做為對話的內容元素。
或者，點選懸停 DOM 節點時顯示的浮動按鈕。
對話情境
與 AI 輔助的對話一律與目前檢查的元素相關，也就是「元素」面板 DOM 樹狀結構中最後選取的元素。面板左下角會顯示這個元素的參照。
使用目前元素旁的元素挑選器變更環境， 或從「元素」面板 DOM 樹狀結構中選取。
選取所需內容後，即可擷取可視區域的螢幕截圖，並提交至對話。按一下對話輸入欄旁的「photo_camera」「擷取螢幕截圖」按鈕。
你可以使用螢幕截圖為提示提供額外的視覺背景資訊，例如檢查所有可見按鈕是否間距相同。
雖然目前檢查的元素是對話的基礎，但 AI 輔助可存取所有網路 API，從檢查的網頁收集更多資訊。包括使用 document.querySelector 查詢其他元素，或評估計算樣式。
AI 輔助網路
使用網路的「AI 輔助」面板，瞭解網站傳送的要求。
從「網路」面板開啟 AI 輔助
如要從「網路」面板開啟 AI 輔助，請在要求上按一下滑鼠右鍵，然後選取「詢問 AI」選項。
以這種方式開啟AI 輔助時，系統會預先選取所選網路要求，做為對話的背景資訊。
或者，點選您將游標懸停在網路要求上時，旁邊顯示的浮動按鈕。
對話情境
與 AI 輔助的對話內容與目前在「網路」面板要求清單中選取的網路要求相關。面板左下角會顯示這項要求的參照。
如要變更內容，請在「網路」面板中按一下其他要求。
AI 輔助功能會使用要求網址、標頭、時間和要求發起者鏈結來回答問題。
重要事項：系統會自動遮蓋可能含有私密資訊的標題。
開始對話後，按一下 Analyzing network data 資訊方塊中的「展開」按鈕，即可查看 AI 輔助功能使用的原始資料。
AI 輔助功能，提升成效
使用「AI 輔助」面板瞭解效能，並查看在「效能」面板中記錄的效能設定檔。
從「成效」面板開啟 AI 輔助
如要從「效能」面板開啟 AI 輔助，請先記錄效能設定檔。
視要調查的內容而定，您可以從個別成效洞察資料或成效追蹤檢視畫面中的活動，開啟「AI 輔助」面板。
提供效能深入分析資料
在「洞察」分頁中開啟洞察，例如「LCP by phase」，然後按一下「Ask AI」按鈕。
開發人員工具會開啟「AI 輔助」面板，並預先選取這項效能洞察資料做為對話內容。
效能追蹤記錄檢視畫面
如要從追蹤檢視畫面開啟 AI 輔助，請在活動上按一下滑鼠右鍵，然後選取「Ask AI」(詢問 AI) 選項。
在本例中，這項活動會預先選取為對話的背景資訊。
對話情境
選取的成效活動會做為與 AI 輔助對話的背景資訊。面板左下角會顯示這項活動的參照。
提供效能深入分析資料
如果您點選「詢問 AI」來取得特定成效洞察，系統會將該洞察選為背景資訊。 如要變更選取項目，請按一下其他洞察資料下方的「詢問 AI」。
開始對話後，展開 Analyzing insight: ... 專區，即可查看 AI 輔助功能使用的原始資料。
追蹤記錄檢視畫面
您可以選取成效追蹤記錄中的不同項目，系統會相應變更內容。
AI 輔助功能會使用所選通話樹狀結構的時間資訊，回答您的提示。
開始對話後，按一下 Analyzing call tree 資訊方塊中的 按鈕，即可查看 AI 輔助使用的原始資料。
AI 輔助來源
使用「AI 輔助」面板的來源，瞭解網站載入及使用的檔案。
從「來源」面板開啟 AI 輔助
如要從「來源」面板開啟 AI 輔助，請在檔案上按一下滑鼠右鍵，然後選取「詢問 AI」選項。
以這種方式開啟AI 輔助時，系統會預先選取所選檔案，做為對話的背景資訊。
或者，將滑鼠游標懸停在檔案上時，按一下浮動按鈕。
對話情境
系統會將所選檔案做為與 AI 輔助對話的脈絡資訊。 面板左下角會顯示這個檔案的參照。
如要變更脈絡，請按一下「來源」面板中的其他檔案。
AI 輔助會使用所選檔案的名稱、網址、來源對應 (如有) 和內容來回答問題。
開始對話後，按一下 Analyzing file 資訊方塊中的 按鈕，即可查看 AI 輔助功能使用的原始資料。
對話流程
傳送提示詞後，即可開始與造型設計代理對話。為提供最符合您需求的資訊，代理程式會生成並執行呼叫 Web API 的 JavaScript。系統會逐步顯示代理程式進度。初始步驟狀態為 Investigating…。
隨著代理程式執行更具體的動作來解決問題，步驟標籤也會更新。
代理程式得出最終答案後，答案會顯示在調查步驟下方，包括後續提示的建議。
按一下任一建議提示，即可繼續對話。按一下 。
調查步驟，進一步瞭解 AI 輔助功能在幕後執行的操作。
展開進度晶片後，您會看到代理程式執行的程式碼及其傳回值。複製執行的程式碼以供進一步使用，例如使用控制台面板執行程式碼。
已暫停的對話
AI 輔助功能可能會生成具有副作用的程式碼。發生這種情況時，系統會先暫停對話，再執行程式碼。
對話暫停時，請檢查代理程式建議的程式碼。按一下「play_arrow」 繼續：繼續執行作業。取消：停止執行作業。
儲存工作區變更
連結工作區資料夾後，您可以將 AI 輔助建議的樣式變更儲存回電腦上的 CSS 來源檔案。
步驟如下：
-
或者，你也可以手動新增資料夾。
從「元素」面板發起即時通訊。
AI 輔助會根據提示修改 CSS。
AI 輔助可能會生成程式碼並暫停執行。檢查程式碼，然後按一下「繼續」，即可測試即時變更。
展開「未儲存的變更」部分，然後按一下「套用至工作區」。
在
diff中查看變更，然後按一下「全部儲存」。
如要瞭解這項工作流程，請參閱：
未提供答案
AI 輔助可能因各種原因無法提供答案。
如果您認為 AI 輔助應該可以討論您的提示，請回報錯誤。
對話記錄
開始對話後，後續的每個回覆都會根據你與 AI 先前的互動內容生成。
AI 輔助功能會儲存工作階段之間的對話記錄，因此即使重新載入開發人員工具或 Chrome，您仍可存取先前的對話。
使用面板左上角的控制項，控管對話記錄。
開始進行新的測量
如要使用目前選取的對話內容發起新對話，請按一下「新增」按鈕。
繼續
如要繼續先前的對話，請按一下「記錄」按鈕，然後從內容選單中選取。
刪除
如要從記錄中刪除對話，請按一下「刪除」按鈕。
為答案評分及提供意見回饋
AI 輔助是實驗功能，因此，我們積極尋求您的意見回饋，瞭解如何提升答案品質和整體體驗。
為答案投票
使用答案下方的「喜歡」 和「不喜歡」 按鈕，為答案評分。
檢舉答案
如要檢舉不當內容，請按一下投票按鈕旁的「檢舉」按鈕。