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 Customize and control Google Chrome > Password and Autofill > Addresses and more and turn 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 Automatically open this panel checkbox.
To manually open the Autofill panel:
- Open DevTools.
Open the Command menu by pressing:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
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 More panels and select Autofill from the drop-down list.
- In the top right corner, select Customize and control DevTools > More tools > Autofill.
Inspect autofill data
To inspect autofill data:
- 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.
- Open DevTools, for example, on this demo page.
- In the address web form on the demo page, focus a form field. Chrome shows a drop-down menu with autofill data options.
- 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:
- Open the Autofill panel and turn on Show test address data in autofill menu at the top of the panel.
- 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.
