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

Gemini'ın Console analizleri, çoğu Avrupa ülkesinde kullanıma sunuluyor

Bu sürüm, Gemini'ın Console analizleri özelliğini çoğu Avrupa ülkesinde destekler.

Bu ülkelerden birindeyseniz artık Gemini'dan analiz sağlamasını doğrudan Konsolda isteyebilirsiniz. Böylece hataları ve uyarıları daha iyi anlayabilirsiniz.

Performans paneli güncellemeleri

Bu güncelleme, Performans panelinde bazı iyileştirmeler sağlıyor.

Geliştirilmiş ağ kanalı

Performans panelindeki Ağ kanalı, kritik bilgileri (ör. daha ayrıntılı süre ve ağı başlatan ağacı) önceden gösterecek ve görsel işaretler ile renklerde daha fazla netlik sağlayacak şekilde geliştirildi. Bu nedenle, Ağ paneli ve Performans > Özet sekmesini kullanmaya devam edebilirsiniz. Ayrıca, hâlâ Ağ paneline geçiş yapmanız gerekiyorsa bu işlemi sizin için daha kolay ve hızlı hale getirdik.

Ağ kanalı artık şunları yapar:

• İstek türleri için bir renk açıklaması gösterir.
• Oluşturma engelleme istekleri, sağ üst köşede kırmızı üçgenlerle işaretlenir.
• Seçim yapıldıktan sonra isteği başlatanı okla gösterir. Bu, daha önce yalnızca Ağ panelinde kullanılabilen ağ başlatıcıları ağacını anlamanıza yardımcı olur.
• Fareyle bir ipucunun üzerine gelindiğinde, oluşturma engelleme durumu ve varsa öncelik değişiklikleri de dahil olmak üzere yapılandırılmış zamanlama bilgileri artık yeniden düzenlenmiş bir ipucu olarak gösteriliyor.
• Özet sekmesi artık sağdaki bir sütunda zamanlamaların dökümünü de göstermektedir.

Buna ek olarak, Özet sekmesinde kanalda veya URL'sinde isteği 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.

Performans verilerini extensibility API ile özelleştirin

Bu sürüm, Performans paneline uzantı verileri için destek sağlar. Artık performans takibine etkinlikler ve ipucu açıklamaları içeren özel parçalar, Özet sekmesine ayrıntılar ve daha fazlasını ekleyebilirsiniz. Bu özellik, özel araçlara sahip çerçeve, kitaplık ve karmaşık uygulama geliştiricileri için faydalı olabilir.

Bu demo sayfasında özel kanal örneğini inceleyin. Performans > Yakalama ayarları, check_box Uzantı verileri'ni açın. Bir performans kaydı başlatın, demo sayfasında Yeni Corgi ekle'yi tıklayın, ardından kaydı durdurun. Özet sekmesindeki izlemede, özel ipuçları ve ayrıntılar içeren etkinlikleri içeren özel bir kanal 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 ya da markOption.detail parametrelerine belirli bir yapıyı iletin.

Zamanlamalar kanalındaki ayrıntılar

Zamanlamalar kanalına giriş eklemek için Performance API'nin Kullanıcı Zamanlaması bölümünü kullanan bir web geliştiricisiyseniz artık rastgele bilgilerinizi mark ve measure etkinlikleri ile bunların zaman damgaları için Özet sekmesinde görebilirsiniz.

Chromium sorunu: 345418915.

Ağ panelinde listelenen tüm istekleri kopyala

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

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

Bellek panelindeki yığın anlık görüntüleri daha da hızlı hale geliyor, artık adlandırılmış HTML etiketlerine göre gruplanmış nesnelere sahip, daha az dahili nesne göstererek JavaScript dil anlamını daha iyi eşleştiriyor ve her zaman sayısal değerler içeriyor.

check_box Yakalamaya 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 eklemek için önce ayarlar Ayarlar > Denemeler > check_box Dahili öğeleri yığın anlık görüntülerinde gösterme seçeneğini göster, ardından Bellek panelinde check_box Dahili öğeleri göster (...) ayarını açın.

Chromium sorunları: 41490040, 343341610, 42203857.

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

Animasyonlar paneli artık aşağıdakileri yapar:

• Paneli açtığınızda, devam etmekte olan animasyonları yakalar. Böylece, animasyonları yakalamak için sayfayı yenilemeniz gerekmez.
• @keyframes için canlı düzenleme desteklenir. Diğer bir deyişle, siz Öğeler > içindeki @keyframes bölümünü düzenlerken yakalanan animasyonu günceller. Stiller.

Aşağıdaki videoda her iki özelliğin de işleyiş şeklini görebilirsiniz.

Chromium sorunu: 352718055.

Lighthouse 12.1.0

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

Bu güncelleme, eski First Meaningful Paint (FMP) metriğinin kaldırılması ve Largest Contentful Paint (LCP) metriğinin yerini alması da dahil olmak üzere bir dizi değişiklik getiriyor. Değişikliklerin tam listesini inceleyin.

Geliştirici Araçları'nda Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme konusuna bakın.

Chromium sorunu: 772558.

Erişilebilirlik

Bu sürüm aşağıdaki erişilebilirlik iyileştirmelerine sahiptir:

• Canlı ifadelerin düzenleme alanında otomatik tamamlamadan sonra Sekme tuşuna basılması, odağı bir sonraki odak noktasına taşır. Daha önce, metin girintiliydi.
• Yeniden boyutlandırma aracı tıklandığında odak bu öğeye taşınır. Böylece sağ ve sol ok tuşlarıyla taşıyabilirsiniz.
• Ekran okuyucu, artık Kaynaklar'daki İzleme ifadesi ekle düzenleme alanının olduğunu ve klavyeyle gezinirken İzleme ifadesini sil'in artık net bir şekilde görülebildiğini duyuruyor.

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

Çeşitli öne çıkan anlar

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

• Performans:
  • Ağ yolu: Eklenen WebSocket bağlantı etkinlikleri 331351979.
  • Performans paneli artık en yoğun ana iş parçacığı etkinliğini 345599356 doğru şekilde yakınlaştırıyor.
  • 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 önlendi.
• Öğeler > Stiller:
  • Uzunluk özelliği değerlerindeki birim açılır menüsü artık kullanımdan kaldırılmıştır 41495618.
  • İç içe yerleştirilmiş 346732737 kuralları için etkin özelliklerin çözümlenmesi düzeltildi.
  • Etkin olmayan @position-try bölümleri artık devre dışıdır 40246493.
• Uygulama:
  • Çerezler: Yenile tıklamasının ardından 348683488'in tıklanmasının ardından çerezlerin yenilenmemesi sorunu düzeltildi.
  • Yerel depolama alanı: Artık 341129585 anahtarlara göre alfabetik olarak sıralayabilirsiniz.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

• Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
• Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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