Formularprobleme mit den Chrome-Entwicklertools finden

Das Chrome DevTools-Team arbeitet an weiteren neuen Funktionen, mit denen Sie Formularprobleme finden und Autofill-Fehler beheben können.

Sam Dutton

In Chrome Canary testen wir neue Funktionen in den DevTools, mit denen Entwickler besser nachvollziehen können, wie das automatische Ausfüllen von Formularen funktioniert und warum es manchmal fehlschlägt:

• Wie werden gespeicherte Werte durch die automatische Ausfüllung im Browser in Formularfelder zugeordnet?
• Anhand welcher Kriterien wird ein Formularfeld mit Autofill ausgefüllt?
• Welche Felder wurden nicht automatisch ausgefüllt?
• Warum wird ein Formularfeld nicht durch Autofill ausgefüllt?

In diesem Artikel werden die neuen Funktionen in den Chrome-Entwicklertools beschrieben und erläutert, wie Sie sie testen und Feedback geben können.

Was ist AutoFill?

Chrome hilft Nutzern, Adress-, Zahlungs- und Anmeldedaten zu verwalten, indem Datensätze sicher gespeichert und Formularfelder automatisch ausgefüllt werden, ohne dass der Nutzer Text eingeben muss. Das wird als Autofill bezeichnet.

Chrome bietet Ihnen an, Autofill-Daten zu speichern, wenn Sie ein Formular einreichen. Auf einem Mobilgerät:

Anschließend bietet Chrome an, Formulare mit den gespeicherten Daten automatisch auszufüllen.

Auf einem Mobilgerät:

Auf einem Computer:

Sie können Ihre Autofill-Daten in den Chrome-Einstellungen verwalten.

Auf einem Mobilgerät:

Auf einem Computer:

Möglicherweise haben Sie auch schon gesehen, dass Chrome Vorschläge für Eingabefelder macht, die sich nicht auf Adressen, Kreditkarten oder Anmeldedaten beziehen. Chrome bietet nicht nur Autofill für Sätze strukturierter Daten wie Adressen und Zahlungsdetails, sondern hilft Nutzern auch, Daten für einzelne Formularfelder, die nicht von Autofill verarbeitet werden können, nicht noch einmal eingeben zu müssen. Wenn ein Formular ein Feld mit einem Namensattribut enthält, das Chrome bereits kennt, kann Chrome Werte vorschlagen, damit Sie die Daten nicht noch einmal eingeben müssen.

Hier ein einfaches Beispiel:

Die Chrome-Entwicklertools zeigen, dass das Formularfeld hier keine Attribute hat, die für den Browser relevant sind. Stattdessen ist es nur ein name-Attribut von n300.

Das Feld entspricht keinem Wert in einem Satz strukturierter Daten, der es für Chrome Autofill geeignet machen würde. Chrome kann dem Nutzer aber trotzdem helfen, wenn er in Zukunft auf ein Feld mit diesem Namen stößt.

Neue Autofill-Funktionen der Chrome-Entwicklertools testen

In Chrome werden neue Funktionen für den Bereich Probleme in den DevTools getestet, um Probleme mit der Autofill-Funktion zu beheben.

Sie können diese neuen Funktionen in Chrome Canary ausprobieren. Aktivieren Sie in den DevTools die Option Einstellungen > Experimente > Knoten oder Attribut mit Verstoß im DOM-Baum des Elements-Bereichs hervorheben und aktualisieren Sie die DevTools, wenn Sie dazu aufgefordert werden.

Alternativ können Sie Chrome Canary über die Befehlszeile mit dem Flag AutofillEnableDevtoolsIssues ausführen:

• 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

Öffnen Sie auf einer Seite mit einem Formular den Bereich Probleme in den Entwicklertools. form-problems.glitch.me ist ein guter Ausgangspunkt.

Wie Sie sehen, ist dieses Formular ein Durcheinander. Es gibt:

• Eingabefelder ohne id- oder name-Attribut
• Elemente mit doppelten IDs
• Ein <label> mit einem for-Attribut, das nicht mit einer Element-ID übereinstimmt.
• Ein Feld mit einem leeren autocomplete-Attribut.

Bewegen Sie den Mauszeiger auf ein hervorgehobenes Element im DOM-Baum und klicken Sie auf Problem ansehen, um mehr zu erfahren.

Klicken Sie auf Verletzender Knoten, um die betroffenen Ressourcen für jedes Problem aufzurufen. Dieses Formular enthält acht Labels mit dem Attribut „for“, das nicht mit dem „id“ eines Formularfelds übereinstimmt.

Mit den Entwicklertools die Barrierefreiheit von Formularen verbessern

In den DevTools können auch Probleme mit der Barrierefreiheit von Autofill hervorgehoben werden, z. B. ein Formularfeld, das weder ein aria-labelledby-Attribut noch eine zugehörige <label> hat.

In diesem Beispiel hat ein <input>-Element ein übereinstimmendes Label. Das bedeutet, dass Hilfstechnologien den Zweck des Elements ansagen können. Im folgenden Beispiel wurde jedoch kein übereinstimmendes Label oder aria-labelledby-Attribut gefunden.

Feedback zu den neuen Autofill-Funktionen in den DevTools geben

Mit den folgenden Optionen können Sie über die neuen Funktionen und Änderungen im Beitrag oder über andere Themen im Zusammenhang mit den Entwicklertools diskutieren:

• Senden Sie uns einen Vorschlag oder Feedback über den Umbrella-Fehler auf crbug.com.
• Problem in DevTools melden: Weitere Optionen > Hilfe > DevTools-Problem melden
• Tweeten Sie an @ChromeDevTools.

Weitere Informationen

• Learn Forms: Ein Kurs zu HTML-Formularen, mit dem Sie Ihre Kenntnisse als Webentwickler verbessern können. Ideal für alle, die noch keine Erfahrung mit Formularen und Autofill haben.
• web.dev/tags/forms: Anleitungen, Best Practices und Codelabs für Zahlungs-, Anmelde- und Adressformulare.