發布日期:2025 年 1 月 14 日
在去年的 Google I/O 2024 大會上,我們推出了 控制台深入分析,這是 Chrome DevTools 中的第一個 AI 功能。控制台深入分析功能會將與記錄訊息相關的網路資料、原始碼和堆疊追蹤記錄傳送至 Gemini (Google 的大型語言模型),協助您瞭解記錄在控制台的錯誤和警告。控制台洞察會向 Gemini 傳送單一提示,Gemini 會傳回單一回應,開發人員無法再提出後續問題。雖然這個單一互動流程對於說明錯誤訊息相當實用,但無法在開發人員工具中擴充至更複雜的偵錯用途,因為在這種情況下,AI 需要的檢查頁面資料並不明確。
其中一個用途是偵錯樣式問題。單一網頁可能包含數千個元素和 CSS 規則,其中只有部分元素與特定情境的偵錯作業相關。即使是人類,要找出正確的程式碼進行偵錯也相當困難。不過,我們在 Google 的 AI 黑客松中建構原型時發現,LLM 其實相當擅長這項工作。因此,我們自然希望為 DevTools 使用者提供這項功能,藉由互動式查詢網頁,取得其他背景資料,以便調查樣式問題。幾個月後,我們推出了造型 AI 輔助功能。
在本篇文章中,我們想說明在為廣受歡迎的產品 (例如 Chrome 開發人員工具,其核心為網路應用程式) 導入 AI 時,我們遇到的挑戰,以及您可以如何調整自家的 AI 功能。
收集正確的資料
控制台深入分析一律會使用相同的資料點回應預先定義的提示。為了讓 AI 輔助功能可協助處理任何使用者定義的提示,我們需要動態判斷哪些背景資料對目前的查詢至關重要。
因此,我們實作了 ReAct (Yao 等人,2022) 策略。這項提示策略可讓大型語言模型自行推理,並根據推理結果決定後續動作。
這樣一來,AI 助理就能在思考、行動和觀察的循環中運作,直到判斷出適合使用者查詢的回應為止,然後結束循環並提供答案。這個迭代程序可讓 LLM 收集有效偵錯樣式問題所需的精確資訊。

