Chrome Geliştirici Araçları ekibi, form sorunlarını bulmanıza ve Otomatik Doldurma özelliği hatalarını ayıklamanıza yardımcı olacak yeni özellikler geliştiriyor.
Chrome Canary'de, Geliştirici Araçları'ndaki yeni özellikleri test ediyoruz. Bu özellikler, geliştiricilerin form Otomatik Doldurma'nın nasıl çalıştığını ve bazen neden başarısız olduğunu anlamalarına yardımcı olmayı amaçlar:
- Tarayıcı otomatik doldurma özelliği, depolanan değerleri form alanlarıyla nasıl eşler?
- Bir form alanını doldurmak için Otomatik Doldurma özelliği hangi ölçütleri kullanır?
- Otomatik doldurma hangi alanları doldurmadı?
- Bir form alanı neden Otomatik Doldurma tarafından doldurulmuyor?
Bu makalede, Chrome Geliştirici Araçları'ndaki yeni özellikler özetlenmekte, bunları nasıl test edebileceğiniz ve geri bildirim sağlayabileceğiniz açıklanmaktadır.
Otomatik Doldurma nedir?
Chrome, veri kümelerini güvenli bir şekilde depolayarak ve kullanıcının metin girmesine gerek kalmadan form alanlarını doldurmasını sağlayarak kullanıcıların adres, ödeme ve giriş bilgilerini yönetmesine yardımcı olur. Bu yöntem Otomatik Doldurma olarak bilinir.
Chrome, form gönderdiğinizde Otomatik Doldurma verilerini kaydetmeyi öneriyor. Mobil cihazda:
Ardından Chrome, formları kaydedilen verilerle otomatik olarak doldurmayı önerir.
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 alakalı 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 grupları için Otomatik Doldurma özelliğinin yanı sıra, kullanıcıların Otomatik Doldurma tarafından işlenemeyen tek form alanlarına ait verileri yeniden girmekten kaçınmasına yardımcı olur. Bir formda, Chrome'un daha önce karşılaştığı ad özelliğine sahip bir alan olduğunda Chrome, verileri yeniden girmenize gerek kalmaması için değerler önerebilir.
Aşağıda basit bir örnek verilmiştir:
Chrome Geliştirici Araçları, buradaki form alanının tarayıcı için anlamlı özellikler içermediğini gösteriyor. Bunun yerine, n300 için yalnızca bir name özelliği olur.
Alan, Chrome Otomatik Doldurma için uygun olacak bir yapılandırılmış veri grubunda yer alan bir değere karşılık gelmiyor, ancak Chrome ileride bu ada sahip bir alanla karşılaşırsa kullanıcıya yardımcı olabilir.
Chrome Geliştirici Araçları'nın yeni otomatik doldurma özelliklerini test edin
Chrome, Otomatik Doldurma hatalarının giderilmesine yardımcı olmak için Geliştirici Araçları Sorunlar panelinin yeni özelliklerini test ediyor.
Chrome Canary'deki bu yeni özellikleri deneyebilirsiniz. Geliştirici Araçları'nda 
Ayarlar > Denemeler > 
Öğeler paneli DOM ağacında ihlalde bulunan bir düğümü veya özelliği vurgular'ı işaretleyin ve istendiğinde Geliştirici Araçları'nı yeniden yükleyin.
Alternatif olarak, Chrome Canary'yi 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 formun bulunduğu 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 karmaşık. Bunlar:
idveyanameözelliği olmayan giriş alanları.- Yinelenen kimliklere sahip öğeler.
- Bir öğe kimliğiyle eşleşmeyen
forözelliğine sahip bir<label>. - Boş
autocompleteözelliği olan bir alan.
Fareyle DOM ağacında vurgulanan bir öğenin üzerine gelin ve daha fazla bilgi edinmek için Sorunu görüntüle'yi tıklayın.
Her bir sorunla ilgili etkilenen kaynakları görüntülemek için İhlalde bulunan düğüm'ü tıklayın. Bu formun, bir form alanının id ile eşleşmeyen for özelliğine sahip sekiz etiketi var.
Form erişilebilirliğini iyileştirmek için Geliştirici Araçları'nı kullanma
Geliştirici Araçları, aria-labelledby özelliğinin veya ilişkili bir <label> özelliğinin olmadığı form alanı gibi Otomatik Doldurma erişilebilirlik sorunlarını da vurgulayabilir.
Bu örnekte <input> öğesinin eşleşen bir etiketi vardır. Bu, yardımcı cihazların öğenin amacını
söyleyebileceğ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 bildirim sağlayın
Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın:
- crbug.com adresindeki şemsiye hata kaydından yararlanarak bize öneri veya geri bildirim gönderebilirsiniz.
- Geliştirici Araçları'ndan sorun bildirin: Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir.
- @ChromeDevTools adresine tweet gönderin.
Daha fazla bilgi
- Formları Öğrenin: Web geliştiricisi uzmanlığınızı geliştirmenize yardımcı olacak, HTML formlarıyla ilgili bir kurs. Formları ve otomatik doldurmayı kullanmaya yeni başlayanlar için idealdir.
- web.dev/tags/forms: Ödeme, giriş ve adres formları için rehberlik, en iyi uygulamalar ve codelab'ler.