Web 开发指向标｜开发者工具 AI 辅助功能的 5 大实践应用

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 开发者工具的更多精彩文章