發布日期：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 中動手實作！
請務必在公開問題追蹤工具中告訴我們你的使用體驗！