Autofill: Inspect and debug saved addresses

Sofia Emelianova

Use the Autofill panel to inspect and debug address info saved to Chrome.

Overview

Chrome Autofill provides a convenient way to automatically fill forms on websites with saved addresses. The Autofill panel in DevTools lets you inspect the mapping between your form fields, predicted autofill values, and saved data.

Save address info to Chrome

By default, Chrome prompts you to save address info you entered into a web form when you submit it.

If there's no such prompt, in Chrome's top right corner, navigate to more_vert Customize and control Google Chrome > key Password and Autofill > location_on Addresses and more and turn on toggle_on Save and fill addresses. You can also add new addresses here.

If you don't have address data saved and don't want to save it, you can use test address data provided by the Autofill panel.

Open the Autofill panel

By default, the Autofill panel automatically opens if DevTools is open and when you autofill a form on a website. To turn this off, open the panel manually and clear the check_box_outline_blank Automatically open this panel checkbox.

To manually open the Autofill panel:

1. Open DevTools.

2. Open the Command menu by pressing:

   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P

   

3. Start typing autofill, select Show Autofill, and press Enter.

   DevTools opens the panel in the Drawer at the bottom of your DevTools window by default. You can also move it to the top.

Alternatively, you can open the Autofill panel in the following ways:

• In the action bar at the top, click double_arrow More panels and select Autofill from the drop-down list.
• In the top right corner, select more_vert Customize and control DevTools > More tools > Autofill.

Inspect autofill data

To inspect autofill data:

1. Make sure Autofill is turned on and you have address info saved in Chrome. Alternatively, you can use test address data as described in the next section.
2. Open DevTools, for example, on this demo page.
3. In the address web form on the demo page, focus a form field. Chrome shows a drop-down menu with autofill data options.
4. Select an option from the menu. Autofill fills the form with saved data and DevTools opens the Autofill panel if auto-open is turned on. Otherwise, open the Autofill panel manually.

Use test address data

If you don't have address data saved and don't want to save it, you can use test data that the Autofill panel provides.

To use the test data:

1. Open the Autofill panel and turn on check_box Show test address data in autofill menu at the top of the panel.
2. On the page, right-click an address form filed and select one of the options from the Developer tools menu.

Data and its mapping

The Autofill panel shows the data it inserted in the form fields and a table with mapping between the following:

• Form field detected on the page.
• Predicted autofill value, which Autofill determines using heuristics.
• Value, if any, that Autofill inserted into fields it recognized.