Chrome Geliştirici Araçları ile form sorunlarını bulma

Chrome DevTools ekibi, form sorunlarını bulmanıza ve Otomatik Doldurma'da hata ayıklamanıza yardımcı olacak yeni özellikler geliştiriyor.

Sam Dutton

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:

Üç Android ekran görüntüsü: Chrome'daki bir adres formu, Chrome Otomatik Doldurma'nın adresi kaydetmeyi teklif ettiği ve ardından yeni Otomatik Doldurma girişini düzenlemek için iletişim kutusunu gösteren ekran görüntüsü.

Ardından Chrome, formları kayıtlı verilerle otomatik olarak doldurmayı teklif eder.

Mobil cihazda:

Masaüstü bilgisayarda:

Chrome'un masaüstünde bir adres formunu otomatik olarak doldurma teklifi

Otomatik doldurma verilerinizi Chrome ayarlarından yönetebilirsiniz.

Mobil cihazda:

Android'de Chrome ayarları: Adres düzenleme

Masaüstü bilgisayarda:

İki örnek adresi gösteren chrome://settings/addresses sayfası

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'un tek bir form alanındaki yapılandırılmamış veriler için öneriler sunması

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.

Önceki örnekte gösterildiği gibi, bir formdaki yapılandırılmamış verilerle ilgili bilgileri gösteren Chrome DevTools: Yalnızca type=text ve name=n300 özelliklerine sahip tek bir giriş.

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'a dokunun. Ayarlar > Deneyler > Onay kutusu. 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.

"İhlale neden olan bir düğümü vurgular ..." ifadesini gösteren Chrome Geliştirici Araçları ayarlar sayfası

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.

Bir form öğesinin for özelliğiyle ilgili bir sorunu gösteren Chrome Geliştirici Araçları.

Gördüğünüz gibi bu form çok dağınık. Şunlar vardır:

  • id veya name ö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.

Chrome Geliştirici Araçları&#39;nda genişletilmiş sorun: Özellik için etiketin yanlış kullanımı.

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.

Formdaki bir giriş öğesi için etiket bulunduğunu gösteren Chrome DevTools Erişilebilirlik paneli.

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ı.

Formdaki bir giriş öğesi için eşleşen bir etiket veya aria-labelledby özelliğinin bulunamadığını gösteren Chrome Geliştirici Araçları Erişilebilirlik paneli.

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ı.