A equipe do Chrome DevTools está criando novos recursos para ajudar você a encontrar problemas nos formulários 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 valores armazenados para campos de 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, explica como testá-los e enviar feedback.
O que é o preenchimento automático?
O Chrome ajuda os usuários a gerenciar informações de endereço, pagamento e login, armazenando conjuntos de dados com segurança e oferecendo o preenchimento de campos de formulários sem que o usuário precise inserir texto. Isso é conhecido como preenchimento automático.
O Chrome se oferece para salvar dados do 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 o Chrome ofereça sugestões para campos de entrada nã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ços e detalhes de pagamento, o Chrome ajuda os usuários a evitar a reinserção de dados para campos únicos de formulário 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 encontrou antes, o navegador pode sugerir valores para que você não precise inserir dados novamente.
Veja um exemplo simples:
O Chrome DevTools mostra que o campo do formulário 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 apropriado para o preenchimento automático do Chrome, mas o Chrome ainda pode ajudar o usuário caso encontre 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 do DevTools para ajudar a depurar falhas de preenchimento automático.
Você pode testar esses novos recursos no Chrome Canary. Verifique 
Configurações > Experimentos > 
Realça um nó ou atributo de violação na árvore DOM do painel Elementos no DevTools e recarregue o DevTools quando solicitado.
Como alternativa, execute o Chrome Canary na linha de comando com a
sinalização 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 se há problemas, abra o painel Issues do DevTools em uma página que tenha um formulário. form-problems.glitch.me é um bom ponto de partida.
Como você pode ver, este formulário é uma bagunça! Eis alguns:
- Campos de entrada sem um atributo
idouname. - Elementos com IDs duplicados.
- Uma
<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 do DOM e clique em Ver problema para saber mais.
Clique em Nó com violações 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 assistivos 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 mudanças na postagem ou qualquer outra coisa relacionada ao DevTools:
- Envie uma sugestão ou feedback pelo bug de guarda-chuva em crbug.com.
- Informe um problema no DevTools: Mais opções > Ajuda > Informar um problema do DevTools.
- Envie um tweet em @ChromeDevTools.
Saiba mais
- Aprender Formulários: um curso sobre formulários HTML para ajudar você a melhorar sua experiência como desenvolvedor da Web. Ideal para iniciantes em formulários e preenchimento automático.
- web.dev/tags/forms: orientações, práticas recomendadas e codelabs para formulários de pagamento, login e endereço.