Menemukan masalah formulir dengan Chrome DevTools

Tim Chrome DevTools sedang membangun fitur baru tambahan untuk membantu Anda menemukan masalah formulir dan men-debug Isi Otomatis.

Sam Dutton

Di Chrome Canary, kami menguji fitur baru di DevTools yang bertujuan untuk membantu developer memahami cara kerja Isi Otomatis formulir, dan alasan fitur ini terkadang gagal:

  • Bagaimana cara Isi Otomatis browser memetakan nilai yang tersimpan ke kolom formulir?
  • Kriteria apa yang digunakan Isi Otomatis untuk mengisi kolom formulir?
  • Kolom mana yang tidak diisi oleh fitur Isi Otomatis?
  • Mengapa kolom formulir tidak diisi oleh fitur Isi Otomatis?

Artikel ini menguraikan fitur baru di Chrome DevTools, dan menjelaskan cara mengujinya serta memberikan masukan.

Apa itu Isi Otomatis?

Chrome membantu pengguna mengelola informasi alamat, pembayaran, dan login, dengan menyimpan kumpulan data dengan aman dan menawarkan untuk mengisi kolom formulir tanpa perlu memasukkan teks. Ini dikenal sebagai Isi Otomatis.

Chrome menawarkan untuk menyimpan data Isi otomatis saat Anda mengirimkan formulir. Di perangkat seluler:

Tiga screenshot Android: formulir alamat di Chrome, Isi Otomatis Chrome menawarkan untuk menyimpan alamat, lalu menampilkan dialog untuk mengedit entri Isi Otomatis baru.

Selanjutnya, Chrome akan menawarkan untuk mengisi otomatis formulir dengan data yang telah disimpan.

Di perangkat seluler:

Di desktop:

Penawaran Chrome untuk mengisi otomatis formulir alamat di desktop

Anda dapat mengelola data Isi Otomatis di setelan Chrome.

Di perangkat seluler:

Setelan Chrome di Android: mengedit alamat

Di desktop:

halaman chrome://settings/addresses, yang menampilkan dua contoh alamat

Anda mungkin juga pernah melihat Chrome menawarkan saran untuk kolom input yang tidak terkait dengan alamat, kartu kredit, atau data login. Selain menawarkan Isi Otomatis untuk kumpulan data terstruktur seperti detail pembayaran dan alamat, Chrome membantu pengguna agar tidak memasukkan ulang data untuk satu kolom formulir yang tidak dapat ditangani oleh Isi Otomatis. Jika formulir memiliki kolom dengan atribut nama yang sebelumnya telah ditemukan oleh Chrome, Chrome dapat menyarankan nilai sehingga Anda tidak perlu memasukkan kembali data.

Berikut adalah contoh sederhana:

Chrome menawarkan saran untuk data tidak terstruktur dalam kolom tunggal

Chrome DevTools menunjukkan bahwa kolom formulir di sini tidak memiliki atribut yang berguna bagi browser. Sebagai gantinya, ini hanya atribut name dari n300.

Chrome DevTools menampilkan informasi tentang data tidak terstruktur dalam bentuk, seperti yang ditunjukkan pada contoh sebelumnya: satu input yang hanya memiliki atribut type=text dan name=n300.

Kolom ini tidak sesuai dengan nilai dalam kumpulan data terstruktur yang akan membuatnya sesuai untuk Isi Otomatis Chrome, tetapi Chrome masih dapat membantu pengguna jika menemukan kolom dengan nama ini di masa mendatang.

Menguji fitur Isi Otomatis Chrome DevTools baru

Chrome sedang menguji kemampuan baru untuk panel Issues DevTools, guna membantu men-debug gangguan Isi Otomatis.

Anda dapat mencoba kemampuan baru ini di Chrome Canary. Periksa Setelan Setelan. > Eksperimen > Kotak centang. Menandai node atau atribut yang melanggar di hierarki DOM panel Elemen di DevTools dan muat ulang DevTools saat diminta.

Halaman setelan Chrome DevTools, yang menampilkan 'Menyoroti node yang melanggar ...'

Atau, Anda dapat menjalankan Chrome Canary dari command line dengan tanda 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

Untuk memeriksa masalah, buka panel Issues DevTools di halaman yang berisi formulir. form-problems.glitch.me adalah tempat yang tepat untuk memulai.

Chrome DevTools menampilkan masalah dengan atribut untuk elemen formulir.

Seperti yang Anda lihat, formulir ini berantakan. Ada:

  • Kolom input tanpa atribut id atau name.
  • Elemen dengan ID duplikat.
  • <label> dengan atribut for yang tidak cocok dengan ID elemen.
  • Kolom dengan atribut autocomplete kosong.

Arahkan kursor ke elemen yang ditandai di hierarki DOM, lalu klik Lihat masalah untuk mempelajari lebih lanjut.

Masalah yang diperluas di Chrome DevTools: Penggunaan label yang salah untuk atribut.

Klik Melanggar node untuk melihat resource yang terpengaruh untuk setiap masalah. Formulir ini memiliki delapan label dengan atribut for yang tidak cocok dengan id kolom formulir.

Menggunakan DevTools untuk meningkatkan aksesibilitas formulir

DevTools juga dapat menandai masalah aksesibilitas Isi Otomatis, seperti kolom formulir yang tidak memiliki atribut aria-labelledby atau <label> terkait.

Panel Aksesibilitas Chrome DevTools, yang menunjukkan bahwa label ditemukan untuk elemen input dalam formulir.

Dalam contoh ini, elemen <input> memiliki label yang cocok. Ini berarti bahwa perangkat pendukung dapat mengumumkan tujuan elemen. Namun, dalam contoh berikut, tidak ditemukan label atau atribut aria-labelledby yang cocok.

Panel Aksesibilitas Chrome DevTools, yang menunjukkan bahwa tidak ditemukan label yang cocok, atau atribut aria-labelledby, untuk elemen input dalam formulir.

Memberikan masukan terkait fitur Isi Otomatis baru di DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools:

Cari tahu selengkapnya

  • Pelajari Formulir: Kursus tentang formulir HTML untuk membantu Anda meningkatkan keahlian developer web. Cocok bagi siapa saja yang baru menggunakan formulir dan Isi Otomatis.
  • web.dev/tags/forms: Panduan, praktik terbaik, dan codelab, untuk pembayaran, login, dan formulir alamat.