Find form issues with Chrome DevTools

The Chrome DevTools team is building additional new features to help you find form issues and debug Autofill.

Sam Dutton

In Chrome Canary we're testing new features in DevTools that aim to help developers understand how form Autofill works, and why it sometimes fails:

  • How does browser Autofill map stored values to form fields?
  • What criteria are used by Autofill to fill a form field?
  • Which fields didn't get filled by Autofill?
  • Why does a form field not get filled by Autofill?

This article outlines the new features in Chrome DevTools, and explains how you can test them and provide feedback.

What is Autofill?

Chrome helps users manage address, payment and login information, by securely storing sets of data and offering to fill in form fields without the user needing to enter text. That's known as Autofill.

Chrome offers to save Autofill data when you submit a form. On mobile:

Three Android screenshots: an address form in Chrome, Chrome Autofill offering to save the address, then showing dialog for editing the new Autofill entry.

Subsequently, Chrome offers to autofill forms with the data that was saved.

On mobile:

On desktop:

Chrome offering to autofill an address form on desktop

You can manage your Autofill data in Chrome settings.

On mobile:

Chrome settings on Android: editing an address

On desktop:

chrome://settings/addresses page, showing two sample addresses

You might also have seen Chrome offer suggestions for input fields that are not related to address, credit card, or login data. In addition to offering Autofill for sets of structured data such as address and payment details, Chrome helps users avoid re-entering data for single form fields that can't be handled by Autofill. When a form has a field with a name attribute that Chrome has encountered before, Chrome can suggest values so you don't need to re-enter data.

Here's a simple example:

Chrome offering suggestions for unstructured data in a single form field

Chrome DevTools shows that the form field here doesn't have attributes that are meaningful to the browser. Instead, it's just a name attribute of n300.

Chrome DevTools showing information about the unstructured data in a form, as shown in the previous example: a single input that only has the attributes type=text and name=n300.

The field doesn't correspond to a value in a set of structured data that would make it appropriate for Chrome Autofill, but Chrome can still help the user if it encounters a field with this name in the future.

Test new Chrome DevTools Autofill features

Chrome is testing new capabilities for the DevTools Issues panel, to help debug Autofill glitches.

You can try out these new capabilities in Chrome Canary. Check Settings. Settings > Experiments > Checkbox. Highlights a violating node or attribute in the Elements panel DOM tree in DevTools and reload DevTools when prompted.

Chrome DevTools settings page, showing 'Highlights a violating node ...'

Alternatively, you can run Chrome Canary from the command line with the AutofillEnableDevtoolsIssues flag:

  • 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

To check for problems, open the DevTools Issues panel on a page that has a form. form-problems.glitch.me is a good place to start.

Chrome DevTools showing an issue with the for attribute of a form element.

As you can see, this form is a mess! There are:

  • Input fields without an id or name attribute.
  • Elements with duplicate IDs.
  • A <label> with a for attribute that doesn't match an element ID.
  • A field with an empty autocomplete attribute.

Hover over a highlighted element in the DOM tree and click View issue to learn more.

Expanded issue in Chrome DevTools: Incorrect use of label for attribute.

Click Violating node to view the affected resources for each issue. This form has eight labels with a for attribute that doesn't match the id of a form field.

Use DevTools to improve form accessibility

DevTools can also highlight Autofill accessibility problems, such as a form field that doesn't have either an aria-labelledby attribute or an associated <label>.

Chrome DevTools Accessibility panel, showing that a label was found for an input element in a form.

In this example, an <input> element has a matching label. This means that assistive devices can announce the purpose of the element. However, in the following example, no matching label or aria-labelledby attribute was found.

Chrome DevTools Accessibility panel, showing that no matching label, or aria-labelledby attribute, was found for an input element in a form.

Provide feedback on the new Autofill features in DevTools

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools:

Find out more

  • Learn Forms: A course about HTML forms to help you improve your web developer expertise. Ideal for anyone new to forms and Autofill.
  • web.dev/tags/forms: Guidance, best practice and codelabs, for payment, login, and address forms.