Chrome 开发者工具是一套 Web 开发者工具，直接内置于 Google Chrome 浏览器中，帮助您即时修改页面和快速诊断问题，让您能够更快地构建更好的网站。
Chrome 开发者工具
https://developer.chrome.google.cn/docs/devtools/ai-assistance?hl=zh-cn
Google Chrome
https://www.google.com/chrome/?hl=zh-cn
在之前的文章中，您已经充分了解到，AI 辅助功能可帮助您直接在开发者工具中使用 Gemini 调试样式问题。本文将带您了解这项功能如何通过 5 种出色的方式更轻松地设置网页样式，完成从解析布局到 "维修飞机" 的各项任务。
此段屏幕录制内容展示了 AI 辅助功能如何帮助您使用 CSS 动画实现 marquee 效果
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 辅助功能会分析您现有的代码，将其与您期望实现的效果进行对比，并为您提供所需的修复建议。您可以直接审核、应用，并将其复制到您的代码库中。
3. 无障碍功能顾问
确保您的网站能够通过辅助技术访问和使用是至关重要的。您应该在开发之初就充分考虑无障碍功能，并在整个开发过程中遵循 Web 内容无障碍指南 (WCAG)。
Web 内容无障碍指南
https://www.w3.org/WAI/standards-guidelines/wcag/
利用 AI 辅助，您可以获得如何将普通 <div> 替换为更具语义化的 HTML 元素、如何恰当使用额外的 aria-* 属性，以及如何优化颜色对比度等方面的专业建议。
建议尝试的提示
What about color contrast in this element?
4. 彰显个性
设计潮流变化多样: 从早期的渐变、阴影和粗边框，到后来的扁平化设计，再演变到如今以深色背景搭配亮眼霓虹色的设计风格。
Bootstrap 按钮样式随时间推移的变化，从上到下分别为版本 1 到 5
但是，您是否会觉得自己的网页看起来不够独特？如果您正处于这个想要突破的时刻，不妨让 AI 助理为您的设计注入新意，让您的网络世界变得像主题公园里的过山车一样充满乐趣！
建议尝试的提示
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. 扮演 "飞机工程师"
解释样式问题、协助解决代码难题、提供无障碍功能建议，乃至更改现有样式——AI 辅助的功能远超于此！您相信 AI 助理甚至能帮助您 "修理飞机" 吗？无需任何经验，立即在 Chrome 开发者工具 Hangar 中动手尝试吧！
Chrome 开发者工具 Hangar - 一个互动式 AI 辅助 Playground
Chrome 开发者工具 Hangar
https://chrome.dev/devtools-hangar/
通过 Chrome 开发者工具系列文章，我们带您了解了它最经典的功能，也见证了 AI 注入后展现出的无限潜力，希望这些内容能帮助您打开高效开发的大门。敬请期待未来更多 Chrome 开发者工具的精彩内容。
点击屏末|阅读原文|查看 Chrome 开发者工具的更多精彩文章
