Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Jecelyn Yeen

Yeni Tam sayfa erişilebilirlik ağacı, tam sayfa erişilebilirlik ağacı ile ilgili genel bilgi edinmenizi 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.

Bunu tıklayarak Tam sayfa erişilebilirlik ağaç görünümüne geçebilirsiniz. Düğümleri genişletebilir veya Erişilebilirlik bölmesinde ayrıntıları görmek için tıklayabilirsiniz.

Bir düğüm seçip DOM ağaç görünümüne geri dönün. İlgili DOM düğümü seçilir. Bu, DOM düğümü ile erişilebilirlik ağacı düğümü arasındaki eşlemeyi anlamanın harika bir yoludur. Bu işlem DOM ağacında çalışır ⬌ Erişilebilirlik ağaç görünümü de!

Erişilebilirlik ağacı, önceden Erişilebilirlik bölmesinde kullanılabiliyordu. Görünüm sınırlıdır. Yalnızca tek bir düğümü ve üst öğelerini keşfetmenize olanak tanır.

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

Tam sayfa erişilebilirlik ağacı

Chromium sorunu: 887173

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

Değişiklikler sekmesindeki kod değişiklikleri otomatik olarak yazdırılır.

Önceden, tüm kod tek bir satırda gösterildiğinden, küçültülmüş kaynak koddaki 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 ayarlayın

Artık tüm adımlar veya belirli bir adım için Kaydedici'de Zaman aşımı ayarlarını düzenleyebilirsiniz. Bu, özellikle yavaş ağ istekleri ve uzun animasyonları olan sayfalar için yararlıdır.

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

Bu sorunu düzeltmek için yeni Zaman Aşımı ayarlarını kullanabiliriz. Menü öğesine tıkladığımız adımı genişletin. Zaman aşımı ekle bölümünde bu adımı düzenleyin ve 6.000 milisaniye (6 saniyeye eşittir) olarak ayarlayın.

İsterseniz tüm adımlar için Tekrar oynatma ayarlarından Zaman Aşımı'nı ayarlayabilirsiniz. Tekrar oynatma ayarları'nı genişletin ve Zaman aşımı değerini düzenleyin.

kullanıcı işlemleri 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ı geri ve ileri gezinmeyi sağlayan bir tarayıcı optimizasyonudur.

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

Belirli bir sayfayı test etmek için Chrome'da ilgili sayfaya gidin. Ardından, Geliştirici Araçları'nda Uygulama > Geri-İleri Önbellek'e gidin. Ardından, Geri-ileri önbelleği test et düğmesini tıklayın. Geliştirici Araçları, sayfanın bfcache'den geri yüklenip yüklenemeyeceğini belirlemek için başka bir yere gitmeye çalışır.

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

Geri-ileri önbellek sekmesi

Chromium sorunu: 1110752

Yeni Özellikler bölme filtresi

Özellikler bölmesinde belirli bir özelliğe odaklanmak istiyorsanız artık bu özelliğin adını veya değerini yeni Filtre metin kutusuna yazabilirsiniz.

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

Bu iyileştirmeler, ilgilendiğiniz mülklere daha hızlı ulaşmanızı ve böylece üretkenliğinizi artırmanızı sağlar.

Özellikler bölmesi filtresi

Chromium sorunu: 1269674

CSS zorunlu renkler medya özelliği emülasyonu

Zorunlu renkler CSS medya özelliği, kullanıcı aracısının sayfada kullanıcı tarafından seçilen sınırlı bir renk paletini zorunlu kıldığı bir 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şturmayı Göster komutunu çalıştırın ve ardından CSS medya özelliği zorunlu renkleri emülasyonu 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 Fareyle ü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.

Daha önce, sayfa cetvellerini yalnızca Ayarlar > Cetvelleri göster onay kutusunu kullanarak etkinleştirebiliyordunuz.

Fareyle üzerine gelme komutunda cetvelleri göster

Chromium sorunu: 1270562

Flexbox düzenleyicisinde `row-reverse` ve `column-reverse` özelliklerini destekleyin

Flexbox düzenleyicisi, flex-direction ürününde row-reverse ve column-reverse özelliklerini desteklemek için iki yeni düğme ekledi.

Flexbox düzenleyicisi

Chromium sorunu: 1263866

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

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

Ağ panelinden bir XHR isteği seçin ve XHR'yi yeniden çalmak için klavyede R'ye basın. Daha önce, XHR'yi yalnızca içerik menüsünden tekrar oynatabiliyordunuz (sağ tıklama > XHR'yi tekrar oynat)

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şletmenize ve daraltmanıza olanak tanıyan yeni bir kısayol eklendi. Önceden, arama sonuçlarını yalnızca tek seferde bir dosyayı tıklayarak genişletebiliyor ve daraltabiliyordunuz.

Esc > 3 noktalı menü > Arama'yı kullanarak arama sekmesini açın. Arama sonuçları listesini görmek için bir arama dizesi (ör. işlev) girin ve 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ına göz atmak için klavye kısayollarına gidin.

Chromium sorunu: 1255073

Lighthouse panelinde Lighthouse 9

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

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

Güncellemeler hakkında ayrıntılı bilgi edinmek için Lighthouse 9.0'daki yenilikler sayfasına göz atın.

"Tüm odaklanılabilir öğeler" için yapılan Lighthouse denetimi, her ikisi de aynı "id"ye sahip iki öğeyi gösteren benzersiz bir "id"ye sahip olmalıdır

Chromium sorunu: 772558

İyileştirilmiş Kaynaklar paneli

CodeMirror 6'yı kullanacak şekilde yeni sürüme geçerken Kaynaklar panelinde birçok kararlılık iyileştirmesi yaptık. Dikkate değer birkaç iyileştirmeyi aşağıda bulabilirsiniz:

Büyük dosyaları açarken çok daha hızlıdır (ör. WASM, JavaScript)
Kodda adım adım ilerlerken artık rastgele kaydırma yapılmıyor
Düzenlenebilir kaynaklar (ör. snippet'ler, yerel geçersiz kılma) için geliştirilmiş otomatik tamamlama önerileri

Chromium sorunu: 1241848

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler şunlardır:

Ağ isteklerinin şelale diyagramını düzgün bir şekilde görüntüleme. Önceden, stil bozuktu. (1275501)
Kaynaklar panelinde, çok uzun satırlara sahip dokümanlarda arama yaparken kod vurgulama bozuktu. Sorun çözüldü. (1275496)
Ağ isteklerinde artık yinelenen Yük sekmesi olmayacak. (1273972)
Performans panelinin Özet bölümündeki eksik düzen kayması ayrıntıları düzeltildi. (1259606)
Ağ Arama sorgularında rastgele karakterleri (ör. ,, .) destekleyin. (1267196)

[Deneysel] Reporting API bölmesindeki uç noktalar

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

Uç noktalar bölümü artık kullanılabilir. Reporting-Endpoints başlığında yapılandırılan tüm uç noktalarla ilgili genel bir bakış sunar.

Güvenlik ihlallerini, kullanımdan kaldı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'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

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 adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.