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 eklendi:

  • Eski HTTP/1.1 protokolünü kullanan isteklerin vurgulanmasını sağlayan Modern HTTP.
  • Daha uzun önbellek sürelerinden yararlanabilecek istekleri öne çıkaran ve web sitenizin yükleme süresini hızlandıran verimli önbellek sürelerini kullanın.
  • font-display dosyasını optimize ederseniz tahmini zaman tasarrufunu gösteren yazı tipi görüntüleme.

Analizler sekmesinde üç yeni analiz.

Vurgulamak için tıklayın

Artık Özet, Aşağıdan yukarı, Çağrı ağacı ve Olay günlüğü tablolarındaki öğeleri tıklayarak performans izlemeye göz atarken ilgili etkinlikleri izlemede vurgulanmasını ve geri kalanını karartılmasını sağlayabilirsiniz.

Ağ isteklerinin özeti bölümündeki sunucu zamanlamaları

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

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

Performans paneli, Server-Timing yanıt başlığı 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 bir filtre eklendi. Böylece, ilgilendiğiniz çerezleri daha hızlı bulabilirsiniz.

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

Panellerdeki tablolarda KB cinsinden 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 panellerdeki sayıları doğrudan karşılaştırabilirsiniz.

Birleştirilen boyut birimlerinin öncesi ve sonrası.

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

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

"köşe-şekli" mülkü için otomatik tamamlama seçenekleri.

Chromium sorunu: 402346406.

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

Bu yeni deneysel özellik sayesinde Öğeler panelinde DOM öğeleriyle veya özellikleriyle ilgili sorunlar kırmızı dalgalı alt çizgiyle vurgulanabilir. İmleci bu tür öğelerin veya özelliklerin üzerine getirerek Sorunlar panelinde ilgili hatanın bağlantısını içeren bir ipucu görebilirsiniz.

DOM ağacında bir DOM sorununu vurgulamadan önceki ve sonraki durum, ipucu ve Sorunlar panelinin bağlantısı gösterilmektedir.

Öğeler panelinde şu anda <select> öğesinin geçersiz alt öğeleri, eşleşmeyen ARIA tanımları ve geçersiz ARIA özellikleri vurgulanmaktadır.

Chromium sorunu: 378738916.

Lighthouse 12.5.0

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

Bu sürümdeki en önemli değişiklik, legacy-javascript'te artık esmodules yerine Referans Değer kullanılmasıdır. 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 çıkanlar

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

  • Performans > Analizler > Ağ bağımlılık ağacı: Artık ağ ağacındaki tüm ağ isteklerinin süresini gösterir (400708304).
    • Ağ bağımlılık ağacı: Artık ağ ağacındaki tüm ağ isteklerinin süresini gösterir (400708304).
  • Animasyonlar: Kayıtlı animasyonlar nedeniyle ayrılmış öğelerin Anı panelinde görünmesine neden olan bir hata düzeltildi 400635410.
  • Kaydedici: Artık kayıt işlemini ilk kez çalıştırırken kod yapıştırma işlemiyle aynı onay iletişim kutusunu kullanır.
  • Katmanlar: Artık alt kısımdaki durum çubuğunda toplam katman sayısını ve tüm görünür katmanların toplam belleğini gösterir.
  • Bellek: Bir çalışan yerine iki çalışan arasında görevleri paralelleştirerek yığın anlık görüntüsünün başlatılması hızlandırıldı (42203857).
  • Sorunlar: Artık yerel ağ erişimi (LNA) CORS hatalarını (395895368) bildirir.
  • Erişilebilirlik:
    • İpuçları: Artık odak yerine kısayol tuşuna basıldığında gösteriliyor (396311936).
    • Öğeler > Stiller: var() işleviyle artık klavye üzerinden etkileşim kurulabilir. Yani --custom-property'ı 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, 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.