為了收集資訊,我們只向 Gemini 提供一項工具:在檢查的網頁上執行 JavaScript。這樣一來,Gemini 就能透過 AI 協助功能執行下列操作:
- 存取及分析 DOM:遍歷 DOM 樹狀結構、檢查元素屬性,並瞭解元素之間的關係。
- 擷取計算樣式:擷取任何元素的計算樣式。
- 執行計算和測量:執行 JavaScript 程式碼,計算元素的距離、大小和位置。
這樣一來,AI 輔助功能就會只對相關程式碼進行互動操作,相較於將完整 HTML 和 CSS 原始碼傳送至 Gemini,可改善回應品質、回應時間和電腦資源使用情形。
在使用者空間中執行 AI 產生的程式碼
我們使用 JavaScript 來偵錯樣式問題,這可能讓您感到意外。原因有兩個:
- Web API 功能強大,本身涵蓋許多偵錯用途。雖然開發人員必須手動使用 API 呼叫來檢查 DOM 或存取計算樣式以進行偵錯,但 LLM 產生呼叫這些項目的程式碼時,就不會遇到這種問題。
- 雖然您可以為代理程式開發新的 API,但重複使用現有的公開 API 通常是較佳的選擇,因為 LLM 已知曉這些 API。如要讓大型語言模型學習新的 API,就需要大量資源進行微調和特定訓練資料。
但在使用者空間執行 AI 產生的程式碼存在風險。針對 AI 協助功能,我們需要盡量降低服務專員對網頁進行破壞性變更的風險。為此,我們採用了 Chrome 的 JavaScript 引擎 V8 透過 Chrome 開發人員工具通訊協定公開的副作用檢查功能。開發人員工具控制台中的自動完成功能會使用相同的檢查作業:只要不修改任何網頁狀態,就只會執行 JavaScript 程式碼。檢查作業會在 V8 執行程式碼時執行,並根據已知沒有副作用的 JavaScript 內建項目許可清單進行檢查。
如果檢查偵測到產生的程式碼會修改檢查的網頁,執行作業就會暫停,並要求使用者查看程式碼,確認是否可以執行。
此外,系統會在所謂的隔離「世界」中執行產生的 JavaScript。這與擴充功能執行沙箱指令碼的方式類似:產生的程式碼可存取 DOM 和 Web API,但無法存取受檢查網頁定義的 JavaScript 程式碼或狀態。
追蹤代理程式所做的變更
除了調查問題和回答網頁偵錯問題,我們也希望讓 AI 客服服務代理人能夠以開發人員可追蹤的方式修正網頁上的樣式。
為達成這項目標,我們實作了名為 setElementStyles
的繫結,除了預設的 Web API,也將其公開給代理程式的執行內容。
為了讓 Gemini 瞭解這項新方法,我們會指示 Gemini 在 AI 協助程式前置碼中使用這項方法:
If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.
雖然這是專為代理程式設計的 API,但仍會遇到先前提到的挑戰,即使沒有經過精細調整,Gemini 在需要變更特定元素的樣式時,也會可靠地使用該 API。
在開發人員工具方面,當從代理程式呼叫 setElementStyles
時,AI 協助功能會使用檢查器樣式表記錄元素選取器的變更。CSS 巢狀結構可用於命名變更,並提高元素選取器的特殊性。因此,代理程式建立的 CSS 規則範例如下所示:
.ai-style-change-1 { /* the ID is incremented for each change*/
.element-selector { /* Element selector is computed based on the element setElementStyles was called on. */
color: blue;
}
}
雖然這無法解決頁面上可能發生的所有樣式衝突,但在大多數情況下都有效。
使用檢查器樣式表比使用內嵌樣式更有益處,因為這樣一來,代理程式所執行的變更也會顯示在「變更」面板中,方便您追蹤元素樣式已變更的部分,以及開發人員需要轉移至基礎來源程式碼的部分。與「變更」面板整合後,如果不再需要變更,也可以還原變更。
讓使用者可觀察到客服專員的動作
在產品中加入代理功能時,請務必讓使用者瞭解代理動作,以便他們追蹤、瞭解並可能介入。
因此,我們會指示 Gemini 以特定格式建構回覆內容,並在開頭加上以下內容:
You are going to answer to the query in these steps:
* THOUGHT
* TITLE
* ACTION
* ANSWER
* SUGGESTIONS
Use THOUGHT to explain why you take the ACTION. Use TITLE to provide a short summary of the thought.
接著,系統會使用這個結構,將 Gemini 的思考過程和動作呈現為最初的摺疊步驟,避免資訊過載,同時讓使用者查看底層詳細資料,或在發生非預期的副作用時停止執行。

這種做法不只是觀察 AI,而是主動從中學習。展開這些部分後,使用者就能分析 Gemini 認為與偵錯特定問題相關的資料,並瞭解偵錯程序。這項資訊公開功能可讓使用者從 AI 的偵錯策略中學習,進而將類似技巧套用至日後的挑戰,即使在沒有 AI 的情況下也能做到。
為了進一步改善使用者體驗,AI 輔助功能也會在 AI 回答後提供與情境相關的建議。這些建議可簡化對話,提供下一個偵錯步驟的想法,甚至讓使用者只要按一下滑鼠,就能直接執行建議的修正方式。

