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'taki 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ı için ilgili komut dosyalarına ve kaynaklara bağlantılar gösteriliyor. Böylece, Ana izdeki bu etkinliklerin üzerine gelmeniz gerekmiyor.

Kaynak ve köken eklenmeden önceki ve sonraki Özet sekmesi.

Ayrıca, Ağ ve Ana parçaları artık etkinliklerin üzerine geldiğinizde varsa üçüncü taraf adlarını ipuçlarında gösteriyor.

Chromium sorunu: 368541957.

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

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

Alan verileri "LCP by phase" içgörüsüne eklenmeden önce ve sonraki durum.

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

Performans > Analizler sekmesine yeni Ağ bağımlılığı ağacı analizi eklendi. Bu analiz, birbirini takip eden kritik istekleriniz olup olmadığını gösterir. Bu durum önerilmez. Ağ izinde vurgulanmış olarak görmek için analizde listelenen isteklerin üzerine gelin.

Daha fazla bilgi için Birbirini takip eden kritik istekleri önleme başlıklı makaleyi inceleyin.

En ağır yığını vurgulama

Performans paneli artık Çağrı ağacı veya Aşağıdan yukarıya > En ağır yığın kenar çubuğunda Ana parçadaki öğelerin üzerine geldiğinizde bu öğeleri vurguluyor ve geri kalanını karartıyor. Bu sayede, çağrı yığınındaki en çok zaman alan iç içe öğeleri görsel olarak bulabilirsiniz.

Öğeler'deki erişilebilirlik ağacı görünümü

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

Daha önce Öğeler > Erişilebilirlik sekmesinde ayrı bir erişilebilirlik ağacına göz atabiliyordunuz. Artık DOM ağacı ile tam sayfa erişilebilirlik ağacı arasında geçiş yapmak için Öğeler panelindeki DOM ağacının sağ üst köşesinde bulunan 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 inceleyebilirsiniz.

Tam sayfa erişilebilirlik ağacı görünümü varsayılan olarak etkinleştirilmeden önce ve etkinleştirildikten sonraki görünüm .

Erişilebilirlik ağacı, yardımcı teknolojinin 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 edinmek için Chrome Geliştirici Araçları'nda 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 sekmeler için boş durumlar (hiçbir şey açık değilken) düzene sokuldu. Böylece, bunlarla çalışmaya başlamak için tam olarak ne yapmanız gerektiğini öğrenebilirsiniz. Örneğin, Ağ panelindeki bazı boş durumlar artık Sayfayı yeniden yükle gibi alakalı ve faydalı düğmelere sahip.

Ağ ve Arama panellerinde boş durumlar iyileştirilmeden önceki ve sonraki görünüm.

"Yapay zekaya sor" seçeneği menünün en altı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 zekaya sor" seçeneği, açılır menünün en altına taşınmadan önce ve taşındıktan sonraki görünümü.

Geri bildiriminizi crbug.com/364805393 adresindeki Yapay zeka yardımı panelinden gönderebilirsiniz.

Lighthouse 12.4.0

Lighthouse paneli artık Lighthouse 12.4.0'ı çalıştırıyor.

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

Geliştirici Araçları'nda Lighthouse panelini kullanmanın temel bilgileri için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 40543651.

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

  • Performans > Özet: İki satırlık Toplam süre ve Kendi süresi satırları, varsa parantez içinde (self time) simgesini de gösteren tek satırlık Süre ile değiştirildi (crbug.com/395572753).
  • Sorunlar: Yeni sorun türleri eklendi: <select> Erişilebilirlik ağacındaki sorunlar ve ağ hizmetinde ayrıştırma veya doğrulama sırasında oluşan SRI Mesaj İmzası hataları (crbug.com/381044049, crbug.com/347890366).
  • Erişilebilirlik: Öğeler > Stiller sekmesi artık klavye ile gezinme kullanarak adım adım ilerlediğiniz öğeleri özetliyor (crbug.com/396311936).
  • Öğeler: <select> ile ilgili sorunlar artık destekleniyor ve dalgalı bir alt çizgiyle (crbug.com/378738916) vurgulanıyor.
  • Ağ: "Geçersiz kılma noktası" 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, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.