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

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini ile konsol analizleri çoğu Avrupa ülkesinde kullanıma sunuluyor

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

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, İngiltere, İrlanda, İspanya, İsveç, İsviçre, İtalya, İzlanda, Letonya, Lihtenştayn, Litvanya, Lüksemburg, Macaristan, Malta, Norveç, Polonya, Portekiz, Romanya, Slovakya, Slovenya ve Yunanistan.

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

Konsol'daki bir hata için Gemini'dan alınan analiz.

Performans paneli güncellemeleri

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

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ğ izi artık şunları yapar:

  • İ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 bulunan 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.

Özet sekmesinde renk göstergesi, ipuçları, oluşturmayı engelleyen göstergeler ve zamanlamalar içeren gelişmiş ağ izi.

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.

"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, 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 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.

Performans panelinde özel bir izleme.

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ı iletin.

Zamanlamalar parçasındaki ayrıntılar

Performance API'nin User Timing bölümünü 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.

Zamanlamalar izindeki, zaman damgası ve ayrıntıları olan bir özel etkinlik.

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.

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

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.

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ı 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 > Denemeler > Yığın anlık görüntülerinde dahili bilgileri gösterme seçeneğini etkinleştir'i, ardından Bellek panelinde 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 üzerinde canlı düzenlemeyi destekler. Başka 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 40246493.
  • Uygulama:
    • Çerezler: Yenile tıklamasının ardından çerezlerin yenilenmemesine neden olan hata düzeltildi 348683488.
    • Yerel depolama: Artık anahtarlara göre alfabetik olarak sıralama yapabilirsiniz 341129585.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartış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.