Chrome 136'taki DevTools'daki yenilikler

Sofia Emelianova
Sofia Emelianova
GitHub

Performans paneli iyileştirmeleri

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

Yeni performans analizleri

Performans > Analizler sekmesine yeni analizler ekleniyor:

  • Eski HTTP/1.1 protokolünü kullanan istekleri vurgulayan Modern HTTP.
  • Daha uzun önbellek sürelerinden yararlanabilecek istekleri vurgulayan ve web sitenizin yükleme süresini hızlandıran verimli önbellek süreleri kullanın.
  • font-display optimize ederseniz tahmini süre tasarrufunuzu gösteren yazı tipi görüntüleme

Analizler sekmesinde üç yeni analiz.

Vurgulamak için tıklayın

Artık performans izine göz atarken ilgili etkinliklerin izde vurgulanmasını ve geri kalanların soluklaştırılmasını sağlamak için Özet, Aşağıdan yukarıya, Çağrı ağacı ve Olay günlüğü tablolarındaki öğeleri tıklayabilirsiniz.

Ağ isteklerinin özetindeki sunucu zamanlamaları

Performans panelindeki Özet sekmesinde artık sunucu tarafı oluşturma teknolojilerini uygulayan ağ isteklerinin sunucu zamanlamaları gösteriliyor.

Bir ağ isteğinin özetindeki "Sunucu zamanlamaları" tablosu.

Performans paneli, Server-Timing yanıt başlığındaki verileri alır.

"Gizlilik ve güvenlik" bölümünde çerezleri filtreleme

Gizlilik ve güvenlik > Gizlilik > Üçüncü taraf çerezleri bölümündeki tabloya filtre eklenir. Böylece, ilgilendiğiniz çerezleri daha hızlı bulabilirsiniz.

"Üçüncü taraf çerezleri" tablosundaki filtre.

Panellerdeki tablolarda kB birimleriyle boyutlar

Aynı bağlamda birimlerin aynı kalması için Ağ ve Bellek panellerindeki tablolar ile Performans > Özet bölümündeki 1. taraf / 3. taraf tablosu artık tüm boyutları kB cinsinden gösteriyor. Bu sayede, MB, kB ve B birimlerini takip etmek yerine aynı sütundaki ve farklı panellerdeki sayıları doğrudan karşılaştırabilirsiniz.

Birleştirme işleminden önce ve sonraki boyut birimleri.

Otomatik tamamlama, Öğeler > Stiller bölümünde corner-shape ve corner-*-shape'yi destekler

Öğeler > Stiller'deki otomatik tamamlama özelliği artık corner-shape ve corner-*-shape özellikleri için karşılık gelen değerleri önerebilir.

"Köşe şekli" özelliği için otomatik tamamlama seçenekleri.

Chromium sorunu: 402346406.

Deneysel: DOM'daki öğeler ve özelliklerle ilgili sorunları vurgulama

Bu yeni deneysel özellik sayesinde Öğeler paneli artık DOM öğesi veya özellikleriyle ilgili sorunları kırmızı dalgalı bir alt çizgiyle vurgulayabilir. İmleçle bu tür öğelerin veya özelliklerin üzerine gelerek Sorunlar panelinde ilgili hataya yönlendiren bir bağlantı içeren ipucu görebilirsiniz.

DOM ağacında bir DOM sorununu vurgulayan, ipucu ve Sorunlar paneline bağlantı içeren önceki ve sonraki görünüm.

Öğeler paneli şu anda <select> öğesinin geçersiz alt öğelerini, eşleşmeyen ARIA tanımlarını ve geçersiz ARIA özelliklerini vurgulamaktadır.

Chromium sorunu: 378738916.

Lighthouse 12.5.0

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

Bu sürümdeki en önemli değişikliklerden biri, legacy-javascript'nın artık esmodules yerine Baseline kullanmasıdır. 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 > Analizler > Ağ bağımlılığı ağacı: Artık ağ ağacındaki tüm ağ isteklerinin süresini gösteriyor (400708304).
    • Ağ bağımlılık ağacı: Artık ağ ağacındaki tüm ağ isteklerinin süresini gösteriyor (400708304).
  • Animasyonlar: Yakalanan animasyonlar nedeniyle ayrılmış öğelerin Anı panelinde görünmesine neden olan hata düzeltildi 400635410.
  • Kaydedici: Kayıt ilk kez çalıştırıldığında artık kod yapıştırma işlemiyle aynı onay iletişim kutusunu kullanıyor.
  • Katmanlar: Artık en alttaki durum çubuğunda toplam katman sayısı ve tüm görünür katmanların toplam belleği gösteriliyor.
  • Bellek: Yığın anlık görüntüsü başlatma işlemi, görevleri tek bir çalışan yerine iki çalışan arasında paralelleştirilerek hızlandırıldı (42203857).
  • Sorunlar: Artık Yerel Ağ Erişimi (LNA) CORS hatalarını bildiriyor (395895368).
  • Erişilebilirlik:
    • İpuçları: Artık odak yerine kısayol tuşuna basıldığında gösteriliyor (396311936).
    • Öğeler > Stiller: var() işlevi artık klavye ile kullanılabilir. Yani --custom-property öğesini seçip Enter tuşuna basarak bağlantı hedefine (401212692) gidebilirsiniz.

Ö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.