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

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini tarafından sunulan konsol analizleri çoğu Avrupa ülkesinde kullanıma sunuluyor

Bu sürüm, Gemini'nin konsol analizleri için çoğu Avrupa ülkesinde destek sunar.

Yeni desteklenen Avrupa ülkelerinin listesi

Almanya, Avusturya, Belçika, Bulgaristan, Çekya, Danimarka, Estonya, Finlandiya, Fransa, Güney Kıbrıs Rum Yönetimi, Hırvatistan, Hollanda, İrlanda, İspanya, İsveç, İsviçre, İtalya, İzlanda, Lihtenştayn, Litvanya, Lüksemburg, Macaristan, Malta, Norveç, Polonya, Portekiz, Romanya, Slovakya, Slovenya ve 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 aşağıdakileri yapar:

  • İstek türleri için renk göstergesi 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 sekmesinde artık sağdaki sütunda zamanlamaların dökümü de gösteriliyor.

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

Ayrıca artık kanaldaki 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.

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

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

Bu sürüm, Performans paneline uzantı verileri desteği ekler. Artık performans izlemeye etkinlikler ve ipucu açıklamaları içeren özel parçalar, Özet sekmesine ayrıntılar ve daha fazlası ekleyebilirsiniz. Bu özellik, özel enstrümantasyona sahip çerçeveler, kitaplıklar ve karmaşık uygulamalar geliştiren kullanıcılar için yararlı olabilir.

Özel parça örneğini bu demo sayfasında bulabilirsiniz. Performans > Kayıt ayarları'nda Uzantı verileri'ni etkinleştirin. Performans kaydı başlatın, demo sayfasında Yeni Corgi ekle'yi tıklayın ve ardından kaydı durdurun. İzlemede, Özet sekmesinde özel ipuçları ve ayrıntılar içeren etkinlikler içeren özel bir kanal görürsünüz.

Performans panelinde özel bir kanal.

Özetlemek gerekirse, 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ı gönderin.

Zaman çizelgesi kanalındaki ayrıntılar

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

Zaman çizelgesi kanalında zaman damgası ve ayrıntılar içeren özel 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 seçenekleri kopyalayın.

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

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ılmış 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ı.

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

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 eden animasyonlar yakalanır. Böylece, animasyon yakalamak için sayfayı yenilemenize gerek kalmaz.
  • @keyframes öğelerinin canlı olarak düzenlenmesini destekler. 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 panelinde artık Lighthouse 12.1.0 sürümü kullanılıyor.

Bu güncelleme, Largest Contentful Paint (LCP) metriği lehine eski İlk Anlamlı Boyama (FMP) metriğinin kaldırılması da dahil olmak üzere bir dizi değişiklik içerir. 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: 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 tamamlama işleminden sonra Tab tuşuna bastığınızda odak bir sonraki odak noktasına taşınır. Daha önce, metin girintili olurdu.
  • Bir yeniden boyutlandırıcıyı tıkladığınızda o öğeye odaklanırsınız. Böylece, sağ ve sol ok tuşlarını kullanarak öğeyi 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ğ izleme: 331351979 WebSocket bağlantısı etkinlikleri eklendi.
    • Performans paneli artık en yoğun ana mesaj dizisi etkinliğini (345599356) doğru şekilde yakınlaştırıyor.
    • Yanlış izleme dosyası türlerinin yüklenmesi ile ilgili bir hata düzeltildi. Artık doğru .json veya .gz 349864878 dışındaki türlerin yüklenmesi engellenmektedir.
  • Öğeler > Stiller:
    • Uzunluk mülk değerlerinde birim açılır menüsünün desteği sonlandırıldı 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ışı bırakıldı 40246493.
  • Uygulama:
    • Çerezler: Yenile tıklandığında çerezleri yenilemeyen bir hata düzeltildi 348683488.
    • Yerel depolama alanı: Artık anahtarlara göre alfabetik olarak sıralayabilirsiniz 341129585.

Ö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şmenize, en yeni web platformu API'lerini test etmenize 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.