Geliştirici Araçları'ndaki yenilikler, Chrome 128

Sofia Emelianova

Gemini'ın Console Insights özelliği çoğu Avrupa ülkesinde kullanıma sunuluyor

Bu sürüm, Gemini'ın konsol analizleri desteğini çoğu Avrupa ülkesine getiriyor.

Bu ülkelerden birindeyseniz artık Gemini'dan doğrudan Console'da analizler sunmasını isteyebilirsiniz. Böylece hataları ve uyarıları daha iyi anlayabilirsiniz.

Performans paneli güncellemeleri

Bu güncelleme, Performans panelinde bazı iyileştirmeler sunuyor.

Gelişmiş Ağ planı

Performans panelindeki Ağ izi, önemli bilgileri önceden gösterecek şekilde geliştirildi. Örneğin, süre ve ağ başlatıcı ağacı daha ayrıntılı hale getirildi. Ayrıca, görsel ipuçları ve renkler daha net hale getirildi. Bu sayede, artık Ağ paneli ile Performans > Özet sekmesi arasında geçiş yapmanız gerekmez. Ayrıca, Ağ paneline geçmeniz gerekiyorsa bu işlemi sizin için daha kolay ve hızlı hale getirdik.

Ağ parçası artık şunları yapıyor:

• İstek türleri için renk göstergesi gösterir.
• Oluşturmayı engelleyen istekleri sağ üst köşede kırmızı üçgenlerle işaretler.
• Seçildiğinde istek başlatıcıyı okla gösterir. Bu sayede, daha önce yalnızca Ağ panelinde kullanılabilen ağ başlatıcıları ağacını anlayabilirsiniz.
• Fareyle üzerine gelindiğinde, yeniden tasarlanan ipucu artık oluşturmayı engelleyen durum ve varsa öncelikteki değişiklikler de dahil olmak üzere yapılandırılmış zamanlama bilgilerini gösteriyor.
• Özet sekmesinde artık sağdaki sütunda zamanlamaların dökümü de gösteriliyor.

Ayrıca, artık izdeki isteği veya Özet sekmesindeki URL'sini sağ tıklayıp açılır menüden Ağ panelinde göster'i seçebilirsiniz. Geliştirici Araçları sizi Ağ paneline yönlendirir ve tabloda aradığınız isteği vurgular.

Genişletilebilirlik API'si ile performans verilerini özelleştirme

Bu sürüm, uzantı verileri için Performans paneline destek getiriyor. Artık performans izine etkinlikler ve ipucu açıklamaları içeren özel izler, Özet sekmesine ayrıntılar ve daha fazlasını ekleyebilirsiniz. Bu özellik, çerçevelerin, kitaplıkların ve özel enstrümantasyon içeren karmaşık uygulamaların geliştiricileri için yararlı olabilir.

Özel parça örneğini bu demo sayfasında görebilirsiniz. Performans > Kaydetme ayarları'nda check_box Uzantı verileri'ni etkinleştirin. Performans kaydını başlatın, demo sayfasında Add new Corgi'yi (Yeni Corgi ekle) tıklayın ve kaydı durdurun. İzde, Özet sekmesinde özel ipuçları ve ayrıntılar içeren etkinliklerin yer aldığı özel bir iz görürsünüz.

Kısacası, performans verilerini genişletmek için performance.measure() veya performance.mark() API çağrılarının measureOption.detail veya markOption.detail parametrelerine belirli bir yapı iletin.

Zamanlama parçasındaki ayrıntılar

User Timing part of Performance API'yi kullanarak Timings izine giriş ekleyen bir web geliştiriciyseniz artık mark ve measure etkinlikleri ile bunların zaman damgaları için Özet sekmesinde rastgele ayrıntılarınızı görebilirsiniz.

Chromium sorunu: 345418915.

Ağ panelinde listelenen tüm istekleri kopyalama

Ağ paneli artık tüm ağ günlüğünü kopyalamak yerine filtre uygulamanıza ve yalnızca listelenen istekleri kopyalamanıza olanak tanıyor.

Adlandırılmış HTML etiketleri ve daha az karmaşa ile daha hızlı yığın anlık görüntüleri

Bellek panelindeki yığın anlık görüntüleri artık daha hızlı, nesneler adlandırılmış HTML etiketlerine göre gruplandırılmış, daha az dahili nesne gösterilerek JavaScript dilinin semantiğiyle daha iyi eşleşiyor ve her zaman sayısal değerler içeriyor.

check_box Görüntüye sayısal değerleri dahil et ayarının performansı hızlandırıldı, varsayılan olarak etkinleştirildi ve Bellek panelinden kaldırıldı.

Dahili nesneleri anlık görüntüye manuel olarak dahil etmek için önce settings Ayarlar > Denemeler > check_box Yığın anlık görüntülerinde dahili bilgileri gösterme seçeneğini etkinleştir'i, ardından Bellek panelinde check_box Dahili bilgileri göster (...)'i etkinleştirin.

Chromium sorunları: 41490040, 343341610, 42203857.

Animasyonları yakalamak ve @keyframes canlı olarak düzenlemek için Animasyonlar panelini açın.

Animasyonlar paneli artık şunları yapar:

• Paneli açtığınızda zaten devam eden animasyonları yakalar. Böylece animasyonları yakalamak için sayfayı yenilemeniz gerekmez.
• @keyframes canlı düzenlenmesini destekler. Diğer bir deyişle, Öğeler > Stiller'deki @keyframes bölümünü düzenlerken yakalanan animasyonu günceller.

Her iki özelliği de aşağıdaki videoda uygulamalı olarak inceleyin.

Chromium sorunu: 352718055.

Lighthouse 12.1.0

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

Bu güncelleme, Largest Contentful Paint (LCP) lehine eski First Meaningful Paint (FMP) metriğinin kaldırılması da dahil olmak üzere bir dizi değişiklik getiriyor. 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: 772558.

Erişilebilirlik

Bu sürümde aşağıdaki erişilebilirlik iyileştirmeleri yapıldı:

• Canlı ifadelerin düzenleme alanında otomatik tamamlama yapıldıktan sonra Tab tuşuna basıldığında odak bir sonraki odak noktasına taşınır. Önceden metin girintili hale geliyordu.
• Yeniden boyutlandırıcıyı tıkladığınızda odak noktası bu öğe olur. Böylece sağ ve sol ok tuşlarıyla öğeyi taşıyabilirsiniz.
• Ekran okuyucu artık Kaynaklar'daki İzleme ifadesi ekle düzenleme alanını duyuruyor ve klavyeyle gezinirken İzleme ifadesini sil seçeneği net bir şekilde görünüyor.

Chromium sorunları: 349939551, 343942719, 349334243, 349428374.

Diğer önemli noktalar

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

• Performans:
  • Ağ izi: WebSocket bağlantı etkinlikleri eklendi 331351979.
  • Performans paneli artık en yoğun ana iş parçacığı etkinliğine doğru şekilde yakınlaşıyor 345599356.
  • Yanlış izleme dosyası türlerinin yüklenmesiyle ilgili hata düzeltildi. Artık doğru .json veya .gz 349864878 dışındaki türlerin yüklenmesi engelleniyor.
• Öğeler > Stiller:
  • Uzunluk özelliği değerlerindeki birim açılır listesi artık kullanımdan kaldırıldı 41495618.
  • İç içe yerleştirilmiş @ kuralları için etkin özelliklerin çözümlenmesi düzeltildi 346732737.
  • Etkin olmayan @position-try bölümler artık gri renkte gösteriliyor