El equipo de Herramientas para desarrolladores de Chrome está creando funciones nuevas adicionales para ayudarte a encontrar problemas con los formularios y depurar Autocompletar.
En Chrome Canary, estamos probando nuevas funciones en DevTools que tienen como objetivo ayudar a los desarrolladores a comprender cómo funciona Autocompletar de formularios y por qué, a veces, falla:
- ¿Cómo asigna el Autocompletar del navegador los valores almacenados para formar campos?
- ¿Qué criterios usa Autocompletar para completar un campo de formulario?
- ¿Qué campos no se completaron automáticamente?
- ¿Por qué Autocomplete no completa un campo de formulario?
En este artículo, se describen las nuevas funciones de las Herramientas para desarrolladores de Chrome y se explica cómo puedes probarlas y enviar comentarios.
¿Qué es Autocompletar?
Chrome ayuda a los usuarios a administrar la información de dirección, pago y acceso, ya que almacena de forma segura conjuntos de datos y ofrece completar los campos de formulario sin que el usuario tenga que ingresar texto. Esto se conoce como Autocompletar.
Chrome ofrece guardar los datos de Autocompletar cuando envías un formulario. En dispositivos móviles, haz lo siguiente:
Luego, Chrome ofrece autocompletar formularios con los datos que se guardaron.
En dispositivos móviles, haz lo siguiente:
En computadoras:
Puedes administrar tus datos de Autocompletar en la configuración de Chrome.
En dispositivos móviles, haz lo siguiente:
En computadoras:
También es posible que hayas visto que Chrome ofrece sugerencias para campos de entrada que no están relacionados con la dirección, la tarjeta de crédito ni los datos de acceso. Además de ofrecer Autocompletar para conjuntos de datos estructurados, como la dirección y los detalles del pago, Chrome ayuda a los usuarios a evitar volver a ingresar datos para campos de formulario individuales que Autocompletar no puede controlar. Cuando un formulario tiene un campo con un atributo de nombre que Chrome ya encontró, puede sugerir valores para que no tengas que volver a ingresar los datos.
Este es un ejemplo sencillo:
Las Herramientas para desarrolladores de Chrome muestran que el campo del formulario no tiene atributos significativos para el navegador. En cambio, es solo un atributo name de n300.
El campo no corresponde a un valor en un conjunto de datos estructurados que lo harían adecuado para la función Autocompletar de Chrome, pero Chrome aún puede ayudar al usuario si encuentra un campo con este nombre en el futuro.
Prueba las nuevas funciones de autocompletado de las Herramientas para desarrolladores de Chrome
Chrome está probando nuevas funciones para el panel Problemas de DevTools, para ayudar a depurar errores de Autocompletar.
Puedes probar estas nuevas funciones en Chrome Canary. Marca 
Configuración > Experimentos > 
Destaca un nodo o atributo que incumple en el árbol DOM del panel de elementos en DevTools y vuelve a cargar DevTools cuando se te solicite.
Como alternativa, puedes ejecutar Chrome Canary desde la línea de comandos con la marca AutofillEnableDevtoolsIssues:
- Windows:
shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues - Mac:
shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
Para verificar si hay problemas, abre el panel Problemas de DevTools en una página que tenga un formulario. form-problems.glitch.me es un buen lugar para comenzar.
Como puedes ver, este formulario es un desastre. Son los siguientes:
- Campos de entrada sin un atributo
idoname - Elementos con IDs duplicados
- Un
<label>con un atributoforque no coincide con un ID de elemento - Un campo con un atributo
autocompletevacío.
Coloca el cursor sobre un elemento destacado en el árbol DOM y haz clic en Ver problema para obtener más información.
Haz clic en Nodo infractor para ver los recursos afectados por cada problema. Este formulario tiene ocho etiquetas con un atributo for que no coincide con el id de un campo de formulario.
Usa DevTools para mejorar la accesibilidad de los formularios
Las Herramientas para desarrolladores también pueden destacar problemas de accesibilidad de Autocompletar, como un campo de formulario que no tiene un atributo aria-labelledby ni un <label> asociado.
En este ejemplo, un elemento <input> tiene una etiqueta coincidente. Esto significa que los dispositivos de accesibilidad pueden
anunciar el propósito del elemento. Sin embargo, en el siguiente ejemplo, no se encontró ninguna etiqueta ni atributo aria-labelledby coincidentes.
Envía comentarios sobre las nuevas funciones de Autocompletar en DevTools
Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otro tema relacionado con DevTools:
- Envíanos una sugerencia o comentario a través del error de paraguas en crbug.com.
- Informa un problema desde DevTools: Más opciones > Ayuda > Informar un problema de DevTools.
- Twittea a @ChromeDevTools.
Más información
- Learn Forms: Un curso sobre formularios HTML para ayudarte a mejorar tu experiencia como desarrollador web. Ideal para quienes no conocen los formularios ni el autocompletado.
- web.dev/tags/forms: Orientación, prácticas recomendadas y codelabs para formularios de pago, acceso y dirección.