Use o painel Preenchimento automático para inspecionar e depurar informações de endereço salvas no Chrome.
Visão geral
O preenchimento automático do Chrome é uma maneira conveniente de preencher formulários em sites com endereços salvos. O painel Preenchimento automático no DevTools permite inspecionar o mapeamento entre os campos do formulário, os valores previstos do preenchimento automático e os dados salvos.
Salvar informações de endereço no Chrome
Por padrão, o Chrome pede para salvar as informações de endereço inseridas em um formulário da Web quando você o envia.
Caso essa solicitação não apareça, no canto superior direito do Chrome, navegue até Personalizar e controlar o Google Chrome > Senha e preenchimento automático > Endereços e mais e ative Salvar e preencher endereços. Também é possível adicionar novos endereços aqui.
Se você não tiver dados de endereço salvos e não quiser salvar, use os dados de endereço de teste fornecidos pelo painel Preenchimento automático.
Abrir o painel de preenchimento automático
Por padrão, o painel Preenchimento automático é aberto automaticamente se o DevTools estiver aberto e quando você preencher um formulário em um site. Para desativar essa opção, abra o painel manualmente e desmarque a caixa de seleção Abrir painel automaticamente.
Para abrir o painel Preenchimento automático manualmente:
- Abra o DevTools.
Abra o menu de comando pressionando:
- macOS: Command+Shift+P
- Windows, Linux e ChromeOS: Control + Shift + P
Comece a digitar
autofill, selecione Mostrar preenchimento automático e pressione Enter.Por padrão, o DevTools abre o painel na Gaveta na parte inferior da janela. Também é possível mover para o topo.
Também é possível abrir o painel Preenchimento automático das seguintes maneiras:
- Na barra de ações na parte de cima, clique em Mais painéis e selecione Preenchimento automático na lista suspensa.
- No canto superior direito, selecione Personalizar e controlar as ferramentas do DevTools > Mais ferramentas > Preenchimento automático.
Inspecionar dados de preenchimento automático
Para inspecionar dados de preenchimento automático:
- Verifique se o Preenchimento automático está ativado e se as informações de endereço estão salvas no Chrome. Como alternativa, use os dados de endereço de teste, conforme descrito na próxima seção.
- Abra o DevTools, por exemplo, nesta página de demonstração.
- No formulário da Web de endereço na página de demonstração, foque um campo do formulário. O Chrome mostra um menu suspenso com opções de preenchimento automático de dados.
- Selecione uma opção no menu. O preenchimento automático preenche o formulário com os dados salvos, e o DevTools abre o painel preenchimento automático se a abertura automática estiver ativada. Caso contrário, abra o painel Preenchimento automático manualmente.
Usar dados de endereço de teste
Se você não tiver dados de endereço salvos e não quiser salvar, use os dados de teste fornecidos pelo painel Preenchimento automático.
Para usar os dados de teste:
- Abra o painel Preenchimento automático e ative a Mostrar dados de endereço de teste no menu de preenchimento automático na parte superior do painel.
- Na página, clique com o botão direito do mouse em um formulário de endereço preenchido e selecione uma das opções no menu Ferramentas do desenvolvedor.
Dados e mapeamento
O painel Preenchimento automático mostra os dados inseridos nos campos do formulário e uma tabela com o mapeamento entre os seguintes elementos:
- Campo de formulário detectado na página.
- Valor previsto do preenchimento automático, que o preenchimento automático determina usando heurísticas.
- Valor, se houver, que o preenchimento automático inseriu nos campos reconhecidos.
