Chrome DevTools ekibi, form sorunlarını bulmanıza ve Otomatik Doldurma'da hata ayıklamanıza yardımcı olacak yeni özellikler geliştiriyor.
Chrome Canary'de, geliştiricilerin form otomatik doldurma özelliğinin nasıl çalıştığını ve neden bazen başarısız olduğunu anlamalarına yardımcı olmayı amaçlayan DevTools'daki yeni özellikleri test ediyoruz:
- Tarayıcı otomatik doldurma, depolanan değerleri form alanlarıyla nasıl eşler?
- Otomatik doldurma, bir form alanını doldurmak için hangi ölçütleri kullanır?
- Hangi alanlar otomatik doldurma özelliğiyle doldurulmadı?
- Bir form alanı neden Otomatik Doldurma tarafından doldurulmuyor?
Bu makalede, Chrome DevTools'taki yeni özellikler özetlenmiştir. Ayrıca, bu özellikleri nasıl test edebileceğiniz ve geri bildirimde bulunabileceğiniz açıklanmaktadır.
Otomatik doldurma nedir?
Chrome, veri kümelerini güvenli bir şekilde saklayarak ve kullanıcının metin girmesi gerekmeden form alanlarını doldurmayı teklif ederek kullanıcıların adres, ödeme ve giriş bilgilerini yönetmesine yardımcı olur. Buna otomatik doldurma denir.
Chrome, form gönderdiğinizde Otomatik Doldurma verilerini kaydetmeyi teklif eder. Mobil cihazda:
Ardından Chrome, formları kayıtlı verilerle otomatik olarak doldurmayı teklif eder.
Mobil cihazda:
Masaüstü bilgisayarda:
Otomatik doldurma verilerinizi Chrome ayarlarından yönetebilirsiniz.
Mobil cihazda:
Masaüstü bilgisayarda:
Chrome'un adres, kredi kartı veya giriş verileriyle ilgili olmayan giriş alanları için öneriler sunduğunu da görmüş olabilirsiniz. Chrome, adres ve ödeme ayrıntıları gibi yapılandırılmış veri kümelerini otomatik doldurmanın yanı sıra, Otomatik Doldurma tarafından işlenemeyen tek form alanları için kullanıcıların verileri yeniden girmesini önler. Bir formda, Chrome'un daha önce karşılaştığı bir ad özelliğine sahip bir alan varsa Chrome, verileri yeniden girmeniz gerekmeyecek şekilde değerler önerebilir.
Basit bir örnek verelim:
Chrome Geliştirici Araçları, buradaki form alanının tarayıcı için anlamlı özelliklere sahip olmadığını gösterir. Bunun yerine, n300
öğesinin yalnızca bir name
özelliğidir.
Alan, yapılandırılmış veri grubundaki bir değere karşılık gelmez. Bu nedenle, Chrome Otomatik Doldurma için uygun değildir. Ancak Chrome, gelecekte bu ada sahip bir alanla karşılaşırsa kullanıcıya yardımcı olabilir.
Yeni Chrome Geliştirici Araçları Otomatik Doldurma özelliklerini test etme
Chrome, Otomatik Doldurma hatalarını ayıklamaya yardımcı olmak için DevTools Sorunlar panelinde yeni özellikleri test ediyor.
Bu yeni özellikleri Chrome Canary'da deneyebilirsiniz. DevTools'da Ayarlar > Deneyler >
Nesneler paneli DOM ağacında ihlal eden bir düğümü veya özelliği vurgular seçeneğini işaretleyin ve istendiğinde DevTools'u yeniden yükleyin.
Alternatif olarak, Chrome Canary'ı AutofillEnableDevtoolsIssues
işaretiyle komut satırından çalıştırabilirsiniz:
- 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
Sorun olup olmadığını kontrol etmek için formu içeren bir sayfada Geliştirici Araçları Sorunlar panelini açın. form-problems.glitch.me, başlamak için iyi bir yerdir.
Gördüğünüz gibi bu form çok dağınık. Şunlar vardır:
id
veyaname
özelliği olmayan giriş alanları.- Yinelenen kimliklere sahip öğeler.
- Öğe kimliğiyle eşleşmeyen bir
for
özelliğine sahip<label>
. - Boş bir
autocomplete
özelliğine sahip alan.
Daha fazla bilgi edinmek için DOM ağacında vurgulanan bir öğenin üzerine gelip Sorunu görüntüle'yi tıklayın.
Her sorun için etkilenen kaynakları görüntülemek üzere Kuralı ihlal eden düğüm'ü tıklayın. Bu formda, form alanının id
özelliğiyle eşleşmeyen bir for
özelliğine sahip sekiz etiket var.
Form erişilebilirliğini iyileştirmek için Geliştirici Araçları'nı kullanma
Geliştirici Araçları, otomatik doldurma erişilebilirliği sorunlarını (ör. aria-labelledby
özelliği veya ilişkili bir <label>
bulunmayan form alanı) da vurgulayabilir.
Bu örnekte, bir <input>
öğesinin eşleşen bir etiketi vardır. Bu, yardımcı cihazların öğenin amacını duyurabileceği anlamına gelir. Ancak aşağıdaki örnekte eşleşen bir etiket veya aria-labelledby
özelliği bulunamadı.
Geliştirici Araçları'ndaki yeni otomatik doldurma özellikleriyle ilgili geri bildirimde bulunma
Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili başka bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın:
- crbug.com'daki genel hata üzerinden bize öneri veya geri bildirim gönderin.
- Geliştirici Araçları'ndan sorun bildirme: Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i tıklayın.
- @ChromeDevTools hesabına tweet gönderin.
Daha fazla bilgi
- Formları Öğrenin: Web geliştirici uzmanlığınızı geliştirmenize yardımcı olacak HTML formları kursu. Formlar ve Otomatik Doldurma'ya yeni başlayanlar için idealdir.
- web.dev/tags/forms: Ödeme, giriş ve adres formları için rehberlik, en iyi uygulamalar ve kod laboratuvarları.