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

Sofia Emelianova
Sofia Emelianova

Use o painel Preenchimento automático para inspecionar e depurar as informações de endereço salvas no Chrome.

Visão geral

O preenchimento automático do Chrome é uma maneira conveniente de preencher automaticamente formulários em sites com endereços salvos. O painel Autofill no DevTools permite inspecionar o mapeamento entre os campos do formulário, os valores de preenchimento automático previstos e os dados salvos.

Salvar informações de endereço no Chrome

Por padrão, o Chrome solicita que você salve as informações de endereço inseridas em um formulário da Web quando ele é enviado.

Uma solicitação para salvar informações de endereço.

Se essa solicitação não aparecer, acesse more_vert Personalizar e controlar o Google Chrome > chave Senha e preenchimento automático > location_on Endereços e mais e ative toggle_on Salvar e preencher endereços. Você também pode adicionar novos endereços aqui.

A opção de menu "Endereços e mais".

Abrir o painel de preenchimento automático

Por padrão, o painel Preenchimento automático será aberto automaticamente se o DevTools estiver aberto e quando você preencher automaticamente um formulário em um site. Para desativar esse recurso, abra o painel manualmente e desmarque a caixa de seleção check_box_outline_blank Abrir este painel automaticamente.

Para abrir manualmente o painel Preenchimento automático:

  1. Abra o DevTools.
  2. Abra o menu de comando pressionando:

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

    Menu de comando com

  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 do DevTools. Você também pode mover para a parte superior.

Você também pode abrir o painel Preenchimento automático das seguintes maneiras:

  • Na barra de ações localizada na parte superior, 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 DevTools > Mais ferramentas > Preenchimento automático.

Inspecionar dados de preenchimento automático

Para inspecionar os dados de preenchimento automático:

  1. Confira se o Preenchimento automático está ativado e se as informações de endereço estão salvas no Chrome.
  2. Abra o DevTools, por exemplo, nesta página de demonstração.
  3. No formulário da Web de endereços na página de demonstração, focalize 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 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.

Uma opção de preenchimento automático de dados selecionada.

Dados e seu mapeamento

O painel Preenchimento automático mostra os dados inseridos nos campos do formulário e uma tabela com mapeamento entre os seguintes itens:

  • Campo do formulário detectado na página.
  • Valor previsto do preenchimento automático, que o Preenchimento automático determina usando heurística.
  • Valor, se houver, que o Preenchimento automático inseriu nos campos reconhecidos.

O painel de preenchimento automático.

Problemas de preenchimento automático detectados pelo painel "Problemas".