
Chrome 开发者工具是一套 Web 开发者工具,直接内置于 Google Chrome 浏览器中,帮助您即时修改页面和快速诊断问题,让您能够更快地构建更好的网站。
-
Chrome 开发者工具
https://developer.chrome.google.cn/docs/devtools/ai-assistance?hl=zh-cn
-
Google Chrome
在之前的文章中,您已经充分了解到,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)。
利用 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
通过 Chrome 开发者工具系列文章,我们带您了解了它最经典的功能,也见证了 AI 注入后展现出的无限潜力,希望这些内容能帮助您打开高效开发的大门。敬请期待未来更多 Chrome 开发者工具的精彩内容。
点击屏末****|**** 阅 读 原 文 | 查看 Chrome 开发者工具的更多精彩文章






































