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 觀點。請為回覆投下你的一票，協助我們改善這項功能，也歡迎繼續提供意見回饋！