Il team di Chrome DevTools sta creando nuove funzionalità per aiutarti a individuare i problemi dei moduli ed eseguire il debug della compilazione automatica.
In Chrome Canary stiamo testando nuove funzionalità in DevTools per aiutare gli sviluppatori a capire come funziona la compilazione automatica dei moduli e perché a volte non funziona:
- In che modo la compilazione automatica del browser mappa i valori memorizzati ai campi del modulo?
- Quali criteri vengono utilizzati dalla compilazione automatica per compilare il campo di un modulo?
- Quali campi non sono stati compilati dalla compilazione automatica?
- Perché un campo del modulo non viene compilato dalla compilazione automatica?
Questo articolo illustra le nuove funzionalità di Chrome DevTools e spiega come testarle e fornire feedback.
Che cos'è la compilazione automatica?
Chrome aiuta gli utenti a gestire indirizzo, pagamento e accesso mediante l'archiviazione sicura di set di dati e offrendo loro la possibilità di compilare i campi dei moduli senza che l'utente debba inserire testo. È nota come compilazione automatica.
Chrome propone di salvare i dati della compilazione automatica quando invii un modulo. Dai dispositivi mobili:
Dopodiché, Chrome si offre di compilare automaticamente i moduli con i dati salvati.
Dai dispositivi mobili:
Su computer:
Puoi gestire i dati della compilazione automatica nelle impostazioni di Chrome.
Dai dispositivi mobili:
Su computer:
Potresti anche aver visto Chrome offrire suggerimenti per campi di immissione non correlati a indirizzo, carta di credito o dati di accesso. Oltre a offrire la compilazione automatica per set di dati strutturati, come indirizzo e dati di pagamento, Chrome aiuta gli utenti a evitare di reinserire dati per singoli campi di moduli che non possono essere gestiti dalla compilazione automatica. Quando un modulo contiene un campo con un attributo del nome già rilevato in Chrome, Chrome può suggerire valori in modo che tu non debba reinserire i dati.
Ecco un semplice esempio:
Chrome DevTools indica che il campo del modulo qui non ha attributi significativi per il browser. È solo un attributo name di n300.
Il campo non corrisponde a un valore in un insieme di dati strutturati che lo renderebbero appropriato per la compilazione automatica di Chrome, ma Chrome può comunque aiutare l'utente se in futuro trova un campo con questo nome.
Testa le nuove funzionalità di compilazione automatica di Chrome DevTools
Chrome sta testando le nuove funzionalità del riquadro Problemi di DevTools per consentire il debug degli errori di compilazione automatica.
Puoi provare queste nuove funzionalità in Chrome Canary. Controlla 
Impostazioni > Esperimenti > 
Evidenzia un nodo o un attributo in violazione nella struttura DOM del riquadro Elementi in
DevTools e ricarica DevTools quando richiesto.
In alternativa, puoi eseguire Chrome Canary dalla riga di comando con il flag 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
Per verificare la presenza di eventuali problemi, apri il riquadro Problemi di DevTools in una pagina contenente un modulo. form-problems.glitch.me è un buon punto di partenza.
Come puoi vedere, questo modulo è un disastro. Esistono:
- Campi senza un attributo
idoname. - Elementi con ID duplicati.
- Un
<label>con un attributoforche non corrisponde a un ID elemento. - Un campo con un attributo
autocompletevuoto.
Passa il mouse sopra un elemento evidenziato nell'albero DOM e fai clic su Visualizza problema per scoprire di più.
Fai clic su Nodo in violazione per visualizzare le risorse interessate per ogni problema. Questo modulo ha otto etichette con un attributo for che non corrisponde al valore id di un campo del modulo.
Utilizzare DevTools per migliorare l'accessibilità dei moduli
DevTools può anche evidenziare problemi di accessibilità di compilazione automatica, ad esempio un campo del modulo che non ha
un attributo aria-labelledby o un <label> associato.
In questo esempio, un elemento <input> ha un'etichetta corrispondente. Ciò significa che i dispositivi per la disabilità
possono annunciare lo scopo dell'elemento. Tuttavia, nell'esempio seguente non sono state trovate etichette corrispondenti o attributi aria-labelledby.
Fornisci feedback sulle nuove funzionalità di compilazione automatica in DevTools
Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools:
- Inviaci un suggerimento o un feedback tramite il bug cumulativo su crbug.com.
- Segnala un problema da DevTools: Altre opzioni > Guida > Segnala un problema DevTools.
- Tweet all'indirizzo @ChromeDevTools.
Scopri di più
- Impara a Moduli: un corso sui moduli HTML che ti consente di migliorare la tua esperienza di sviluppatore web. Ideale per chi non ha familiarità con i moduli e la compilazione automatica.
- web.dev/tags/forms: indicazioni, best practice e codelab per i moduli di pagamento, accesso e indirizzo.