Geliştirici Araçları'ndaki Yenilikler (Chrome 98)

Jecelyn Yeen

Önizleme özelliği: Tam sayfa erişilebilirlik ağacı

Yeni tam sayfa erişilebilirlik ağacı, tam sayfa erişilebilirlik ağacına genel bir bakış atmanızı kolaylaştırır ve web içeriğinizin yardımcı teknolojilere nasıl maruz kaldığını daha iyi anlamanıza yardımcı olur.

Öğeler panelinde Erişilebilirlik bölmesini açın ve Tam sayfa erişilebilirlik ağacını etkinleştir onay kutusunu seçin. Ardından Geliştirici Araçları'nı yeniden yükleyin. Öğeler panelinde yeni bir erişilebilirlik düğmesi görürsünüz.

Tam sayfa erişilebilirlik ağacı görünümüne geçmek için bu simgeyi tıklayabilirsiniz. Erişilebilirlik bölmesinde ayrıntıları görmek için düğümleri genişletebilir veya tıklayabilirsiniz.

Bir düğüm seçin ve DOM ağacı görünümüne geri dönün. İlgili DOM düğümü seçilidir. Bu, DOM düğümü ile erişilebilirlik ağacı düğümü arasındaki eşlemeyi anlamanın mükemmel bir yoludur. Bu yöntem, DOM ağacı ⬌ Erişilebilirlik ağacı görünümü için de geçerlidir.

Erişilebilirlik ağacı daha önce Erişilebilirlik bölmesinde bulunuyordu. Görünüm sınırlıdır ve yalnızca tek bir düğümü ve ebeveynlerini keşfetmenize olanak tanır.

Ekibimiz bu önizleme özelliği üzerinde çalışmaya devam ediyor. Daha fazla iyileştirme için geri bildirimlerinizi bekliyoruz.

Tam sayfa erişilebilirlik ağacı

Chromium sorunu: 887173

Değişiklikler sekmesinde daha hassas değişiklikler

Değişiklikler sekmesindeki kod değişiklikleri otomatik olarak okunaklı hâle getirilir.

Daha önce, tüm kod tek bir satırda gösterildiği için küçültülmüş kaynak kodundaki gerçek değişiklikleri izlemek zordu.

Değişiklikler sekmesi

Chromium sorunları: 1238818, 1268754 , 1086491

Kullanıcı akışı kaydı için daha uzun zaman aşımı süresi ayarlama

Artık Kaydedici'deki zaman aşımı ayarlarını tüm adımlar veya belirli bir adım için düzenleyebilirsiniz. Bu özellik, özellikle yavaş ağ isteklerine ve uzun animasyonlara sahip sayfalar için kullanışlıdır.

Örneğin, bu demo sayfasında menü öğesini yükleyip tıklamak için bir kullanıcı akışı kaydettim. Ancak menü öğelerinin yüklenmesi yavaş (6 saniye sürüyor). Bu kullanıcı akışının yeniden oynatılması, 5 saniyeyi (varsayılan zaman aşımı) aştığı için başarısız oldu.

Bu sorunu düzeltmek için yeni zaman aşımı ayarlarını kullanabiliriz. Menü öğesini tıkladığımız adımı genişletin. Zaman aşımı ekle'yi seçerek adımı düzenleyin ve 6000 milisaniyeye (6 saniyeye eşit) ayarlayın.

İsteğe bağlı olarak, tüm adımlar için Tekrar ayarları'ndaki Zaman aşımı'nı ayarlayabilirsiniz. Tekrar oynatma ayarları'nı genişletin ve Zaman aşımı değerini düzenleyin.

Kullanıcı akışı kaydı için zaman aşımı ayarları

Chromium sorunu: 1257499

Geri-ileri önbellek sekmesiyle sayfalarınızın önbelleğe alınabildiğinden emin olma

