與 AI 輔助功能對話

開發人員工具提供 AI 輔助面板，可透過與 AI 代理程式對話，協助您瞭解網站並修正問題。

透過 AI 輔助，您可以對網站的樣式、網路、效能和來源進行偵錯。

如要在「AI 輔助」面板中與 Gemini 進行有效對話，請瞭解如何開啟面板、輸入提示及控管對話流程。

開啟 AI 輔助面板

AI 輔助面板會在抽屜式選單中開啟。

如要開啟面板，請按一下頂端主要工具列右側「全域進入點」上的「AI 輔助」按鈕。

開發人員工具工具列右上方的 AI 輔助按鈕。

從面板

您可以透過兩種方式，直接從「元素」、「網路」、「來源」或「效能」面板開啟面板，並選取對話內容：

  • 按一下元素、網路要求、來源檔案或展開的效能洞察資訊旁的「使用 AI 偵錯」AI 輔助圖示 按鈕。

    元素旁邊的「使用 AI 偵錯」按鈕。

  • 在元素、要求、檔案或追蹤項目上按一下滑鼠右鍵，然後從「使用 AI 偵錯」內容選單中選取其中一個常見提示選項。

    元素內容選單中的「使用 AI 偵錯」選項。

透過指令選單

如要從指令選單開啟 AI 輔助，請輸入 AI，然後執行「Show AI assistance」(顯示 AI 輔助) 指令，該指令旁邊會顯示「Drawer」(抽屜) 徽章。

開啟的指令選單，並醒目顯示「顯示 AI 輔助」選項。

透過「更多工具」選單

你也可以依序選取右上角的「設定」更多選項 >「更多工具」 >「AI 輔助」。

開啟「更多工具」選單。

提示

開始新對話時，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 輔助時，系統會在對話方塊中選取相應的對話內容，方便你針對所選內容進行對話。

已選取對話情境。

您隨時可以選取「元素」Elements、「網路」Network、「效能」Performance或「來源」Sources中的元素、要求、追蹤項目或檔案，變更環境。

您也可以從「來源」面板複製檔案的部分內容，然後貼到對話中，詢問該內容的作用。

接著，進一步瞭解如何透過不同面板使用 AI 輔助功能。

AI 輔助造型

使用「AI 輔助」面板設定樣式，瞭解網站的整體版面配置、特定元素樣式，並取得 AI 生成的 CSS 錯誤修正。

從「元素」面板開啟 AI 輔助

如要從「元素」面板開啟 AI 輔助，請檢查 DOM 節點，然後在節點上按一下滑鼠右鍵，並選取「詢問 AI」選項。

醒目顯示「詢問 AI」的元素內容選單。

以這種方式開啟 AI 輔助時，系統會預先選取檢查的 DOM 元素，做為對話的內容元素。

或者，點選懸停在 DOM 節點上的浮動按鈕。

附加至 DOM 節點的浮動按鈕。

對話情境

與 AI 輔助的對話一律與目前檢查的元素相關，也就是「元素」面板 DOM 樹狀結構中最後選取的元素。面板左下角會顯示這個元素的參照。

AI 輔助面板，其中醒目顯示背景元素。

使用目前元素旁的元素挑選器變更環境， 或從「元素」面板 DOM 樹狀結構中選取。

選取所需內容後，即可擷取可視區域的螢幕截圖，並提交給對話。按一下對話輸入欄位旁的「photo_camera」「擷取螢幕截圖」按鈕。

「擷取螢幕截圖」按鈕，以及輸入欄位中附加的螢幕截圖。

你可以使用螢幕截圖為提示提供額外的視覺背景資訊，例如檢查所有可見按鈕是否間距相同。

雖然目前檢查的元素是對話的基礎，但 AI 輔助可存取所有網路 API，從檢查的網頁收集更多資訊。包括使用 document.querySelector 查詢其他元素，或評估計算樣式。

AI 輔助網路

