Chrome 开发者工具团队正在开发更多新功能，以帮助您查找表单问题和调试自动填充功能。
在 Chrome Canary 中，我们正在测试 DevTools 中的新功能，旨在帮助开发者了解表单自动填充功能的运作方式以及其有时会失败的原因：
- 浏览器自动填充功能如何将存储的值映射到表单字段？
- 自动填充功能会根据哪些条件来填充表单字段？
- 哪些字段未由自动填充功能填充？
- 为什么表单字段未由自动填充功能填充？
本文简要介绍了 Chrome 开发者工具中的新功能，并说明了如何测试这些功能并提供反馈。
什么是自动填充？
Chrome 通过安全地存储一组数据，并提供填充表单字段的功能（无需用户输入文本），帮助用户管理地址、付款和登录信息。这称为“自动填充”。
在您提交表单后，Chrome 会询问您是否要保存自动填充数据。在移动设备上：
随后，Chrome 会提供使用已保存的数据自动填充表单的选项。
在移动设备上：
在桌面设备上：
您可以在 Chrome 设置中管理自动填充数据。
在移动设备上：
在桌面设备上：
您可能还会看到 Chrome 针对与地址、信用卡或登录数据无关的输入字段提供建议。除了为地址和付款详情等集合结构化数据提供自动填充功能外，Chrome 还可帮助用户避免为自动填充功能无法处理的单个表单字段重新输入数据。如果表单中有一个字段的名称属性是 Chrome 之前遇到过的，Chrome 可能会建议相应值，以免您重复输入数据。
下面是一个简单示例：
Chrome 开发者工具显示，此处的表单字段没有对浏览器有意义的属性。而是 n300 的 name 属性。
该字段与一组结构化数据中的值不匹配，因此不适合使用 Chrome 自动填充功能，但如果 Chrome 日后遇到此名称的字段，仍可帮助用户。
测试新的 Chrome 开发者工具自动填充功能
Chrome 正在测试 DevTools 问题面板的新功能，以帮助调试自动填充故障。
您可以在 Chrome Canary 中试用这些新功能。选中 
Settings > Experiments > 
突出显示“Elements”面板 DOM 树中的违规节点或属性，并在出现提示时重新加载 DevTools。
或者，您也可以使用 AutofillEnableDevtoolsIssues 标志从命令行运行 Chrome Canary：
- Windows：
shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues - Mac：
shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
如需检查问题，请在包含表单的网页上打开开发者工具的问题面板。form-problems.glitch.me 是一个不错的起点。
如您所见，此表单乱糟糟的！包括：
- 输入字段没有
id或name属性。 - 具有重复 ID 的元素。
<label>的for属性与元素 ID 不匹配。autocomplete属性为空的字段。
将鼠标悬停在 DOM 树中的突出显示的元素上，然后点击查看问题了解详情。
点击违规节点可查看每个问题的受影响资源。此表单有 8 个标签，其 for 属性与表单字段的 id 不匹配。
使用开发者工具改进表单无障碍功能
开发者工具还可以突出显示自动填充无障碍功能问题，例如表单字段没有 aria-labelledby 属性或关联的 <label>。
在此示例中，<input> 元素具有匹配的标签。这意味着辅助设备可以读出元素的用途。不过，在以下示例中，未找到匹配的标签或 aria-labelledby 属性。
针对开发者工具中的新自动填充功能提供反馈
您可以使用以下选项讨论该帖子中介绍的新功能和变更，或与开发者工具相关的任何其他内容：
- 您可以通过 crbug.com 上的“umbrella bug”向我们提交建议或反馈。
- 如需通过 DevTools 报告问题，请依次选择 More options > Help > Report a DevTools issue。
- 向 @ChromeDevTools 发送推文。
了解详情
- 学习表单：本课程介绍了 HTML 表单，可帮助您提升 Web 开发者专业知识。非常适合刚开始接触表单和自动填充功能的用户。
- web.dev/tags/forms：有关付款表单、登录表单和地址表单的指南、最佳实践和 Codelab。