El equipo de Herramientas para desarrolladores de Chrome está compilando nuevas funciones adicionales para ayudarte a encontrar problemas con los formularios y depurar la función Autocompletar.
En Chrome Canary, estamos probando nuevas funciones en Herramientas para desarrolladores con el objetivo de ayudar a los desarrolladores a comprender cómo funciona Autocompletar en formato de formato y por qué a veces falla:
- ¿Cómo la función Autocompletar del navegador asigna los valores almacenados a los campos del formulario?
- ¿Qué criterios utiliza Autocompletar para completar un campo de formulario?
- ¿Qué campos no se completaron con Autocompletar?
- ¿Por qué Autocompletar no completa un campo de formulario?
En este artículo, se describen las funciones nuevas de las Herramientas para desarrolladores de Chrome y se explica cómo puedes probarlas y proporcionar comentarios.
¿Qué es Autocompletar?
Para ayudar a los usuarios a administrar la información sobre la dirección, los pagos y el acceso, Chrome almacena conjuntos de datos de forma segura y ofrece completar los campos del formulario sin que el usuario tenga que ingresar texto. Eso se conoce como Autocompletar.
Chrome te ofrece guardar los datos de Autocompletar cuando envías un formulario. En dispositivos móviles, haz lo siguiente:
Posteriormente, Chrome ofrece autocompletar formularios con los datos guardados.
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:
Es posible que también 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 la función Autocompletar para conjuntos de datos estructurados, como la dirección y los detalles del pago, Chrome ayuda a los usuarios a evitar tener que volver a ingresar datos para conjuntos de datos del formulario que esta función no puede administrar. Cuando un formulario tiene un campo con un atributo de nombre que Chrome encontró anteriormente, Chrome puede sugerir valores para que no tengas que volver a ingresar datos.
Veamos un ejemplo simple:
Las Herramientas para desarrolladores de Chrome muestran que este campo del formulario no tiene atributos que sean significativos para el navegador. En su lugar, es solo un atributo name de n300.
El campo no corresponde a un valor en un conjunto de datos estructurados que sería apropiado para la función Autocompletar de Chrome, pero Chrome puede ayudar al usuario de todas formas si encuentra un campo con este nombre en el futuro.
Prueba las nuevas funciones de Autocompletar de las Herramientas para desarrolladores de Chrome
Chrome está probando nuevas funciones del panel Issues de Herramientas para desarrolladores a fin de depurar errores de Autocompletar.
Puedes probar estas nuevas funciones en Chrome Canary. Verifica 
Settings > Experiments > 
Destaca un nodo o atributo que incumple las políticas en el árbol del DOM del panel Elements en DevOps y vuelve a cargar Herramientas para desarrolladores 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 comprobar si hay problemas, abre el panel Issues de Herramientas para desarrolladores en una página que tenga un formulario. form-problems.glitch.me es un buen punto de partida.
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 ningún ID de elemento. - Un campo con un atributo
autocompletevacío.
Coloca el cursor sobre un elemento destacado en el árbol del DOM y haz clic en View issue para obtener más información.
Haz clic en Nodo en incumplimiento 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 del formulario.
Use las Herramientas para desarrolladores 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 asistencia pueden
anunciar el propósito del elemento. Sin embargo, en el siguiente ejemplo, no se encontró ninguna etiqueta coincidente ni un atributo aria-labelledby.
Enviar comentarios sobre las nuevas funciones de Autocompletar en Herramientas para desarrolladores
Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores:
- Envía tus sugerencias o comentarios a través del error general de crbug.com.
- Informa un problema desde Herramientas para desarrolladores: Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores.
- Envía un tweet a @ChromeDevTools.
Más información
- Formularios de aprendizaje: Es un curso sobre formularios HTML para ayudarte a mejorar tu experiencia como desarrollador web. Ideal para cualquier persona que no tenga experiencia en los formularios y la función Autocompletar.
- web.dev/tags/forms: Orientación, prácticas recomendadas y codelabs para los formularios de pago, acceso y dirección.