發布日期：2024 年 10 月 21 日
上週，我們在 DevTools 中推出了全新的面板：AI 輔助功能可協助您直接在 DevTools 中使用 Gemini 偵錯樣式問題。
想知道這項功能的用途嗎？請查看這 5 種新功能的絕佳用途，瞭解如何透過這項功能輕鬆設定網頁樣式，從理解版面配置到修正飛機。
1. 瞭解版面配置
建構網站時，不一定得從頭開始。您經常需要在先前不熟悉的現有程式碼上進行建構，最糟的情況是，周遭也沒有人熟悉該程式碼。
請 AI 說明元素的版面配置，瞭解為何會以這種方式顯示，直到最後一個節點為止，以及元素上的 overflow: hidden; 為何會出現。👀
試用提示
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. 協同編程
CSS 目前已相當強大。由於可能性太多，有時會讓人感到困惑：我需要的是 align-items 嗎？或 justify-items？還是 justify-self 或 align-content？
有時您確實知道要做什麼，但就是無法取得正確的 CSS 屬性組合。下次遇到這種情況時，請向 AI 說明問題，讓 AI 為您解決問題。
AI 協助功能會調查現有程式碼，並與您嘗試達成的目標進行比較，建議您查看、套用及複製至程式碼集的必要修正項目。
3. 無障礙顧問
讓網站可供輔助技術存取及使用，十分重要。從開發過程一開始就考量無障礙功能，而非事後才想到，並且在整個開發程序中遵循無障礙網頁內容規範 (WCAG)。
使用 AI 協助功能，瞭解如何在哪裡將 <div> 替換為更具語義的 HTML 元素、如何使用額外的 aria-* 屬性，或是如何改善顏色對比。
試用提示
What about color contrast in this element?
4. 打造獨特個人風格
趨勢會隨著時間流逝：從漸層、陰影和粗邊，到平面設計，再到如今的設計風格，在深色背景上使用鮮豔的霓虹色彩。
但有時在網路上看到一成不變的內容，是不是很膩？如果是這種情況，不妨請 AI 助理協助你改變情況，讓網路體驗變得更有趣，就像在主題樂園遊樂設施中一樣！
試用提示
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. 成為飛機維修技師
說明樣式問題、協助修正問題、提供無障礙建議，以及變更現有樣式等，AI 輔助功能已提供許多支援功能，而且還會持續增加！您相信 AI 助理甚至可以協助您修理飛機嗎？無需具備相關經驗，只要穿上工作服，就能在 Chrome 開發人員工具 Hangar 中動手操作！
請務必在公開問題追蹤工具中告訴我們你的使用體驗！