Autocompletar: Inspecciona y depura direcciones guardadas

Sofia Emelianova
Sofia Emelianova

Usa el panel Autocompletar para inspeccionar y depurar la información de direcciones guardada en Chrome.

Descripción general

La función Autocompletar de Chrome proporciona una forma conveniente de completar automáticamente formularios en sitios web con direcciones guardadas. El panel Autocompletar de DevTools te permite inspeccionar la asignación entre los campos de tu formulario, los valores de autocompletar previstos y los datos guardados.

Cómo guardar información de direcciones en Chrome

De forma predeterminada, Chrome te solicita que guardes la información de la dirección que ingresaste en un formulario web cuando lo envías.

Un mensaje para guardar la información de la dirección.

Si no aparece ese mensaje, en la esquina superior derecha de Chrome, navega a Personalizar y controlar Google Chrome > Contraseñas y Autocompletar > Direcciones y más y activa Guardar y completar direcciones. También puedes agregar direcciones nuevas aquí.

La opción de menú “Direcciones y más”.

Si no tienes datos de direcciones guardados y no quieres guardarlos, puedes usar los datos de direcciones de prueba que proporciona el panel Autocompletar.

Abre el panel Autocompletar

De forma predeterminada, el panel Autocompletar se abre automáticamente si las Herramientas para desarrolladores están abiertas y cuando autocompletas un formulario en un sitio web. Para desactivar esta opción, abre el panel de forma manual y desmarca la casilla de verificación Abrir este panel automáticamente.

Para abrir manualmente el panel Autocompletar, sigue estos pasos:

  1. Abre las Herramientas para desarrolladores.
  2. Para abrir el menú de comandos, presiona las siguientes teclas:

    • macOS: Comando+Mayúsculas+P
    • Windows, Linux y ChromeOS: Control + Mayúsculas + P

    Menú de comandos con

  3. Comienza a escribir autofill, selecciona Mostrar Autocompletar y presiona Intro.

    De forma predeterminada, DevTools abre el panel en el panel lateral que se encuentra en la parte inferior de la ventana de DevTools. También puedes moverlo a la parte superior.

Como alternativa, puedes abrir el panel Autocompletar de las siguientes maneras:

  • En la barra de acción de la parte superior, haz clic en Más paneles y selecciona Completar automáticamente en la lista desplegable.
  • En la esquina superior derecha, selecciona Personalizar y controlar DevTools > Más herramientas > Autocompletar.

Inspecciona los datos de Autocompletar

Para inspeccionar los datos de Autocompletar, sigue estos pasos:

  1. Asegúrate de que la función Autocompletar esté activada y de que tengas guardada la información de la dirección en Chrome. Como alternativa, puedes usar los datos de la dirección de prueba como se describe en la siguiente sección.
  2. Abre DevTools, por ejemplo, en esta página de demostración.
  3. En el formulario web de direcciones de la página de demostración, enfoca un campo de formulario. Chrome muestra un menú desplegable con opciones de datos de autocompletar.
  4. Selecciona una opción del menú. Autocompletar completa el formulario con los datos guardados, y DevTools abre el panel Autocompletar si la apertura automática está activada. De lo contrario, abre el panel Autocompletar de forma manual.

Se seleccionó una opción para autocompletar datos.

Usa datos de direcciones de prueba

Si no tienes datos de direcciones guardados y no quieres guardarlos, puedes usar los datos de prueba que proporciona el panel Autocompletar.

Para usar los datos de prueba, haz lo siguiente:

  1. Abre el panel Autocompletar y activa la Mostrar datos de direcciones de prueba en el menú de Autocompletar en la parte superior del panel.
  2. En la página, haz clic con el botón derecho en un formulario de dirección y selecciona una de las opciones del menú Herramientas para desarrolladores.

El menú "Herramientas para desarrolladores" con opciones de datos de direcciones de prueba.

Datos y su asignación

El panel Autocompletar muestra los datos que insertó en los campos del formulario y una tabla con la asignación entre lo siguiente:

  • Se detectó un campo de formulario en la página.
  • Valor de predicción de autocompletado, que Autocompletado determina mediante heurísticas.
  • Es el valor, si corresponde, que Autocompletar insertó en los campos que reconoció.

El panel Autocompletar

Problemas de Autocomplete detectados por el panel de problemas