Il team di DevTools di Chrome sta sviluppando nuove funzionalità per aiutarti a trovare i problemi dei moduli e a eseguire il debug della compilazione automatica.
In Chrome Canary stiamo testando nuove funzionalità in DevTools che hanno lo scopo di aiutare gli sviluppatori a capire come funziona la compilazione automatica dei moduli e perché a volte non va a buon fine:
- In che modo la compilazione automatica del browser mappa i valori archiviati ai campi del modulo?
- Quali criteri vengono utilizzati dalla compilazione automatica per compilare un campo del 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 puoi testarle e fornire feedback.
Che cos'è la compilazione automatica?
Chrome aiuta gli utenti a gestire indirizzi, dati di pagamento e dati di accesso archiviando in sicurezza insiemi di dati e offrendo di compilare i campi dei moduli senza che l'utente debba inserire del testo. Si tratta della compilazione automatica.
Chrome ti offre la possibilità di salvare i dati della compilazione automatica quando invii un modulo. Dai dispositivi mobili:
Successivamente, Chrome offre la possibilità 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 che Chrome offre suggerimenti per i campi di immissione non correlati a indirizzo, carta di credito o dati di accesso. Oltre a offrire la compilazione automatica per insiemi di dati strutturati come dettagli di indirizzo e pagamento, Chrome aiuta gli utenti a evitare di inserire di nuovo i dati per singoli campi del modulo che non possono essere gestiti dalla compilazione automatica. Quando un modulo contiene un campo con un attributo name che Chrome ha già incontrato, Chrome può suggerire valori in modo da non dover reinserire i dati.
Ecco un semplice esempio:
Strumenti per sviluppatori di Chrome mostra che il campo del modulo qui non ha attributi significativi per il browser. È invece solo un attributo name di n300.
Il campo non corrisponde a un valore in un insieme di dati strutturati che lo rende adatto per la compilazione automatica di Chrome, ma Chrome può comunque aiutare l'utente se in futuro rileva un campo con questo nome.
Testare le nuove funzionalità di compilazione automatica di Chrome DevTools
Chrome sta testando nuove funzionalità per il riquadro Problemi di DevTools, per facilitare il debug dei bug di compilazione automatica.
Puoi provare queste nuove funzionalità in Chrome Canary. Seleziona 
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 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. Sono disponibili:
- Campi di immissione 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 nella struttura DOM e fai clic su Visualizza problema per saperne di più.
Fai clic su Nodo in violazione per visualizzare le risorse interessate per ogni problema. Questo modulo contiene otto etichette con un attributo for che non corrisponde al id di un campo del modulo.
Utilizzare DevTools per migliorare l'accessibilità dei moduli
DevTools può anche evidenziare problemi di accessibilità della 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 di assistenza possono annunciare lo scopo dell'elemento. Tuttavia, nell'esempio seguente non è stata trovata alcuna etichetta o attributo aria-labelledby corrispondente.
Fornire feedback sulle nuove funzionalità di compilazione automatica in DevTools
Utilizza le seguenti opzioni per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altro argomento correlato a DevTools:
- Inviaci un suggerimento o un feedback tramite il bug ombrello su crbug.com.
- Segnala un problema da DevTools: Altre opzioni > Guida > Segnala un problema DevTools.
- Invia un tweet all'account @ChromeDevTools.
Scopri di più
- Scopri i moduli: un corso sui moduli HTML per aiutarti a migliorare la tua esperienza come sviluppatore web. Ideale per chi non ha mai utilizzato i moduli e la compilazione automatica.
- web.dev/tags/forms: indicazioni, best practice e codelab per moduli di pagamento, accesso e indirizzo.