Zespół Narzędzi deweloperskich w Chrome pracuje nad dodatkowymi funkcjami, które pomogą Ci znaleźć problemy z formularzami i debugować autouzupełnianie.
W Chrome Canary testujemy nowe funkcje Narzędzi deweloperskich, aby pomóc deweloperom zrozumieć, jak działa autouzupełnianie formularzy i dlaczego czasami działanie to powoduje błędy:
- W jaki sposób autouzupełnianie w przeglądarce mapuje zapisane wartości na pola formularzy?
- Jakich kryteriów używa autouzupełnianie podczas wypełniania pola formularza?
- Które pola nie zostały wypełnione przez autouzupełnianie?
- Dlaczego pole formularza nie jest wypełniane przez autouzupełnianie?
W tym artykule opisujemy nowe funkcje Narzędzi deweloperskich w Chrome oraz wyjaśniamy, jak je przetestować i przekazać opinię.
Co to jest autouzupełnianie?
Chrome pomaga użytkownikom zarządzać adresem, płatnościami i danymi logowania, bezpiecznie przechowując zbiory danych i oferując wypełnienie pól formularza bez konieczności wpisywania tekstu przez użytkownika. Jest to tzw. autouzupełnianie.
Chrome proponuje zapisanie danych autouzupełniania, gdy przesyłasz formularz. Na telefonie:
Chrome umożliwia autouzupełnianie formularzy przy użyciu zapisanych danych.
Na telefonie:
Na komputerze:
Danymi autouzupełniania możesz zarządzać w ustawieniach Chrome.
Na telefonie:
Na komputerze:
Chrome może też wyświetlać sugestie dotyczące pól do wprowadzania danych niezwiązanych z adresem, kartą kredytową ani danymi logowania. Oprócz oferowania autouzupełniania w przypadku zestawów uporządkowanych danych, takich jak adres i szczegóły płatności, Chrome pomaga użytkownikom uniknąć ponownego wpisywania danych w pojedynczych polach formularza, których nie obsługuje autouzupełnianie. Jeśli formularz zawiera pole z atrybutem nazwy, z którym Chrome już się wcześniej zetknął, Chrome może zasugerować wartości, dzięki czemu nie musisz ponownie wpisywać danych.
Oto prosty przykład:
W Narzędziach deweloperskich w Chrome widać, że pole formularza nie zawiera atrybutów istotnych dla przeglądarki. Jest to tylko atrybut name o wartości n300.
To pole nie odpowiada wartości w zestawie uporządkowanych danych, która nadaje się do autouzupełniania Chrome, ale Chrome może pomóc użytkownikowi, jeśli w przyszłości natknie się na pole o takiej nazwie.
Przetestuj nowe funkcje autouzupełniania w Narzędziach deweloperskich w Chrome
Chrome testuje nowe funkcje panelu Problemy w Narzędziach deweloperskich, aby pomóc w debugowaniu usterek autouzupełniania.
Możesz wypróbować te nowe funkcje w Chrome Canary. Wybierz 
Ustawienia > Eksperymenty > 
Wyróżnia węzeł lub atrybut naruszający zasady w panelu Elementy w drzewie DOM w Narzędziach deweloperskich i gdy pojawi się taka prośba, załaduj ponownie Narzędzia deweloperskie.
Możesz też uruchomić Chrome Canary z poziomu wiersza poleceń, używając flagi 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
Aby sprawdzić, czy występują problemy, otwórz panel Problemy w Narzędziach deweloperskich na stronie z formularzem. Zacznij od formularza form-problems.glitch.me.
Jak widać, ten formularz zawiera bałagan. Dostępne są:
- Pola wejściowe bez atrybutu
idlubname. - Elementy ze zduplikowanymi identyfikatorami.
<label>z atrybutemfor, który nie pasuje do identyfikatora elementu.- Pole z pustym atrybutem
autocomplete.
Aby dowiedzieć się więcej, najedź kursorem na zaznaczony element w drzewie DOM i kliknij Wyświetl problem.
Kliknij Węzeł naruszający zasady, aby wyświetlić zasoby, których dotyczy dany problem. Ten formularz ma 8 etykiet z atrybutem for, który nie pasuje do id pola formularza.
Ułatwienia dostępu w formularzach za pomocą Narzędzi deweloperskich
Narzędzia deweloperskie mogą też wyróżniać problemy z ułatwieniami dostępu w autouzupełnianiu, na przykład pole formularza, które nie ma atrybutu aria-labelledby ani powiązanego elementu <label>.
W tym przykładzie element <input> ma pasującą etykietę. Oznacza to, że urządzenia wspomagające mogą
powiedzieć przeznaczenie elementu. W poniższym przykładzie nie znaleziono jednak pasującej etykiety ani atrybutu aria-labelledby.
Prześlij opinię na temat nowych funkcji autouzupełniania w Narzędziach deweloperskich
Skorzystaj z tych opcji, aby omówić nowe funkcje i zmiany we wpisie lub o innych kwestiach związanych z Narzędziami dla deweloperów:
- Prześlij nam sugestię lub opinię, korzystając z błędu parasola na stronie crbug.com.
- Zgłoś problem w Narzędziach deweloperskich: Więcej opcji > Pomoc > Zgłoś problem z tymi narzędziami.
- zatweetuj na @ChromeDevTools.
Więcej informacji
- Learn Formularzy: kurs dotyczący formularzy HTML, który pomoże Ci poszerzyć wiedzę dotyczącą programowania stron internetowych. Idealne dla osób, które dopiero zaczynają korzystać z formularzy i autouzupełniania.
- web.dev/tags/forms wskazówki, sprawdzone metody i ćwiczenia z programowania dotyczące formularzy płatności, logowania i adresu.