Preenchimento automático: inspecionar e depurar endereços salvos

Sofia Emelianova

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é more_vert Personalizar e controlar o Google Chrome > key Senha e preenchimento automático > location_on Endereços e mais e ative toggle_on 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 check_box_outline_blank Abrir painel automaticamente.

Para abrir o painel Preenchimento automático manualmente:

1. Abra o DevTools.

2. Abra o menu de comando pressionando:

   • macOS: Command+Shift+P
   • Windows, Linux e ChromeOS: Control + Shift + P

   

3. 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 double_arrow Mais painéis e selecione Preenchimento automático na lista suspensa.
• No canto superior direito, selecione more_vert 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:

1. 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.
2. Abra o DevTools, por exemplo, nesta página de demonstração.
3. 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.
4. 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:

1. Abra o painel Preenchimento automático e ative a check_box Mostrar dados de endereço de teste no menu de preenchimento automático na parte superior do painel.
2. 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.