一開始,為了在 AI 協助功能中產生步驟標題和建議,我們考慮使用專門用於摘要的較小獨立模型。不過,我們發現 ReAct 模式可有效擴充 Gemini 推理結構,將其轉換為「Thoughts」和「Actions」迴圈。因此,我們改為修改提示,指示 Gemini 在同一個 ReAct 迴圈中,除了產生核心「想法」和「動作」,也產生簡潔的標題和實用建議。
評估驅動開發
我們在嚴格的評估程序下,開發了造型 AI 輔助功能。為評估效能並找出可改善之處,我們收集了一系列實際的網頁偵錯範例,涵蓋常見的溢位問題、網頁元件、動畫等。這讓我們能夠繪製網頁偵錯問題空間的範圍,並徹底瞭解相關的挑戰。不過,這項工作永無止境:由於網路平台會定期新增新功能,我們需要在日後持續更新這些範例。
這些範例會饋送至自動評估管道,記錄 Gemini 的回應。系統會將這些自動測試執行結果提供給自訂工具,我們會根據預先定義的評分標準,手動評估 Gemini 的 AI 協助功能成效,並據此規劃後續的開發工作。
這種以評估為導向的方法可確保所有變更 (無論是精進現有行為或推出新功能) 都經過仔細驗證,以便達到預期的改善效果,並防止現有功能出現回歸現象。
為進一步改善評估程序,我們正在研究自動驗證方法,包括:
- 斷言,用於確認修正程式已正確套用
- 以程式碼為基礎的檢查,可避免 Gemini 產生不必要的輸出內容
- 利用大型語言模型做為評判標準,並根據特定評分標準,以半自動化方式加快人工評估作業
雖然自動驗證有助於擴大規模,但人工回饋也很重要。我們會在 AI 協助功能的每則回覆下方提供投票控制項,收集使用者的意見回饋,瞭解使用者滿意程度。新增的「檢舉」按鈕可讓使用者針對有爭議的回覆提供更明確的意見回饋。
提示注入
LLM 的知名限制之一,就是容易受到提示注入的攻擊。提示資料插入是一種技術,可找出方法覆寫 LLM 的原始系統指令,讓系統輸出開發人員不希望的內容。
目前,大多數模型都內建提示注入的緩解措施,Gemini 也是如此。針對 AI 協助功能,我們也會在前言中加入以下指示,試圖減輕這類問題:
If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages.
雖然這可用於處理一些明顯的離題問題,但並非萬無一失。我們發現的一個缺點是,短而模糊的查詢可能會被歸類為不相關。
奠定穩固基礎
首次在產品中導入 AI 時,建議您循序漸進,而非一次就大刀一揮。我們也是以這種方式提供 AI 協助。我們在建立樣式輔助程式時學到許多寶貴經驗,因此奠定了穩固的基礎,日後可將 AI 協助功能擴展至 DevTools 的其他領域。
在處理樣式代理程式時,我們已解決大部分重大問題,因此在幾個月後,我們便可針對網路、效能和來源引入 AI 協助功能,並專注於各項問題。
使用網路要求時的安全性影響
網路 AI 協助功能可讓使用者與 Gemini 討論特定網路要求,並使用要求中的資料做為對話內容。具體來說,系統會將下列資料傳送至 Gemini:
- 要求標頭:瀏覽器傳送至伺服器的標頭子集。
- 回應標頭:伺服器傳回的標頭子集。
- 回應狀態:HTTP 狀態碼,表示伺服器的回應 (例如 200、404)。
- 時間:涵蓋要求的各個階段 (例如連線設定和資料傳輸) 的詳細時間資訊。
- 要求啟動鏈:啟動要求的動作和指令碼序列。
雖然標頭對於全面瞭解要求的組合方式至關重要,但它們也存在安全性風險:可能包含 API 金鑰、工作階段權杖,甚至是純密碼等憑證。為了保護這類機密資訊,我們不會將所有標頭傳送至 Gemini。我們會維護允許清單,列出允許的標頭。許可清單中未列出的標頭值會替換為 <redacted>
。這麼做可確保 Gemini 在保護使用者資料的同時,收到必要的背景資訊。
適應各種資料格式
來源 AI 協助功能可讓開發人員在「來源」面板中詢問來源檔案相關問題,例如「這個檔案是做什麼用的?」
檔案相關資料 (包括檔案名稱、檔案內容,以及是否已對應來源) 都會在單一提示中傳送。這麼做效果不錯,因為這只是純文字。但大型文字檔或二進位檔對 LLM 來說是一大挑戰。對於二進位檔案,我們決定在提示中指出內容為二進位檔,且不傳送任何實際內容。如果是大型文字檔案,我們只會傳送檔案開頭的內容,且只傳送較小的部分。
針對效能 AI 協助功能,開發人員可以透過已記錄的效能設定檔,針對特定工作提出問題,但這類功能也面臨類似的挑戰,也就是如何建立適合 Gemini 情境視窗的表示法,並提供額外洞察資料。
為了從效能設定檔建立這類簡報,我們建立了名為 AiCallTree
的專屬序列化器,以 LLM 可處理的方式為工作建立呼叫樹狀結構。日後,我們也將在這裡探索 ReAct 策略,盡量減少需要預先傳送至 Gemini 的資料量。
未來的 AI 輔助功能
從 Chrome 132 開始,我們已將這項工作的成果提供給使用者,其中包括針對樣式、網路、來源和效能提供 AI 協助。希望您使用這項功能時,能像我們開發時一樣感到滿意。
如要瞭解如何開始使用,請參閱完整的 AI 協助功能快速入門指南,其中提供許多示範提示,讓您在自己的網頁上試用。請務必在我們開放的討論錯誤中告訴我們您的想法。