Vind formulierproblemen met Chrome DevTools

Het Chrome DevTools-team is bezig met het ontwikkelen van extra nieuwe functies waarmee u problemen met formulieren kunt vinden en automatisch aanvullen kunt debuggen.

Sam Dutton

In Chrome Canary testen we nieuwe functies in DevTools die ontwikkelaars moeten helpen begrijpen hoe automatisch invullen van formulieren werkt en waarom het soms mislukt:

  • Hoe koppelt de browser automatisch opgeslagen waarden aan formuliervelden?
  • Welke criteria gebruikt Autofill om een ​​formulierveld in te vullen?
  • Welke velden worden niet ingevuld door Automatisch invullen?
  • Waarom wordt een formulierveld niet automatisch ingevuld?

In dit artikel worden de nieuwe functies in Chrome DevTools beschreven. Ook leggen we uit hoe u deze kunt testen en feedback kunt geven.

Wat is Automatisch invullen?

Chrome helpt gebruikers bij het beheren van adres-, betalings- en inloggegevens door gegevens veilig op te slaan en formuliervelden in te vullen zonder dat de gebruiker tekst hoeft in te voeren. Dit staat bekend als automatisch invullen.

Chrome biedt aan om gegevens voor automatisch invullen op te slaan wanneer u een formulier verzendt. Op mobiel:

Drie Android-screenshots: een adresformulier in Chrome, Chrome Autofill die aanbiedt het adres op te slaan en vervolgens een dialoogvenster toont voor het bewerken van de nieuwe Autofill-invoer.

Vervolgens biedt Chrome aan om formulieren automatisch in te vullen met de opgeslagen gegevens.

Op mobiel:

Op het bureaublad:

Chrome biedt aan om automatisch een adresformulier op een desktop in te vullen

U kunt uw Autofill-gegevens beheren in de Chrome-instellingen.

Op mobiel:

Chrome-instellingen op Android: een adres bewerken

Op het bureaublad:

pagina chrome://settings/addresses, met twee voorbeeldadressen

Mogelijk heeft u ook gezien dat Chrome suggesties biedt voor invoervelden die geen verband houden met adres-, creditcard- of inloggegevens. Naast het automatisch aanvullen van sets gestructureerde gegevens, zoals adres- en betalingsgegevens, helpt Chrome gebruikers ook om te voorkomen dat ze gegevens opnieuw hoeven in te voeren voor afzonderlijke formuliervelden die niet door automatisch aanvullen kunnen worden verwerkt. Wanneer een formulier een veld bevat met een naamkenmerk dat Chrome al eerder is tegengekomen, kan Chrome waarden voorstellen, zodat u de gegevens niet opnieuw hoeft in te voeren.

Hier is een eenvoudig voorbeeld:

Chrome biedt suggesties voor ongestructureerde gegevens in één formulierveld

Chrome DevTools laat zien dat het formulierveld hier geen kenmerken heeft die relevant zijn voor de browser. In plaats daarvan is het slechts een name van n300 .

Chrome DevTools toont informatie over de ongestructureerde gegevens in een formulier, zoals in het vorige voorbeeld: één invoer met alleen de kenmerken type=text en name=n300.

Het veld komt niet overeen met een waarde in een set gestructureerde gegevens waardoor het niet geschikt is voor automatisch aanvullen in Chrome. Toch kan Chrome de gebruiker helpen als deze in de toekomst een veld met deze naam tegenkomt.

Test nieuwe Autofill-functies van Chrome DevTools

Chrome test nieuwe mogelijkheden voor het DevTools- problemenpaneel om problemen met automatisch aanvullen te helpen oplossen.

U kunt deze nieuwe mogelijkheden uitproberen in Chrome Canary. Controleer Instellingen. Instellingen > Experimenten > Selectievakje. Markeert een knooppunt of kenmerk in de DOM-boom van het Elementenpaneel in DevTools en laadt DevTools opnieuw wanneer daarom wordt gevraagd.

Chrome DevTools instellingenpagina, met de melding 'Markeert een knooppunt dat in strijd is met de regels...'

U kunt Chrome Canary ook uitvoeren vanaf de opdrachtregel met de vlag AutofillEnableDevtoolsIssues :

  • 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

Als u op problemen wilt controleren, opent u het DevTools Issues- paneel op een pagina met een formulier. form-problems.glitch.me is een goede plek om te beginnen.

Chrome DevTools toont een probleem met het for-kenmerk van een formulierelement.

Zoals je ziet, is dit formulier een puinhoop! Er zijn:

  • Invoervelden zonder id of name .
  • Elementen met dubbele ID's.
  • Een <label> met een for -kenmerk dat niet overeenkomt met een element-ID.
  • Een veld met een leeg autocomplete -kenmerk.

Beweeg de muis over een gemarkeerd element in de DOM-boom en klik op Probleem weergeven voor meer informatie.

Uitgebreid probleem in Chrome DevTools: Onjuist gebruik van label voor kenmerk.

Klik op het knooppunt 'Inbreukmakend' om de betreffende bronnen voor elk probleem te bekijken. Dit formulier heeft acht labels met een ' for -kenmerk dat niet overeenkomt met de id van een formulierveld.

Gebruik DevTools om de toegankelijkheid van formulieren te verbeteren

DevTools kan ook problemen met de toegankelijkheid van Automatisch invullen markeren, zoals een formulierveld dat geen aria-labelledby -kenmerk of bijbehorend <label> heeft.

Chrome DevTools Toegankelijkheidspaneel, dat laat zien dat er een label is gevonden voor een invoerelement in een formulier.

In dit voorbeeld heeft een <input> -element een overeenkomend label. Dit betekent dat hulpmiddelen het doel van het element kunnen aankondigen. In het volgende voorbeeld werd echter geen overeenkomend label of aria-labelledby attribuut gevonden.

Chrome DevTools Toegankelijkheidspaneel, waarin wordt aangegeven dat er geen overeenkomend label, of aria-labelledby-kenmerk, is gevonden voor een invoerelement in een formulier.

Geef feedback over de nieuwe functies voor automatisch invullen in DevTools

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht of iets anders met betrekking tot DevTools te bespreken:

  • U kunt een suggestie of feedback aan ons doorgeven via de paraplu-bug op crbug.com .
  • Meld een probleem van DevTools: Meer opties > Help > Meld een DevTools-probleem .
  • Tweet naar @ChromeDevTools .

Meer informatie

  • Learn Forms : een cursus over HTML-formulieren om je expertise als webontwikkelaar te verbeteren. Ideaal voor iedereen die nog niet bekend is met formulieren en automatisch invullen.
  • web.dev/tags/forms : richtlijnen, best practices en codelabs voor betalings-, inlog- en adresformulieren.