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

Sofia Emelianova
Sofia Emelianova
GitHub

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.

Yeni desteklenen Avrupa ülkelerinin listesi

Almanya, Avusturya, Belçika, Bulgaristan, Çekya, Danimarka, Estonya, Finlandiya, Fransa, Güney Kıbrıs Rum Yönetimi, Birleşik Krallık, Hırvatistan, Hollanda, İrlanda, İspanya, İsveç, İsviçre, İtalya, İzlanda, Litvanya, Litvanya, Lüksemburg, Letonya, Malta, Portekiz, Norveç, Slovenya, Portekiz, Yunanistan.

Bu ülkelerden birinde ikamet ediyorsanız artık hataları ve uyarıları daha iyi anlayabilmek için Gemini'den doğrudan Konsol'da analizler sunmasını isteyebilirsiniz.

Console'daki bir hata için Gemini'den alınan analiz.

Performans paneli güncellemeleri

Bu güncelleme, Performans panelinde birkaç iyileştirme içeriyor.

Gelişmiş Ağ kanalı

Performans panelindeki Ağ kanalı, daha ayrıntılı süre ve ağ başlatıcı ağacı gibi önemli bilgileri önceden göstermek ve görsel ipuçları ile renklerde daha fazla netlik sağlamak için geliştirildi. 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ğ kanalı artık şunları yapar:

  • İstek türleri için bir renk açıklaması gösterir.
  • Oluşturma işlemini engelleyen istekleri sağ üst köşede kırmızı üçgenlerle işaretler.
  • Seçilen istek başlatıcıyı okla gösterir. Bu sayede, daha önce yalnızca Ağ panelinde bulunan ağ başlatıcı ağacını anlayabilirsiniz.
  • Fareyle üzerine gelindiğinde, yeniden tasarlanmış ipucu artık oluşturmayı engelleme durumu ve varsa öncelikteki değişiklikler de dahil olmak üzere yapılandırılmış zamanlama bilgilerini gösterir.
  • Özet sekmesi artık sağdaki bir sütunda zamanlamaların dökümünü de göstermektedir.

Özet sekmesinde renk açıklaması, ipuçları, oluşturma engelleme göstergeleri ve zamanlamalar içeren geliştirilmiş ağ kanalı.

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.

"Ağ panelinde göster" seçeneğini içeren istek için sağ tıklama menüsü.

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 enstrümantasyona sahip çerçeveler, kitaplıklar ve karmaşık uygulamalar geliştiren kullanıcılar için yararlı olabilir.

Bu demo sayfasında özel kanal örneğini inceleyin. Performans > Yakalama ayarları bölümünde 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.

Performans panelinde özel bir kanal.

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.

Zamanlamalar kanalında zaman damgası ve ayrıntılara sahip özel bir etkinlik.

Chromium sorunu: 345418915.

Ağ panelinde listelenen tüm istekleri kopyala

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

Yalnızca listelenen istekler için kopyalama seçenekleri.

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 artık daha da hızlı. Nesneler, adlandırılmış HTML etiketlerine göre gruplandırılıyor, daha az dahili nesne göstererek JavaScript dil semantikleriyle daha iyi eşleşiyor ve her zaman sayısal değerler içeriyor.

Adlandırılmış HTML etiketlerine göre gruplandırılan nesneler.

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

Anlık görüntüye dahili nesneleri manuel olarak eklemek için önce Ayarlar > Denemeler > Dahili öğeleri yığın anlık görüntülerinde gösterme seçeneğini göster'i ve ardından Bellek panelinde Dahili öğeleri göster (...) ayarını açın.

Chromium sorunları: 41490040, 343341610, 42203857.

Animasyon yakalamak ve @keyframes'ü 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, Öğeler > Stiller bölümünde @keyframes bölümünü düzenlerken yakalanan animasyonu günceller.

Aşağıdaki videoda her iki özelliğin de nasıl kullanıldığını 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ümde aşağıdaki erişilebilirlik iyileştirmeleri yapılmıştır:

  • 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 girintili olurdu.
  • 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 bölümündeki İzleme ifadesi ekle düzenleme alanını duyuruyor ve klavyeyle gezinirken İzleme ifadesini sil seçeneği artık net bir şekilde görülüyor.

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

Diğer öne çıkan özellikler

Bu sürümdeki dikkate değer düzeltme 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ş at kuralları 346732737 için etkin mülkleri çözme sorunu 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 anahtarlara göre alfabetik olarak sıralayabilirsiniz 341129585.

Önizleme kanallarını indirme

Chrome Canary, Yeni geliştirilenler veya Beta'yı varsayılan geliştirme tarayıcınız olarak 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ı ekibiyle 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

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