Geri/ileri önbellek (veya bfcache), hızlı ileri ve geri gezinmeyi sağlayan bir tarayıcı optimizasyonudur.

Yeni Geri/ileri önbelleği sekmesi, sayfalarınızı bfcache için optimize edildiğinden emin olmak amacıyla test etmenize ve uygun olmalarını engelleyen sorunları belirlemenize yardımcı olabilir.

Belirli bir sayfayı test etmek için Chrome'da ilgili sayfaya gidin ve ardından DevTools'da Uygulama > Geri-ileri önbelleği'ne gidin. Ardından Geri/ileri önbelleği test et düğmesini tıklayın. DevTools, sayfanın bfcache'ten geri yüklenip yüklenemeyeceğini belirlemek için sayfadan uzaklaşıp geri dönmeye çalışır.

Web geliştiricileri olarak, sayfalarınızı tüm tarayıcılarda bfcache için nasıl optimize edeceğinizi bilmeniz çok önemlidir. Bu, özellikle yavaş ağlara veya cihazlara sahip kullanıcılar için göz atma deneyimini önemli ölçüde iyileştirir.

Geri-ileri önbellek sekmesi

Chromium sorunu: 1110752

Yeni Mülkler bölmesi filtresi

Özellikler bölmesinde belirli bir mülke odaklanmak istiyorsanız artık yeni Filtre metin kutusuna bu mülk adını veya değerini yazabilirsiniz.

Varsayılan olarak, değeri null veya undefined olan mülkler gösterilmez. Tüm mülkleri görüntülemek için Tümünü göster onay kutusunu etkinleştirin.

Bu geliştirmeler, önemsediğiniz tesislere daha hızlı ulaşmanıza ve dolayısıyla üretkenliğinizi artırmanıza olanak tanır.

Özellikler bölmesi filtresi

Chromium sorunu: 1269674

CSS zorunlu renkler medya özelliği emülasyonu

forced-colors CSS medya özelliği, kullanıcı aracısının sayfa üzerinde kullanıcı tarafından seçilen sınırlı bir renk paletini zorunlu kıldığı zorunlu renkler modunu (ör. Windows Yüksek Kontrast modu) etkinleştirip etkinleştirmediğini algılamak için kullanılır.

Komut menüsünü açın, Oluşturma işlemini göster komutunu çalıştırın ve ardından CSS medya özelliği zorunlu renklerini taklit et açılır menüsünü ayarlayın.

CSS zorunlu renkler medya özelliği

Chromium sorunu: 1130859

Fareyle üzerine gelme komutunda cetvelleri göster

Artık Komut Menüsü'nü açıp Üzerine gelindiğinde cetvelleri göster komutunu çalıştırabilirsiniz. Sayfa cetvelleri, bir öğenin genişliğini ve yüksekliğini ölçmeyi kolaylaştırır.

Önceden, sayfa cetvellerini yalnızca Ayarlar > Cetvelleri göster onay kutusu aracılığıyla etkinleştirebiliyordunuz.

Üzerine gelindiğinde cetvelleri göster komutu

Chromium sorunu: 1270562

Flexbox düzenleyicisinde row-reverse ve column-reverse desteği

Flexbox düzenleyiciye, flex-direction'te row-reverse ve column-reverse'i desteklemek için iki yeni düğme eklendi.

Flexbox düzenleyici

Chromium sorunu: 1263866

XHR'yi yeniden oynatmak ve tüm arama sonuçlarını genişletmek için yeni klavye kısayolları

Ağ panelinde XHR'yi yeniden oynatmak için klavye kısayolları

