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