使用網路的「AI 輔助」面板，瞭解網站傳送的要求。

從「網路」面板開啟 AI 輔助

如要從「網路」面板開啟 AI 輔助，請在要求上按一下滑鼠右鍵，然後選取「詢問 AI」選項。

要求內容選單，當中醒目顯示「詢問 AI」。

以這種方式開啟AI 輔助時，系統會預先選取所選網路要求，做為對話的背景資訊。

或者，點選您將游標懸停在網路要求上時，旁邊顯示的浮動按鈕。

附加至網路要求的浮動按鈕。

對話情境

與 AI 輔助的對話內容與目前在「網路」面板要求清單中選取的網路要求相關。面板左下角會顯示這項要求的參照。

AI 輔助面板，並醒目顯示內容要求。

如要變更內容，請在「網路」面板中按一下其他要求。

AI 輔助功能會使用要求網址、標頭、時間和要求發起者鏈結來回答問題。

重要事項：系統會自動遮蓋可能含有私密資訊的標題。

開始對話後，按一下 Analyzing network data 資訊方塊中的「展開」按鈕，即可查看 AI 輔助功能使用的原始資料。

AI 輔助面板，並醒目顯示「分析網路資料」資訊方塊。

AI 輔助功能，提升成效

使用「AI 輔助」面板瞭解效能，並查看在「效能」面板中記錄的效能設定檔。

從「成效」面板開啟 AI 輔助

如要從「效能」面板開啟 AI 輔助，請先記錄效能設定檔。

視要調查的內容而定，您可以從個別成效洞察資料或成效追蹤檢視畫面中的活動，開啟「AI 輔助」面板。

提供效能深入分析資料

在「洞察」分頁中開啟洞察，例如「LCP by phase」，然後按一下「Ask AI」按鈕。

LCP 效能洞察資訊下方，醒目顯示「詢問 AI」按鈕。

開發人員工具會開啟「AI 輔助」面板，並預先選取這項效能洞察資料做為對話內容。

效能追蹤記錄檢視畫面

如要從追蹤檢視畫面開啟 AI 輔助，請在活動上按一下滑鼠右鍵，然後選取「Ask AI」(詢問 AI) 選項。

醒目顯示「詢問 AI」的活動內容選單。

在這種情況下，系統會預先選取這項活動做為對話的背景資訊。

對話情境

選取的成效活動會做為與 AI 輔助對話的背景資訊。面板左下角會顯示這項活動的參照。

AI 輔助面板，並醒目顯示背景活動。

提供效能深入分析資料

如果您點選「詢問 AI」來取得特定成效洞察，系統會將該洞察選為背景資訊。 如要變更選取項目，請按一下其他洞察資料下方的「詢問 AI」。

將 LCP 效能洞察資料做為 AI 輔助的對話情境。

開始對話後，展開 Analyzing insight: ... 專區即可查看 AI 輔助功能使用的原始資料。

AI 輔助面板，並醒目顯示情境洞察。

追蹤記錄檢視畫面

您可以選取成效追蹤記錄中的不同項目，系統會相應變更內容。

AI 輔助功能會使用所選通話樹狀結構的時間資訊，回答您的提示。

開始對話後，按一下 Analyzing call tree 資訊方塊中的 按鈕，即可查看 AI 輔助使用的原始資料。

AI 輔助面板，醒目顯示「正在分析呼叫樹狀結構」晶片。

AI 輔助來源

使用「AI 輔助」面板的來源，瞭解網站載入及使用的檔案。

從「來源」面板開啟 AI 輔助

如要從「來源」面板開啟 AI 輔助，請在檔案上按一下滑鼠右鍵，然後選取「詢問 AI」選項。

醒目顯示「詢問 AI」的檔案內容選單。

開啟這類 AI 輔助功能時，系統會預先選取所選檔案，做為對話的背景資訊。

或者，將滑鼠游標懸停在檔案上時，按一下浮動按鈕。

