A equipe do Chrome DevTools está criando novos recursos para ajudar você a encontrar problemas de formulário e depurar o Preenchimento automático.
No Chrome Canary, estamos testando novos recursos no DevTools para ajudar os desenvolvedores a entender como o preenchimento automático de formulários funciona e por que ele às vezes falha:
- Como o preenchimento automático do navegador mapeia os valores armazenados para os campos do formulário?
- Quais critérios são usados pelo preenchimento automático para preencher um campo de formulário?
- Quais campos não foram preenchidos pelo preenchimento automático?
- Por que um campo de formulário não é preenchido pelo preenchimento automático?
Este artigo descreve os novos recursos do Chrome DevTools e explica como testá-los e enviar feedback.
O que é o preenchimento automático?
O Chrome ajuda os usuários a gerenciar endereços, informações de pagamento e de login, armazenando conjuntos de dados com segurança e oferecendo o preenchimento de campos de formulário sem que o usuário precise digitar texto. Isso é conhecido como preenchimento automático.
O Chrome oferece a opção de salvar dados de preenchimento automático quando você envia um formulário. Em dispositivos móveis, faça o seguinte:
Em seguida, o Chrome oferece o preenchimento automático de formulários com os dados salvos.
Em dispositivos móveis, faça o seguinte:
No computador:
Você pode gerenciar seus dados de preenchimento automático nas configurações do Chrome.
Em dispositivos móveis, faça o seguinte:
No computador:
Talvez você também tenha visto o Chrome oferecer sugestões para campos de entrada que não estão relacionados a endereço, cartão de crédito ou dados de login. Além de oferecer o preenchimento automático para conjuntos de dados estruturados, como endereço e detalhes de pagamento, o Chrome ajuda os usuários a evitar a reinserção de dados em campos de formulário único que não podem ser processados pelo preenchimento automático. Quando um formulário tem um campo com um atributo de nome que o Chrome já encontrou antes, ele pode sugerir valores para que você não precise inserir os dados novamente.
Veja um exemplo simples:
O Chrome DevTools mostra que o campo de formulário aqui não tem atributos significativos para o
navegador. Em vez disso, é apenas um atributo name de n300.
O campo não corresponde a um valor em um conjunto de dados estruturados que o tornaria adequado para o preenchimento automático do Chrome, mas o Chrome ainda pode ajudar o usuário se encontrar um campo com esse nome no futuro.
Testar os novos recursos de preenchimento automático do Chrome DevTools
O Chrome está testando novos recursos para o painel Issues (Problemas) do DevTools, para ajudar a depurar falhas de preenchimento automático.
Você pode testar esses novos recursos no Chrome Canary. Verifique 
Configurações > Experimentos > 
Destaca um nó ou atributo que viola a árvore DOM do painel "Elements" nas
Ferramentas do desenvolvedor e recarregue as Ferramentas do desenvolvedor quando solicitado.
Como alternativa, execute o Chrome Canary na linha de comando com a
flag 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
Para verificar problemas, abra o painel Issues (Problemas) do DevTools em uma página que tenha um formulário. form-problems.glitch.me é um bom lugar para começar.
Como você pode ver, este formulário está uma bagunça. Eis alguns:
- Campos de entrada sem um atributo
idouname. - Elementos com IDs duplicados.
- Um
<label>com um atributoforque não corresponde a um ID de elemento. - Um campo com um atributo
autocompletevazio.
Passe o cursor sobre um elemento destacado na árvore DOM e clique em View issue (Mostrar problema) para saber mais.
Clique em Violating node para conferir os recursos afetados em cada problema. Este formulário tem oito rótulos
com um atributo for que não corresponde ao id de um campo de formulário.
Usar o DevTools para melhorar a acessibilidade do formulário
O DevTools também pode destacar problemas de acessibilidade de preenchimento automático, como um campo de formulário que não tem
um atributo aria-labelledby ou um <label> associado.
Neste exemplo, um elemento <input> tem um rótulo correspondente. Isso significa que os dispositivos de assistência podem
anunciar a finalidade do elemento. No entanto, no exemplo a seguir, nenhum rótulo ou
atributo aria-labelledby correspondente foi encontrado.
Enviar feedback sobre os novos recursos de preenchimento automático no DevTools
Use as opções a seguir para discutir os novos recursos e as mudanças na postagem ou qualquer outra coisa relacionada ao DevTools:
- Envie uma sugestão ou feedback usando o bug de guarda-chuva em crbug.com.
- Informe um problema no DevTools: Mais opções > Ajuda > Informar um problema do DevTools.
- Envie um tweet para @ChromeDevTools.
Saiba mais
- Aprenda sobre formulários: um curso sobre formulários HTML para ajudar você a melhorar sua experiência como desenvolvedor da Web. Ideal para quem está começando a usar formulários e o preenchimento automático.
- web.dev/tags/forms: orientações, práticas recomendadas e codelabs para formularios de pagamento, login e endereço.