AI 輔助功能
將 Gemini 直接整合至 Chrome 開發人員工具，大幅提升開發工作流程的效率。透過 AI 輔助，針對樣式、效能、網路和來源進行偵錯，簡化偵錯作業。
執行第一個提示
在下方的互動式教學課程中執行範例提示，體驗 Chrome 開發人員工具中的 Gemini。
AI 輔助功能可協助你完成哪些事項
修正樣式錯誤
樣式問題可能很難偵錯。如需元素樣式的詳細說明，以及如何修正版面配置和樣式錯誤的協助，請參閱以下文章：
Can you center this element?
分析網路要求
要求和回應標頭通常包含一目瞭然的重要資訊。使用 AI 輔助功能深入瞭解：
Why does this request fail?
瞭解來源檔案
您很少在網站上編寫所有程式碼 - 不確定某個指令碼的用途？AI 輔助功能可協助您：
What is this file used for?
調查網頁成效
網站體驗核心指標不佳？找出網站速度緩慢的根本原因並不容易。AI 協助功能可為你調查並提出解決方案：
Help me optimize my LCP score
不確定該如何著手嗎？
探索開發人員工具中的 AI 輔助功能提示。您可以試用我們的示範或在自有網站上試用。
修正圖片的顯示比例
Make all teaser images always be 16:9
其中一個圖片的裁剪方式與其他圖片不同嗎？
- 開啟 chrome.dev/cinemai/devtools/ 頁面，然後開啟開發人員工具。
- 找出並選取「觀看影片瞭解詳情」部分。
- 按一下 AI 協助圖示。
- 提示：
Make all teaser images always be 16:9。 - 按一下
Apply the suggested change即可繼續。 - 按鈕應置中。
修正溢位問題
How can I make this element visible?
元素是否無法顯示？
- 開啟 chrome.dev/cinemai/devtools/ 頁面，然後開啟開發人員工具。
- 找出 scuba diver img 元素。
- 按一下 AI 協助圖示。
- 提示：
How can I make this element visible without scrollbars?。 - 按一下
Apply the suggested change即可繼續。 - 螢幕上應可見潛水員。
解析標頭
Are there any security headers present?
如要進一步瞭解特定資源的安全性標頭，請...
- 開啟 chrome.dev/cinemai/devtools/ 頁面，然後開啟開發人員工具。
- 在「網路」面板中，選取
v4-chrome.dev.js要求。 - 按一下 AI 協助圖示。
- 提示：
Are there any security headers present? - LLM 會說明資源的安全性相關標頭。
建立錯誤報告
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results.
發生錯誤？快速建立詳細的錯誤報告。
- 開啟發生網路錯誤的網頁，然後開啟開發人員工具。
- 在「網路」面板中，選取失敗的要求。
- 按一下 AI 輔助圖示。
- 提示：
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results. - 大型語言模型會產生錯誤報告，您可以直接複製到問題追蹤工具。
深入分析資料
觀看影片，瞭解如何在開發人員工具中使用 AI 協助功能，解決常見的網路開發問題。
AI 輔助偵錯 - 開發人員工具提示
歡迎探索 Chrome 開發人員工具的 AI 輔助偵錯功能！
開發人員工具 130-132 版新功能
歡迎觀看 Matthias 的影片，瞭解 Chrome 139 到 141 版的「網路」面板功能、基準和 CSS 更新，以及 AI 創新功能！
歡迎提供寶貴意見，協助我們改善服務品質！
這項功能仍在實驗階段，日後可能會有變動。可能會產生不準確或令人反感的資訊，如果出現這類內容，皆不代表 Google 觀點。請為回覆投下你的一票，協助我們改善這項功能，也歡迎繼續提供意見回饋！