附加至懸停檔案的浮動按鈕。

對話情境

系統會將所選檔案做為與 AI 輔助對話的脈絡。 面板左下角會顯示這個檔案的參照。

AI 輔助面板，其中醒目顯示結構定義檔案。

如要變更脈絡，請按一下「來源」面板中的其他檔案。

AI 輔助會使用所選檔案的名稱、網址、來源對應 (如有) 和內容回答問題。

開始對話後，按一下 Analyzing file 資訊方塊中的 按鈕，即可查看 AI 輔助功能使用的原始資料。

醒目顯示「正在分析檔案」方塊的 AI 輔助面板。

對話流程

傳送提示詞後，即可開始與造型設計代理對話。為提供最符合您需求的資訊，代理程式會生成並執行呼叫 Web API 的 JavaScript。系統會逐步顯示代理程式進度。初始步驟狀態為 Investigating…。

對話開始後的 AI 輔助面板。

隨著代理程式執行更具體的動作來解決問題，步驟標籤也會隨之更新。

代理程式得出最終答案後，答案會顯示在調查步驟下方，包括後續提示的建議。

AI 輔助面板，顯示 AI 生成的答案。

按一下任一建議提示，即可繼續對話。按一下 。

調查步驟，進一步瞭解 AI 輔助功能在幕後執行的操作。

AI 輔助面板，對話步驟已展開。

展開進度晶片後，您會看到代理程式執行的程式碼及其傳回值。複製執行的程式碼以供進一步使用，例如使用控制台面板執行程式碼。

已暫停的對話

AI 輔助功能可能會生成具有副作用的程式碼。發生這種情況時，系統會先暫停對話，再執行程式碼。

AI 輔助面板，對話已暫停。

對話暫停時，請檢查代理程式建議的程式碼。按一下「play_arrow」 點選「繼續」即可繼續，或點選「取消」來防止執行。

儲存工作區變更

連結工作區資料夾後，您可以將 AI 輔助建議的樣式變更儲存回電腦上的 CSS 來源檔案。

步驟如下：

  1. 首先，請產生中繼資料檔案，並連結工作區資料夾。

    或者，你也可以手動新增資料夾。

  2. 從「元素」面板發起即時通訊。

  3. AI 輔助會根據提示修改 CSS。

  4. AI 輔助可能會生成程式碼並暫停執行。檢查程式碼，然後按一下「繼續」，即可測試即時變更。

  5. 展開「未儲存的變更」部分，然後按一下「套用至工作區」。

  6. 在 diff 中查看變更，然後按一下「全部儲存」。

如要瞭解這項工作流程，請參閱：

未提供答案

AI 輔助可能因各種原因無法提供答案。

AI 輔助面板，對話遭拒。

如果您認為 AI 輔助應該可以討論您的提示，請回報錯誤。

對話記錄

開始對話後，後續的每個回覆都會根據你與 AI 先前的互動內容生成。

AI 輔助功能會儲存工作階段之間的對話記錄，因此即使重新載入開發人員工具或 Chrome，您仍可存取先前的對話。

使用面板左上角的控制項，控管對話記錄。

AI 輔助面板，並醒目顯示記錄控制選項。

開始進行新的測量

如要使用目前選取的對話內容發起新對話，請按一下「新增」按鈕。

繼續

如要繼續先前的對話，請按一下「記錄」按鈕，然後從內容選單中選取。

刪除

如要從記錄中刪除對話，請按一下「刪除」按鈕。

為答案評分及提供意見回饋

AI 輔助是實驗功能，因此，我們積極尋求您的意見回饋，瞭解如何提升答案品質和整體體驗。

AI 輔助面板，醒目顯示評分控制選項。

為答案投票

使用答案下方的「喜歡」 和「不喜歡」 按鈕，評價答案。

檢舉答案

如要檢舉不當內容，請按一下投票按鈕旁的「檢舉」按鈕。