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.
Guarda la información de la dirección 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.
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í.
Si no tienes datos de dirección guardados y no quieres hacerlo, puedes usar los datos de dirección de prueba que proporciona el panel Autocompletar.
Abre el panel Autocompletar
De forma predeterminada, el panel Autocompletar se abre automáticamente si DevTools está abierto 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, haz lo siguiente:
- Abre Herramientas para desarrolladores.
Para abrir el menú de comandos, presiona las siguientes teclas:
- macOS: Command+Mayúsculas+P
- Windows, Linux y ChromeOS: Control + Mayúsculas + P
Comienza a escribir
autofill, selecciona Mostrar Autocompletar y presiona Intro.DevTools abre el panel en el panel lateral de la parte inferior de la ventana de DevTools de forma predeterminada. También puedes moverlo a la parte superior.
Como alternativa, puedes abrir el panel Autocompletar de las siguientes maneras:
- En la barra de acciones de la parte superior, haz clic en Más paneles y selecciona Autocompletar 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:
- 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.
- Abre DevTools, por ejemplo, en esta página de demostración.
- En el formulario web de direcciones de la página de demostración, enfoca un campo del formulario. Chrome muestra un menú desplegable con opciones de datos de autocompletar.
- 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.
Usa datos de direcciones de prueba
Si no tienes datos de dirección 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:
- Abre el panel Autocompletar y activa la Mostrar datos de direcciones de prueba en el menú de Autocompletar en la parte superior del panel.
- 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.
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.
- El valor, si corresponde, que Autocompletar insertó en los campos que reconoció.
