Bu kılavuzun amacı, öncelikle ekran okuyucu gibi yardımcı teknolojilerden yararlanan kullanıcıların Chrome Geliştirici Araçları'na erişmesine ve bu araçları kullanmasına yardımcı olmaktır. Chrome Geliştirici Araçları, Google Chrome tarayıcısında yerleşik olarak bulunan bir web geliştirici aracı paketidir. Bir web sayfasının erişilebilirliğini iyileştirmeyle ilgili Geliştirici Araçları özelliklerini arıyorsanız Erişilebilirlik Referansı'na bakın.
Geliştirici Araçları'nın erişilebilirliği üzerinde çalışmalarımız devam ediyor. Bazı paneller ve sekmeler, yardımcı teknolojilerle diğerlerine kıyasla daha iyi çalışır. Bu kılavuzda, en erişilebilir paneller adım adım açıklanmakta ve bu süreçte karşılaşabileceğiniz belirli sorunlara dikkat çekilmektedir.
Genel Bakış
Başlamadan önce DevTools kullanıcı arayüzünün nasıl yapılandırıldığına dair zihinsel bir modele sahip olmanız faydalı olacaktır. Geliştirici Araçları, ARIA tablist şeklinde düzenlenen bir dizi panele ayrılmıştır. Örneğin:
- Öğeler paneli, DOM düğümlerini veya CSS'yi görüntülemenize ve değiştirmenize olanak tanır.
- Konsol paneli, JavaScript günlüklerini okumanıza ve nesneleri canlı olarak düzenlemenize olanak tanır.
Her panelin içerik alanında, genellikle belgelerde sekme veya panel olarak adlandırılan çeşitli araçlar bulunur. Örneğin, Öğeler panelinde etkinlik işleyicileri, erişilebilirlik ağacı ve daha fazlasını incelemek için ek sekmeler bulunur. Sekmeler ile bölmeler arasındaki fark biraz keyfidir. Bu terimlerin kullanıldığı tek neden, resmi DevTools dokümanlarının geri kalanıyla tutarlılık sağlamaktır.
Klavye kısayolları
Geliştirici Araçları Klavye Kısayollarına referans faydalı bir çalışma sayfasıdır. Bu sayfaya yer işareti koymayı ve farklı panelleri keşfederken bu sayfaya geri dönmeyi unutmayın.
Geliştirici Araçları'nı açma
Başlamak için Chrome Geliştirici Araçları'nı açma başlıklı makaleyi okuyun. Geliştirici Araçları'nı klavye kısayolları veya menü öğeleri aracılığıyla açmanın birkaç yolu vardır.
Paneller arasında gezinme
Klavyeyle gezinme
- Geliştirici Araçları açıkken sonraki panele odaklanmak için Ctrl+] veya Command+] (Mac) tuşlarına basın.
- Önceki panele odaklanmak için Ctrl+[ veya Komut+[ (Mac) tuşlarına basın.
- Odağı bir panelin
tablistalanına taşımak için Üst Karakter+Sekme tuşlarını, panelleri değiştirmek için de ok tuşlarını kullanabilirsiniz. Ancak daha önce bahsedilen kısayolları kullanmak daha hızlı olabilir.
Bilinen sorunlar
- Konsol ve Performans panelleri gibi bazı paneller, etkinleştirildikten hemen sonra odağı içerik alanlarına taşıyabilir. Bu durum, ok tuşlarıyla gezinmeyi zorlaştırabilir.
- Seçilen panelin adı, yalnızca paneldeki odaklanmış içerik okunduktan sonra duyurulur. Bu nedenle, bu özelliği gözden kaçırmanız kolay olabilir.
Komut menüsüne göre gezinme
Belirli bir panele odaklanmak için Komut Menüsü'nü kullanın:
- Geliştirici Araçları açıkken Komut Menüsü'nü açmak için Kontrol+Üst Karakter+P veya Komut+Üst Karakter+P (Mac) tuşlarına basın. Komut menüsü, bulanık arama otomatik tamamlama birleşik kutusudur.
- Açmak istediğiniz panelin adını yazın, ardından doğru seçeneğe gitmek için aşağı ok tuşunu kullanın.
- Komut çalıştırmak için Enter tuşuna basın.
Örneğin, Nesneler panelini açmak için:
- Komut menüsünü açın.
- E ve ardından L yazın. Panel > Öğeleri Göster seçeneği belirlenmiş.
- Paneli açan komutu çalıştırmak için Enter tuşuna basın.
Paneli bu şekilde açtığınızda odak, panelin içeriğine yönlendirilir. Öğeler panelinde ise odak DOM Ağacı'na taşınır.
Öğeler paneli
Sayfadaki bir öğeyi inceleme
- Ekran okuyucunun imlecini kullanarak incelemek istediğiniz öğeye gidin.
- İçerik menüsünü açmak için öğeyi sağ tıklamayı simüle edin.
- Denetle seçeneğini belirleyin. Bu işlem, Nesneler panelini açar ve DOM ağacında öğeye odaklanır.
DOM ağacı, ARIA tree olarak düzenlenir. Örnek için DOM Ağacı'nda klavyeyle gezinme başlıklı makaleyi inceleyin.
DOM ağacındaki bir öğenin kodunu kopyalama
- Odak DOM ağacındaki bir düğümdeyken sağ tıklama içerik menüsünü açın.
- Kopyala seçeneğini genişletin.
- outerHTML'yi kopyala'yı seçin.
Bilinen sorunlar
- outerHTML'i kopyala işlevi genellikle mevcut düğümü değil, üst düğümünü seçer. Ancak öğenin içeriği, kopyalanan dış HTML'de yer almaya devam eder.
DOM ağacındaki bir öğenin özelliklerini değiştirme
- Odak DOM Ağacı'ndaki bir düğümdeyken düğümü düzenlenebilir hale getirmek için Enter tuşuna basın.
- Özellik değerleri arasında geçiş yapmak için Sekme tuşuna basın. "Boşluk" ifadesini duyduğunuzda boş bir metin girişindesiniz demektir ve yeni bir özellik değeri yazabilirsiniz.
- Değişikliği kabul etmek ve öğenin tüm içeriğini duymak için Ctrl+Enter veya Command+Enter (Mac) tuşlarına basın.
Bilinen sorunlar
- Metin girişine yazarken geri bildirim almazsınız. Yazım hatası yapar ve girişinizi keşfetmek için ok tuşlarını kullanırsanız da geri bildirim almazsınız. Çalışmanızı kontrol etmenin en kolay yolu, değişikliği kabul edip öğenin tamamının okunmasını beklemektir.
DOM ağacındaki bir öğenin HTML'sini düzenleme
- Odak DOM Ağacı'ndaki bir düğüm üzerindeyken düğümü düzenlenebilir hale getirmek için Enter tuşuna basın.
- Özellik değerleri arasında geçiş yapmak için Sekme tuşuna basın. Öğenin adını duyduğunuzda (ör. "h2") bir metin girişindesinizdir ve öğenin türünü değiştirebilirsiniz.
- Değişikliği kabul etmek için Ctrl+Enter veya Command+Enter (Mac) tuşlarına basın.
Örneğin, h3 yazıp Kontrol+Enter veya Komut+Enter (Mac) tuşlarına bastığınızda öğenin başlangıç ve bitiş etiketleri h3 olarak değişir.
Nesne paneli sekmeleri
Öğeler panelinde, bir öğeye uygulanan CSS veya erişilebilirlik ağacındaki yeri gibi öğeleri incelemek için ek sekmeler bulunur.
- Odak DOM Ağacı'ndaki bir düğümdeyken Stiller bölmesinin seçildiğini duyana kadar Sekme tuşuna basın.
- Mevcut diğer sekmeleri keşfetmek için sağ ok tuşunu kullanın.
DOM Ağacı, href özelliklerine sahip öğeleri odaklanılabilir bağlantılara dönüştürür. Bu nedenle, Stil sekmesine ulaşmak için Tab tuşuna birden fazla kez basmanız gerekebilir.
Bilinen sorunlar
DOM Kesme Noktaları ve Özellikler sekmelerine klavyeden erişilemez.
Stiller bölmesi
Stiller bölmesinde, stilleri filtreleme, öğe durumlarını (ör. :active ve :focus) değiştirme, sınıfları değiştirme ve yeni sınıflar eklemeyle ilgili kontroller bulunur. Ayrıca, DOM ağacında odaktaki öğeye uygulanan stilleri keşfetmek ve değiştirmek için güçlü bir stil inceleme aracı da vardır.
Stiller bölmesiyle ilgili anlamak için gereken temel kavram, yalnızca DOM Ağacı'nda şu anda seçili olan düğümün stillerini göstermesidir. Örneğin, bir <header> düğümünün stillerini incelediğinizi ve şimdi bir <footer> düğümünün stillerine bakmak istediğinizi varsayalım. Bunun için öncelikle DOM ağacında <footer> düğümünü seçmeniz gerekir. footer düğümünün genel yakın çevresindeki bir düğümü (altbilgideki bir bağlantı gibi) incelemek için İncele iş akışını kullanmak daha hızlı olabilir. Bu işlem, DOM ağacına odaklanır ve ardından klavyenizi kullanarak ilgilendiğiniz düğüme gidebilirsiniz.
Stiller bölmesinde gezinme
Stil araçlarının tümü bir şekilde Stiller bölmesine bağlandığından, önce bu araçta uzmanlaşmanız önerilir.
- Odak Stiller bölmesindeyken Sekme tuşuna basarak odağı içeriye taşıyın ve içeriğini keşfedin.
- İlk stil etkin hale gelene kadar Sekme tuşuna basın. Ekran okuyucu kullanıyorsanız bu ilk stil "element.style {}" olarak duyurulur.
- Stil listesinde özelliğe göre gezinmek için aşağı ok tuşuna basın. Ekran okuyucu, her stili CSS dosyasının adıyla, stilin göründüğü satır numarasıyla ve stil adıyla birlikte okur. Örneğin: "main.css:233 .card__img {}"
- Bir stili daha ayrıntılı incelemek için Enter tuşuna basın. Odak, stil adının düzenlenebilir sürümünde başlar.
- Her CSS özelliğinin düzenlenebilir sürümleri ile karşılık gelen değerleri arasında geçiş yapmak için Sekme tuşuna basın. Her stil bloğunun sonunda, ek CSS özellikleri eklemek için kullanabileceğiniz boş bir düzenlenebilir metin alanı bulunur.
- Stil listesinde gezinmek için Sekme tuşuna basmaya devam edebilir veya bu moddan çıkıp ok tuşlarıyla gezinmeye geri dönmek için Esc tuşuna basabilirsiniz.
Diğer kısayollar için Stil bölmesi klavye referansını okuyun.
Bilinen sorunlar
- Düzenlenebilir Filtre metin alanını kullanırsanız artık stil listesinde gezinemezsiniz.
Nesne durumunu aç/kapat
Bir öğenin durumunu (ör. :active veya :focus) değiştirmek için:
- Stiller bölmesine gidin ve Öğe durumunu değiştir düğmesi odağa alınana kadar Sekme tuşuna basın.
- Öğe durumlarının koleksiyonunu genişletmek için Enter tuşuna basın. Öğe durumları, onay kutuları grubu olarak sunulur.
- İlk durum olan
:active'ye odaklanana kadar Sekme tuşuna basın. - Etkinleştirmek için Boşluk tuşuna basın. DOM ağacında şu anda seçili olan öğenin
:activestili varsa bu stil uygulanır. - Mevcut tüm eyaletleri keşfetmek için Sekme tuşuna basmaya devam edin.
Çıkış yapan bir sınıf ekleme
Nesne Durumunu Aç/Kapat düğmesinin yanında Nesne Sınıfları düğmesi bulunur. Sekme ve ardından Enter tuşlarına basarak odağı buraya taşıyın. Odak, Yeni Sınıf Ekle etiketli bir düzenleme metin alanına taşınır.
Öğe Sınıfları düğmesi, temel olarak bir öğeye mevcut sınıfları eklemek için kullanılır. Örneğin, stil sayfanızda .clearfix adlı bir yardımcı sınıf varsa sınıf önerileri listesini görmek için düzenleme metin alanının içinde . tuşuna basabilir ve .clearfix önerisini bulmak için aşağı oku kullanabilirsiniz. Dilerseniz sınıf adını kendiniz yazıp Enter tuşuna basarak da uygulayabilirsiniz.
Yeni stil kuralı ekleme
Öğe Sınıfları düğmesinin yanında Yeni Stil Kuralı düğmesi bulunur. Sekme tuşuna basarak üzerine gelip Enter tuşuna basın. Odak, stil denetleyicisinin içindeki düzenlenebilir bir metin alanına taşınır. Alanın ilk metin içeriği, DOM Ağacı'nda seçilen öğenin etiket adıdır. Bu alana istediğiniz sınıf adını yazıp Tab tuşuna basarak CSS özelliklerini atayabilirsiniz.
Hesaplanmış sekmesi
Odak Hesaplanmış sekmesindeyken Sekme tuşuna basarak odağı içeriye taşıyın ve içeriğini keşfedin. Hesaplanan sekmesinde, bir öğeye uygulanan CSS özelliklerini belirlilik sırasına göre keşfetmenizi sağlayan kontroller bulunur.
Tüm hesaplanmış stilleri keşfetme
Hesaplanmış stiller koleksiyonuna ulaşana kadar Sekme tuşuna basın. Bunlar ARIA tree olarak sunulur. Bir liste kutusunu genişlettiğinizde, hesaplanmış stili hangi CSS seçicilerinin uyguladığını görebilirsiniz. Bu seçiciler, özgürlüğe göre düzenlenir. Ekran okuyucu, hesaplanan değeri, CSS seçicinin şu anda eşleştiği değeri, seçiciyi içeren stil sayfasının dosya adını ve seçicinin satır numarasını duyurur.
Bilinen sorunlar
- Filtre metin alanını kullanırsanız artık stilleri denetlemeniz mümkün olmaz.
Etkinlik işleyicileri sekmesi
Öğeler panelinde, Etkinlik İşleyiciler sekmesini kullanarak bir öğeye uygulanan etkinlik işleyicileri inceleyebilirsiniz. Odak Stiller bölmesindeyken Etkinlik Dinleyicileri sekmesine gitmek için sağ ok tuşuna basın.
Etkinlik işleyicileri keşfetme
Etkinlik işleyicileri ARIA tree olarak sunulur. Bu sayfalar arasında gezinmek için ok tuşlarını kullanabilirsiniz. Ekran okuyucu, etkinlik dinleyicinin bağlı olduğu DOM nesnesinin adını, ayrıca etkinlik dinleyicinin tanımlandığı dosya adını ve satır numarasını duyurur.
Erişilebilirlik bölmesi
Odak Erişilebilirlik bölmesindeyken Sekme tuşuna basarak odağı içeriye taşıyın ve içeriğini keşfedin. Erişilebilirlik bölmesinde, erişilebilirlik ağacını, bir öğeye uygulanan ARIA özelliklerini ve hesaplanan erişilebilirlik özelliklerini keşfetme kontrolleri bulunur.
Erişilebilirlik Ağacı
Erişilebilirlik ağacı, her treeitem'ın DOM'daki bir öğeye karşılık geldiği bir ARIA tree olarak sunulur. Ağaç, seçili düğümün hesaplanmış rolünü gösterir. div ve span gibi genel öğeler ağaçta "GenericContainer" olarak duyurulur. Ağacı dolaşmak ve üst-alt öğe ilişkilerini incelemek için ok tuşlarını kullanın.
Bilinen sorunlar
- Erişilebilirlik bölmesi tarafından kullanılan ARIA ağacı türü, VoiceOver gibi macOS ekran okuyucuları için Chrome'da düzgün şekilde gösterilmeyebilir. Bu sorunla ilgili gelişmelerden haberdar olmak için Chromium sorunu 868480'e abone olun.
- ARIA Özellikleri ve Hesaplanmış Özellikler bölümleri ARIA ağaçları olarak işaretlenmiştir ancak şu anda odak yönetimi olmadığı için klavyeden kullanılamaz.
Denetimler paneli
Denetimler paneli, performans, erişilebilirlik, SEO ve diğer çeşitli kategorilerle ilgili yaygın sorunları kontrol etmek için bir siteye karşı bir dizi test çalıştırmanıza olanak tanır.
Denetleme yapılandırma ve çalıştırma
- Denetim paneli ilk açıldığında odak, formun sonundaki Denetim Çalıştır düğmesine yerleştirilir. Form varsayılan olarak, simüle edilmiş bir 3G bağlantısında mobil emülasyon kullanarak her kategori için denetimler yapacak şekilde yapılandırılmıştır.
- Denetim ayarlarını değiştirmek için Üst Karakter+Sekme tuşlarını kullanın veya Göz atma modunda geri gidin.
- Denetimi çalıştırmaya hazır olduğunuzda Denetim Çalıştır düğmesine geri dönün ve Enter tuşuna basın.
- Odak, denetimden çıkmanıza olanak tanıyan bir İptal düğmesinin bulunduğu bir modal pencereye taşınır. Denetim çalışırken ve sayfayı birden çok kez yenilerken bir dizi sesli uyarı duyabilirsiniz.
Bilinen sorunlar
- Yapılandırma formunun farklı bölümleri şu anda
fieldsetöğesiyle işaretlenmemiştir. Her bir bölümle ilişkili kontrolleri bulmak için Göz atma modunda gezinmek daha kolay olabilir. - Denetim tamamlandığında kulak içi uyarı veya canlı bölge duyurusu yok. Bu işlem genellikle yaklaşık 30 saniye sürer. Ardından sonuçlara gidebilirsiniz. Sonuçlara ulaşmanın en kolay yolu Göz at modunu kullanmak olabilir.
Denetim raporunda gezinme
Denetim raporu, denetim kategorilerinin her birine karşılık gelen bölümlere ayrılmıştır. Rapor, her kategorinin puanlarının listesiyle açılır. Bu puanlar, ilgili bölümlere atlamak için kullanılabilecek bağlantılardır. Her bölümde, başarılı veya başarısız denetimlerle ilgili bilgileri içeren genişletilebilir details öğeleri bulunur. Varsayılan olarak yalnızca başarısız denetimler gösterilir.
Her bölüm, başarılı tüm denetimleri içeren son bir details öğesiyle sona erer.
Yeni bir denetim çalıştırmak için Üst Karakter + Sekme tuşlarını kullanarak rapordan çıkın ve Denetim Yap düğmesini bulun.