Найдите проблемы с формами с помощью Chrome DevTools

Команда Chrome DevTools создает дополнительные новые функции, которые помогут вам находить проблемы с формами и отлаживать автозаполнение.

Сэм Даттон

В Chrome Canary мы тестируем новые функции DevTools, которые призваны помочь разработчикам понять, как работает автозаполнение форм и почему оно иногда не работает:

  • Как автозаполнение браузера отображает сохраненные значения в поля?
  • Какие критерии используются автозаполнением для заполнения полей формы?
  • Какие поля не были заполнены автозаполнением?
  • Почему поле формы не заполняется автозаполнением?

В этой статье описаны новые функции Chrome DevTools, а также объясняется, как их протестировать и оставить отзыв.

Что такое автозаполнение?

Chrome помогает пользователям управлять адресом, платежной информацией и информацией для входа в систему, безопасно сохраняя наборы данных и предлагая заполнять поля формы без необходимости ввода текста. Это известно как автозаполнение.

Chrome предлагает сохранять данные автозаполнения при отправке формы. На мобильном телефоне:

Три снимка экрана Android: форма адреса в Chrome, автозаполнение Chrome, предлагающее сохранить адрес, а затем отображение диалогового окна для редактирования новой записи автозаполнения.

Впоследствии Chrome предлагает автозаполнение форм сохраненными данными.

На мобильном телефоне:

На рабочем столе:

Chrome предлагает автозаполнение адресной формы на рабочем столе

Вы можете управлять данными автозаполнения в настройках Chrome.

На мобильном телефоне:

Настройки Chrome на Android: редактируем адрес

На рабочем столе:

Страница chrome://settings/addresses, показывающая два примера адресов

Возможно, вы также видели, что Chrome предлагает предложения для полей ввода, которые не связаны с адресом, кредитной картой или данными для входа. Помимо автозаполнения наборов структурированных данных, таких как адрес и платежные реквизиты, Chrome помогает пользователям избежать повторного ввода данных для отдельных полей формы, которые не могут быть обработаны автозаполнением. Если в форме есть поле с атрибутом имени, с которым Chrome уже сталкивался, Chrome может предлагать значения, поэтому вам не нужно повторно вводить данные.

Вот простой пример:

Chrome предлагает предложения для неструктурированных данных в одном поле формы

Chrome DevTools показывает, что поле формы здесь не имеет атрибутов, значимых для браузера. Вместо этого это просто атрибут name n300 .

Инструменты разработчика Chrome отображают информацию о неструктурированных данных в форме, как показано в предыдущем примере: один ввод, имеющий только атрибуты type=text и name=n300.

Поле не соответствует значению в наборе структурированных данных, которое делает его подходящим для автозаполнения Chrome, но Chrome все равно может помочь пользователю, если он встретит поле с таким именем в будущем.

Тестируйте новые функции автозаполнения Chrome DevTools

Chrome тестирует новые возможности панели « Проблемы DevTools», которые помогут устранить сбои автозаполнения.

Вы можете опробовать эти новые возможности в Chrome Canary. Проверять Настройки. Настройки > Эксперименты > Флажок. Выделяет нарушающий узел или атрибут в дереве DOM панели «Элементы» в DevTools и перезагружает DevTools при появлении запроса.

Страница настроек Chrome DevTools, показывающая «Выделяет нарушающий узел...»

Альтернативно вы можете запустить Chrome Canary из командной строки с флагом 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

Чтобы проверить наличие проблем, откройте панель « Проблемы DevTools» на странице с формой. form-problems.glitch.me — хорошее место для начала.

Инструменты разработчика Chrome показывают проблему с атрибутом for элемента формы.

Как видите, в этой форме полный бардак! Есть:

  • Поля ввода без атрибута id или name .
  • Элементы с повторяющимися идентификаторами.
  • <label> с атрибутом for , который не соответствует идентификатору элемента.
  • Поле с пустым атрибутом autocomplete .

Наведите указатель мыши на выделенный элемент в дереве DOM и нажмите «Просмотреть проблему» , чтобы узнать больше.

Расширенная проблема в Chrome DevTools: неправильное использование метки для атрибута.

Щелкните узел «Нарушение» , чтобы просмотреть затронутые ресурсы для каждой проблемы. В этой форме имеется восемь меток с атрибутом for , который не соответствует id поля формы.

Используйте DevTools для улучшения доступности форм.

DevTools также может выявить проблемы доступности автозаполнения, например, поле формы, которое не имеет ни атрибута aria-labelledby , ни связанного с ним <label> .

Панель специальных возможностей Chrome DevTools, показывающая, что для элемента ввода в форме найдена метка.

В этом примере элемент <input> имеет соответствующую метку. Это означает, что вспомогательные устройства могут сообщать о назначении элемента. Однако в следующем примере не найдено соответствующей метки или атрибута aria-labelledby .

Панель специальных возможностей Chrome DevTools, показывающая, что для элемента ввода в форме не найдено соответствующей метки или атрибута aria-labeledby.

Оставьте отзыв о новых функциях автозаполнения в DevTools.

Используйте следующие параметры, чтобы обсудить новые функции и изменения в публикации или что-либо еще, связанное с DevTools:

  • Отправьте нам предложение или отзыв с помощью зонтичной ошибки на crbug.com .
  • Сообщите о проблеме с помощью DevTools: Дополнительные параметры > Справка > Сообщить о проблеме с DevTools .
  • Напишите в Твиттере @ChromeDevTools .

Узнать больше

  • Изучите формы : курс по HTML-формам, который поможет вам улучшить свои навыки веб-разработчика. Идеально подходит для новичков в формах и автозаполнении.
  • web.dev/tags/forms : рекомендации, лучшие практики и лаборатории кода для форм оплаты, входа в систему и адреса.