AI 輔助功能
將 Gemini 直接整合至 Chrome 開發人員工具，大幅提升開發工作流程的效率。透過 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 協助
找出「Ask AI」按鈕，即可請 Gemini 協助完成目前的工作。
不確定該如何著手嗎？
探索開發人員工具中的 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 會說明資源的安全性相關標頭。
深入分析資料
觀看影片，瞭解如何在開發人員工具中使用 AI 協助功能，解決常見的網路開發問題。
Chrome 133-135 版的 AI 即時通訊歷史記錄
在 Chrome 133-135 中探索持續性 AI 即時通訊記錄
開發人員工具 130-132 版新功能
歡迎觀看 Jecelyn、Oliver 和 Matthias 的影片，瞭解 Chrome 130 至 132 版中的 AI 輔助功能
歡迎提供寶貴意見，協助我們改善服務品質！
這項功能仍在實驗階段，日後可能會有變動。可能會產生不準確或令人反感的資訊，如果出現這類內容，皆不代表 Google 觀點。請為回覆投下你的一票，協助我們改善這項功能，也歡迎繼續提供意見回饋！