自动填充:检查和调试已保存的地址

Sofia Emelianova
Sofia Emelianova

使用自动填充面板检查和调试保存到 Chrome 中的地址信息。

概览

Chrome 自动填充功能可让您轻松在网站上使用已保存的地址自动填写表单。借助 DevTools 中的自动填充面板,您可以检查表单字段、预测的自动填充值和已保存数据之间的映射。

将地址信息保存到 Chrome

默认情况下,Chrome 会提示您保存您在网络表单中输入的地址信息。

提示保存地址信息。

如果没有此类提示,请在 Chrome 的右上角依次转到 自定义和控制 Google Chrome > 密码和自动填充 > 地址和其他信息,然后开启 保存并填写地址。您还可以在此处添加新地址

“地址和其他信息”菜单选项。

如果您没有保存地址数据,也不想保存,可以使用自动填充面板提供的测试地址数据

打开“自动填充”面板

默认情况下,如果 DevTools 处于打开状态,并且您在网站上自动填充表单,自动填充面板会自动打开。如需关闭此功能,请手动打开该面板,然后清除 自动打开此面板复选框。

如需手动打开自动填充面板,请执行以下操作:

  1. 打开开发者工具
  2. 通过以下方式打开命令菜单

    • macOS:Command+Shift+P
    • Windows、Linux、ChromeOS:Ctrl + Shift + P

    包含

  3. 开始输入 autofill,选择显示自动填充,然后按 Enter 键。

    默认情况下,DevTools 会在 DevTools 窗口底部的抽屉中打开该面板。您也可以将其移至顶部

或者,您也可以通过以下方式打开自动填充面板:

  • 在顶部的操作栏中,点击 更多面板,然后从下拉列表中选择自动填充
  • 在右上角,依次选择 Customize and control DevTools(自定义和控制开发者工具)> More tools(更多工具)> Autofill(自动填充)。

检查自动填充数据

如需检查自动填充数据,请执行以下操作:

  1. 确保已在 Chrome 中开启自动填充功能,并保存了地址信息。或者,您也可以使用测试地址数据,如下一部分所述。
  2. 例如,在此演示页面打开开发者工具
  3. 在演示页面上的地址网页表单中,将焦点置于某个表单字段。Chrome 会显示一个包含自动填充数据选项的下拉菜单。
  4. 从菜单中选择一个选项。自动填充功能会使用已保存的数据填充表单,并且如果自动打开,DevTools 会打开自动填充面板。否则,请手动打开自动填充面板。

选择了自动填充数据选项。

使用测试地址数据

如果您没有保存地址数据,也不想保存,可以使用自动填充面板提供的测试数据。

如需使用测试数据,请执行以下操作:

  1. 打开自动填充面板,然后开启面板顶部的 在自动填充菜单中显示测试地址数据
  2. 在该页面上,右键点击已提交的地址表单,然后从 Developer tools(开发者工具)菜单中选择一个选项。

包含测试地址数据选项的“开发者工具”菜单。

数据及其映射

自动填充面板会显示它在表单字段中插入的数据,以及一个表格,其中包含以下内容之间的映射:

  • 在网页上检测到表单字段
  • 预测的自动填充值,由自动填充功能使用启发法确定。
  • 自动填充功能在识别出的字段中插入的(如果有)。

“自动填充”面板。

“问题”面板捕获的自动补全问题。