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ı hakkında genel bir bakış edinmenizi kolaylaştırır ve web içeriğinizin yardımcı teknolojilere nasıl sunulduğunu 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ü artık seçilidir. Bu, DOM düğümü ile erişilebilirlik ağacı düğümü arasındaki eşlemeyi anlamanın harika bir yoludur. Bu, 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 kullanılabiliyordu. Görünüm sınırlıdır. Yalnızca tek bir düğümü ve üst öğelerini keşfedebilirsiniz.

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 hassas değişiklikler

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

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

Değişiklikler sekmesi

Chromium sorunları: 1238818, 1268754 , 1086491

Kullanıcı işlemleri akışı kaydı için daha uzun zaman aşımı ayarla

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 içeren sayfalar için yararlı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ştır (6 saniye sürer). Bu kullanıcı akışının tekrar oynatılması, 5 saniyeyi (varsayılan zaman aşımı) aştığı için başarısız oldu.

Bu durumu düzeltmek için yeni Zaman aşımı ayarlarını kullanabiliriz. Menü öğesini tıkladığımız adımı genişletin. Adımı düzenlemek için Zaman aşımı ekleyin ve 6000 milisaniye (6 saniyeye eşittir) olarak ayarlayın.

İsteğe bağlı olarak, tüm adımlar için Tekrar oynatma 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) anında geri ve ileri gezinme sağlayan bir tarayıcı optimizasyonudur.

Yeni Geri-ileri önbellek sekmesi, sayfalarınızı test ederek bfcache için optimize edilmelerini sağlamanıza ve bunların uygun olmasını engelleyebilecek sorunları belirlemenize yardımcı olabilir.

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

Web geliştiricileri olarak, sayfalarınızı tüm tarayıcılarda bfcache için nasıl optimize edeceğinizi bilmek önemlidir. Çünkü bu, özellikle daha yavaş ağları veya cihazları olan kullanıcıların göz atma deneyimini önemli ölçüde iyileştirecektir.

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 özellik 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 tesisleri görüntülemek için Tümünü göster onay kutusunu etkinleştirin.

Bu iyileştirmeler, önem verdiğ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 renk emülasyonu açılır listesini 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çabilir ve 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.

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

Fareyle üzerine gelme komutunda cetvelleri göster

Chromium sorunu: 1270562

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

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

Flexbox düzenleyici

Chromium sorunu: 1263866

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

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

Network (Ağ) panelinde bir XHR isteği seçin ve XHR'yi tekrar oynatmak için klavyede R tuşuna basın. Önceden, XHR'yi yalnızca içerik menüsünden tekrar oynatabiliyorsunuz (sağ tıklama > XHR'yi tekrar oynat)

XHR'yi 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 eklenir. Eskiden, arama sonuçlarını aynı anda yalnızca bir dosyayı tıklayarak genişletebiliyor ve daraltabiliyordunuz.

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

Chromium sorunu: 1255073

Deniz Feneri panelindeki 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üncellemelerle ilgili daha ayrıntılı bilgi için Lighthouse 9.0'daki yenilikler sayfasına göz atın.

"Tüm odaklanılabilir öğelerde benzersiz bir "id" olmalıdır ve her ikisi de aynı "id"ye sahip iki öğe gösteren Lighthouse denetimi

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. Bazı önemli iyileştirmeler şunlardır:

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

Chromium sorunu: 1241848

Çeşitli öne çıkan anlar

Bu sürümde yer alan bazı önemli 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ırlar olan dokümanlarda arama yapılırken kod vurgusu bozuldu. Artık sorun çözüldü. (1275496)
Ağ isteklerinde artık yinelenen Yük sekmesi yok. (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

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

Uç noktalar bölümü artık kullanılabilir. Reporting-Endpoints başlığında yapılandırılan tüm uç noktalara dair 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 nasıl kullanacağınızı öğrenin.

Reporting API bölmesi

Chromium sorunu: 1200732

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

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

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
Geliştirici Araçları'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.