Ağ panelinde bir XHR isteği seçin ve XHR'yi yeniden oynatmak için klavyede R tuşuna basın. Daha önce XHR'yi yalnızca bağlam menüsü aracılığıyla (sağ tıklama > XHR'yi tekrar oynat) yeniden oynatabiliyordunuz.

XHR isteğini tekrar oynat

Chromium sorunu: 1050021

Tüm arama sonuçlarını genişletmek için klavye kısayolu

Arama sekmesine, tüm arama sonuçlarını genişletip daraltmanıza olanak tanıyan yeni bir kısayol eklendi. Daha önce, arama sonuçlarını tek seferde yalnızca bir dosyayı tıklayarak genişletip daraltabiliyordunuz.

Esc > 3 nokta menüsü > Arama'yı kullanarak arama sekmesini açın. Arama sonucu listesini görmek için bir arama dizesi (ör. işlev) girip Enter tuşuna basın. Arama sonuçlarına odaklanın ve arama dosyalarını genişletmek/daraltmak için aşağıdaki kısayolu kullanın:

  • Windows / Linux: Ctrl + Shift + { veya }
  • MacOS: Cmd + Options + { veya }

Chrome Geliştirici Araçları'ndaki klavye kısayolları için klavye kısayolları bölümüne gidin.

Chromium sorunu: 1255073

Lighthouse panelinde Lighthouse 9

Lighthouse paneli şu anda Lighthouse 9'u çalıştırıyor. Lighthouse artık aynı kimliği paylaşan tüm öğeleri listeler.

Benzersiz olmayan öğe kimliği, yaygın bir erişilebilirlik sorunudur. Örneğin, bir aria-labelledby özelliğinde başvurulan kimlik birden fazla öğede kullanılır.

Güncellemeler hakkında daha fazla bilgi için Lighthouse 9.0'daki yenilikler başlıklı makaleyi inceleyin.

"Odaklanabilir tüm öğelerin benzersiz bir "id" değeri olmalıdır" ile ilgili bir Lighthouse denetimi. İki öğe gösteriliyor ve her ikisinin de "id" değeri aynı.

Chromium sorunu: 772558

İyileştirilmiş Kaynaklar paneli

Kaynaklar panelini, CodeMirror 6'yı kullanacak şekilde yükseltirken çok sayıda kararlılık iyileştirmesi ekledik. Aşağıda, dikkat çeken birkaç iyileştirme verilmiştir:

  • Büyük dosyaları (ör. WASM, JavaScript) açarken önemli ölçüde daha hızlı
  • Kodda gezinirken rastgele kaydırmaya son
  • Düzenlenebilir kaynaklar (ör. snippet'ler, yerel geçersiz kılma) için otomatik tamamlama önerileri iyileştirildi

Chromium sorunu: 1241848

Diğer öne çıkan özellikler

Bu sürümdeki bazı önemli düzeltmeler şunlardır:

  • Ağ isteklerinin şelale diyagramını doğru şekilde gösterme. Daha önce stil bozuktu. (1275501)
  • Kaynaklar panelinde çok uzun satırlar içeren belgelerde arama yaparken kod vurgulama özelliği çalışmazdı. Artık sorun çözüldü. (1275496)
  • Ağ isteklerinde artık yinelenen Yük sekmesi yok. (1273972)
  • Performans panelinin Özet bölümündeki düzen kaydırma ayrıntılarının eksik olması düzeltildi. (1259606)
  • Arama Ağı sorgularında rastgele karakterleri (ör. ,, .) destekler. (1267196)

[Deneysel] Reporting API bölmesinde uç noktalar

Deneysel Reporting API bölmesi, sayfanızda oluşturulan raporları ve durumlarını izlemenize yardımcı olmak için Chrome 96'da kullanıma sunulmuştur.

Bitiş noktaları bölümü artık kullanılabilir. Reporting-Endpoints üstbilgisinde yapılandırılan tüm uç noktalara genel bir bakış sunar.

Güvenlik ihlallerini, desteği sonlandırılan API çağrılarını ve daha fazlasını izlemek için Reporting API'yi kullanmayı öğrenin.

Reporting API bölmesi

Chromium sorunu: 1200732

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

Chrome Geliştirici Araçları ekibiyle iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.