使用自动填充面板检查和调试保存到 Chrome 中的地址信息。
概览
Chrome 自动填充功能可让您轻松在网站上使用已保存的地址自动填写表单。借助 DevTools 中的自动填充面板,您可以检查表单字段、预测的自动填充值和已保存数据之间的映射。
将地址信息保存到 Chrome
默认情况下,Chrome 会提示您保存您在网络表单中输入的地址信息。
如果没有此类提示,请在 Chrome 的右上角依次转到 添加新地址。
自定义和控制 Google Chrome > 密码和自动填充 > 地址和其他信息,然后开启 保存并填写地址。您还可以在此处如果您没有保存地址数据,也不想保存,可以使用自动填充面板提供的测试地址数据。
打开“自动填充”面板
默认情况下,如果 DevTools 处于打开状态,并且您在网站上自动填充表单,自动填充面板会自动打开。如需关闭此功能,请手动打开该面板,然后清除
自动打开此面板复选框。如需手动打开自动填充面板,请执行以下操作:
- 打开开发者工具。
通过以下方式打开命令菜单:
- macOS:Command+Shift+P
- Windows、Linux、ChromeOS:Ctrl + Shift + P
开始输入
autofill
,选择显示自动填充,然后按 Enter 键。默认情况下,DevTools 会在 DevTools 窗口底部的抽屉中打开该面板。您也可以将其移至顶部。
或者,您也可以通过以下方式打开自动填充面板:
- 在顶部的操作栏中,点击 更多面板,然后从下拉列表中选择自动填充。
- 在右上角,依次选择 Customize and control DevTools(自定义和控制开发者工具)> More tools(更多工具)> Autofill(自动填充)。
检查自动填充数据
如需检查自动填充数据,请执行以下操作:
- 确保已在 Chrome 中开启自动填充功能,并保存了地址信息。或者,您也可以使用测试地址数据,如下一部分所述。
- 例如,在此演示页面上打开开发者工具。
- 在演示页面上的地址网页表单中,将焦点置于某个表单字段。Chrome 会显示一个包含自动填充数据选项的下拉菜单。
- 从菜单中选择一个选项。自动填充功能会使用已保存的数据填充表单,并且如果自动打开,DevTools 会打开自动填充面板。否则,请手动打开自动填充面板。
使用测试地址数据
如果您没有保存地址数据,也不想保存,可以使用自动填充面板提供的测试数据。
如需使用测试数据,请执行以下操作:
- 打开自动填充面板,然后开启面板顶部的 在自动填充菜单中显示测试地址数据。
- 在该页面上,右键点击已提交的地址表单,然后从 Developer tools(开发者工具)菜单中选择一个选项。
数据及其映射
自动填充面板会显示它在表单字段中插入的数据,以及一个表格,其中包含以下内容之间的映射:
- 在网页上检测到表单字段。
- 预测的自动填充值,由自动填充功能使用启发法确定。
- 由自动填充功能在识别出的字段中插入的值(如果有)。