Chrome 135'teki DevTools'daki yenilikler

Sofia Emelianova
Sofia Emelianova
GitHub

Performans paneli iyileştirmeleri

Bu sürümde, Performans panelinde çeşitli iyileştirmeler yapıldı.

Performans bölümündeki profil ve işlev çağrıları için kaynak ve komut dosyası bağlantıları

Performans > Özet sekmesinde artık profil ve işlev çağrılarının ilgili komut dosyalarının ve kaynaklarının bağlantıları gösteriliyor. Böylece, Ana kanaldaki bu etkinliklerin üzerine gelmeniz gerekmiyor.

Özet sekmesine kaynak ve kök eklemeden önceki ve sonraki durum.

Ayrıca, Ağ ve Ana kanallarında artık fareyle etkinliklerin üzerine geldiğinizde ipuçlarında üçüncü taraf adları (varsa) gösterilir.

Chromium sorunu: 368541957.

"Aşama bazında LCP" alan verisi desteği

Alan verileri etkinleştirildiğinde Performans > Analizler > Aşamaya göre LCP analizinde artık Chrome kullanıcı deneyimi raporundan 75. yüzdelik dilimdeki resim zamanlamaları ek bir tabloda gösterilir. Böylece, zamanlamaları doğrudan analizde karşılaştırabilirsiniz.

"Aşamaya göre LCP" analizine alan verisi ekleme öncesi ve sonrası.

"Ağ bağımlılık ağacı" analizi

Performans > Analizler sekmesine yeni Ağ bağımlılık ağacı analizi eklendi. Analiz, kritik istekleri birbirine bağlayıp bağlamadığınızı gösterir. Bu, önerilen bir işlem değildir. Analizde listelenen isteklerin Ağ kanalında vurgulandığını görmek için fareyle isteklerin üzerine gelin.

Daha fazla bilgi için Kritik istek zinciri oluşturmaktan kaçının başlıklı makaleyi inceleyin.

En ağır yığının vurgulanması

Performans paneli artık Çağrı ağacı veya Aşağıdan yukarı > En ağır grup kenar çubuğunda fareyle üzerine geldiğinizde Ana kanaldaki öğeleri vurgular ve geri kalanı karartır. Bu sayede, çağrı yığınında en çok zaman harcayan iç içe yerleştirilmiş öğeleri görsel olarak bulabilirsiniz.

Öğeler'de erişilebilirlik ağaç görünümü

Tam sayfa erişilebilirlik ağacı görünümü artık Öğeler panelinde varsayılan olarak etkindir.

Daha önce Öğeler > Erişilebilirlik sekmesinde ayrı bir erişilebilirlik ağacına göz atabiliyordunuz. Artık DOM ve tam sayfa erişilebilirlik ağaçları arasında geçiş yapmak için Nesneler panelindeki DOM ağacının sağ üst köşesindeki Erişilebilirlik Ağacı görünümüne geç düğmesini tıklayabilirsiniz. Böylece, bu ağaçları ve aralarındaki ilişkiyi daha kolay keşfedebilirsiniz.

Varsayılan olarak tam sayfa erişilebilirlik ağacı görünümünü etkinleştirmeden önce ve sonra .

Erişilebilirlik ağacı, yardımcı teknolojilerin içeriğinizi nasıl gördüğünü incelemenize olanak tanır ve DOM düğümlerinin ARIA özelliklerini ve hesaplanmış erişilebilirlik özelliklerini gösterir. Daha fazla bilgi için Chrome Geliştirici Araçları'ndaki tam erişilebilirlik ağacı başlıklı makaleyi inceleyin.

Chromium sorunu: 40808541.

Çeşitli paneller için boş durumlar iyileştirildi

Çeşitli paneller, bölümler ve sekmelerin boş halleri (hiçbir şey açık olmadığında) bu öğelerle çalışmaya başlamak için tam olarak ne yapmanız gerektiğini bildirecek şekilde basitleştirildi. Örneğin, Ağ panelindeki bazı boş durumlarda artık Sayfayı yeniden yükle gibi alakalı ve faydalı düğmeler bulunuyor.

Ağ ve Arama panellerindeki boş durumların iyileştirilmesinden önceki ve sonraki durum.

"Yapay zekaya sor" seçeneği menünün alt kısmına taşındı

Yapay zekaya sor seçeneği artık açılır menülerin en üstünde değil, en altında yer alıyor.

"Yapay Zeka'ya sor" seçeneği açılır menünün en altına taşınmadan önceki ve sonraki durum.

crbug.com/364805393 adresindeki yapay zeka yardımı panelinde geri bildirimde bulunabilirsiniz.

Lighthouse 12.4.0

Lighthouse panelinde artık Lighthouse 12.4.0 sürümü kullanılıyor.

Bu sürüm, bazı performans denetimlerini başarılı denetimler bölümünde gizlemek yerine başarılı koşullar altında bilgilendirici olarak işaretler. Değişikliklerin tam listesini inceleyin.

Geliştirici Araçları'ndaki Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 40543651.

Diğer öne çıkan özellikler

Bu sürümdeki dikkate değer düzeltme ve iyileştirmelerden bazıları şunlardır:

  • Performans > Özet: İki Toplam süre ve Kendi kendine çalışma süresi satırı, varsa parantez içinde (self time) değerini de gösteren tek satırlı bir Süre ile değiştirildi (crbug.com/395572753).
  • Sorunlar: Yeni sorun türleri eklendi: Erişilebilirlik ağacındaki <select> sorunları ve ağ hizmetinde ayrıştırma veya doğrulama sırasında oluşan SRI İleti İmzası hataları (crbug.com/381044049, crbug.com/347890366).
  • Erişilebilirlik: Öğeler > Stiller sekmesinde artık klavye gezinme özelliğini kullanarak ilerlediğiniz öğeler ana hatlarıyla gösteriliyor (crbug.com/396311936).
  • Öğeler: <select> ile ilgili sorunlar artık desteklenmekte ve dalgalı alt çizgiyle vurgulanmaktadır (crbug.com/378738916).
  • Ağ: "Yedekle nokta" ve çerez uyarısı simgeleri artık sekme adının solunda değil sağında gösteriliyor (crbug.com/390556283).

Ö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ı Ekibi ile 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.