发布时间：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 辅助功能会调查您现有的代码，并将其与您尝试实现的目标进行比较，为您提供所需的修复建议，以便您进行审核、应用并复制到代码库中。
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 中动手实践吧！
请务必通过公开问题跟踪器告诉我们您的使用体验！