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

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini ile Console'daki hataları ve uyarıları daha iyi anlama

Bu Chrome sürümü, karşılaştığınız hataları ve uyarıları daha iyi anlamanızı sağlamak amacıyla Geliştirici Araçları Konsoluna üretken yapay zeka özellikleri ekler.

Bir hata veya uyarıyla ilgili yapay zeka tarafından oluşturulan bir açıklama almak için Console'daki mesajın yanındaki Ampul kıvılcımı. Bu hatayı (uyarı) anlayın düğmesini tıklayın ve talimatları uygulayın.

Bir hatayla ilgili yapay zeka tarafından üretilen açıklama.

Daha fazla bilgi için Yapay zeka ile hataları ve uyarıları daha iyi anlama başlıklı makaleyi inceleyin.

Öğeler > Stiller bölümünde @position-try kuralları desteği

CSS ankraj konumlandırmasında hata ayıklamanıza yardımcı olmak için Öğeler > Stiller sekmesi artık @position-try CSS kurallarını desteklemektedir. Sekme, position-try-options değerlerini çözer ve her seçeneği özel bir @position-try --name bölümüne bağlar.

@position-try CSS kurallarını destekleyen öncesi ve sonrası.

Daha fazla bilgi için CSS ankraj konumlandırma API'si kullanıma sunuluyor başlıklı makaleyi inceleyin.

Chromium sorunu: 40279608.

Kaynaklar panelinde yapılan iyileştirmeler

Bu sürümde Kaynaklar panelinde çeşitli iyileştirmeler yapıldı.

Otomatik güzel yazdırma ve parantez kapatma özelliğini yapılandırma

Artık Kaynaklar bölümünde Düzenleyici için otomatik güzel yazdırma ve parantez kapatma özelliğini etkinleştirebilir veya devre dışı bırakabilirsiniz. Okunaklı hâle getirme, küçültülmüş dosyaları okunabilir hâle getirir. Parantez kapatma, açılış parantezi yazdığınızda otomatik olarak bir kapanış parantezi () veya }) ya da etiket (>) ekler.

İlgili davranışı yapılandırmak için Ayarlar > Tercihler > Kaynaklar bölümünde yeni Köşeli parantezleri otomatik olarak kapat ve Küçültülmüş kaynakları otomatik olarak güzel bir şekilde yazdır seçeneklerini işaretleyin veya işaretlerini kaldırın.

Otomatik güzel yazdırma ve parantez kapatma için yeni ayarlar eklenmeden önceki ve sonraki durum.

Chromium sorunları: 40865010, 324314570.

İşlenen reddedilen sözler yakalanmış olarak kabul edilir

Kaynaklar paneli, .catch() veya iki bağımsız değişkenli .then() ile ele aldığınız reddedilen vaatleri artık doğru şekilde yakalanmış olarak tanır.

Diğer bir deyişle, Kaynaklar > Duraklatma noktaları > Yakalanmayan istisnalarda duraklat ayarı açıkken hata ayıklayıcı aşağıdakine benzer ifadelerde duraklamaz:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Tespit edilen retleri tanımadan önceki ve sonraki durum.

Chromium sorunu: 40283993.

Konsoldaki hata nedenleri

Konsol artık yığın izlemede varsa hata nedenlerinin zincirlerini gösterir.

Hata ayıklamayı kolaylaştırmak için hataları yakalayıp yeniden atarken hata nedenlerini belirtebilirsiniz. Console, neden zincirini yukarı doğru ilerlerken her hata yığınını Caused by: ön ekiyle yazdırır. Böylece asıl hatayı görmeye devam edebilirsiniz.

"Caused by" ön ekleriyle yığın izlemelerinin önce ve sonra durumları.

Chromium sorunu: 40182832.

Ağ paneli iyileştirmeleri

Bu sürümde Ağ panelinde çeşitli iyileştirmeler yapıldı.

İlk ipucu başlıklarını inceleme

Erken İpuçları üstbilgileri, isteğin Ağ panelindeki Başlıklar sekmesinde özel bir bölüme sahiptir. Önceden alakalı üstbilgileri Yanıt Üstbilgileri bölümünde bulabilirsiniz.

Erken İpuçları, nihai yanıttan önce ön bir HTTP yanıtı göndermek için kullanılan bir HTTP durum kodudur (103 Early Hints). Bu sayede sunucu, ana kaynağı oluşturmakla meşgulken tarayıcıya kritik alt kaynaklar (ör. stil sayfası veya kritik JavaScript) ya da sayfa tarafından büyük olasılıkla kullanılacak kökler hakkında ipuçları gönderebilir.

Erken İpuçları için özel bir bölüm eklemeden önce ve sonra.

Daha fazla bilgi için Erken İpuçları ile sunucu düşünme süresini kullanarak daha hızlı sayfa yüklemeleri başlıklı makaleyi inceleyin.

Chromium sorunu: 40222701.

Şelale sütununu gizleme

Artık diğer sütunları gizlediğiniz gibi Ağ panelinde Şelale sütununu gizleyebilirsiniz. Herhangi bir sütun adını sağ tıklayın ve açılır menüdeki Şelale onay kutusunu temizleyin.

Şelale sütununu gizleme seçeneği eklenmeden önceki ve sonraki durum.

Chromium sorunu: 40574989.

Performans paneli iyileştirmeleri

Bu sürümde Performans panelinde çeşitli iyileştirmeler yapıldı.

CSS seçici istatistiklerini yakalama

Performans paneline, uzun süren Stili Yeniden Hesapla etkinlikleri için CSS seçici istatistiklerini yakalamanıza olanak tanıyan yeni bir ayar eklendi.

İstatistikleri görmek için bir Stili Yeniden Hesapla etkinliği seçin ve yeni Seçici İstatistikleri sekmesini açın. Sekmede, geçen süre, eşleşme denemeleri ve sayısı ve her seçici için yavaş yol eşleşmeme yüzdesi hakkında bilgiler gösterilir.

Seçici ekleme öncesi ve sonrası istatistikleri.

Chromium sorunu: 324282954.

Sırayı değiştirme ve parçaları gizleme

Performans paneline, parçaların sırasını değiştirmenize ve gizlemenize olanak tanıyan yeni bir yapılandırma modu eklendi.

Yapılandırma moduna girmek için parça adının solundaki Düzenle düğmesini tıklayın. Ardından, parçayı taşımak için yukarı veya aşağı oku, parçayı gizlemek için simgesini tıklayın. İşiniz bittiğinde parça adının sağındaki Kontrol düğmesini tıklayın.

Sonraki sürüm olan Chrome 126, bu kullanıcı arayüzünde daha fazla iyileştirme getirecek.

Chromium sorunu: 311439339.

Bellek panelinde tutucuları yoksayma

Artık Bellek paneliyle yakaladığınız yığın anlık görüntülerindeki tutucuları yoksayabilirsiniz.

Bir tutucuyu yoksaymak için bir nesne seçin ve Tutma bölümünde, tutucuyu sağ tıklayın ve açılır menüden Bu tutucuyu yoksay'ı seçin. Yok sayılan hizmet sözleşmeleri, Mesafe sütununda ignored değeriyle işaretlenir. Yoksaymayı durdurmak için üstteki işlem çubuğunda Yoksayılan tutucuları geri yükle'yi tıklayın.

Bağlılık sözleşmelerini yoksayma seçeneği eklenmeden önceki ve sonraki durum.

Ayrıca, yığın anlık görüntüleri artık daha fazla sayıda (yüz milyonlarca) kapsayıcı kenar ve düğüm (332350576) desteklemektedir.

Chromium sorunu: 327337527.

Lighthouse 11.7.1

Lighthouse panelinde artık Lighthouse 11.7.1 sürümü kullanılıyor. Değişikliklerin tam listesini inceleyin.

Bu sürümde desteği sonlandırılan Yayıncı Reklamları eklentisi, önemli değişiklikler arasındadır.

Yayıncı reklamları eklenti desteğini eklemeden ve kaldırdıktan önceki ve sonraki durum.

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.

Diğer öne çıkan özellikler

Bu sürümdeki dikkate değer düzeltme ve iyileştirmelerden bazıları şunlardır:

  • Kaydedici paneli artık resmi olarak önizleme durumundan çıktı (329271496).
  • Özel bir biçimlendirici, body() işlevi için null döndürdüğünde Console artık hata göstermiyor. Bu geçerli bir davranıştır (329400119).
  • Kaynaklar panelinde söz dizimi vurgulayıcı güncellendi. Özellikle, normal ifadede v ve d işaretlerini artık destekliyor.
  • Ağ > Çerezler sekmesinde, muaf tutulan çerezlerin yanıt çerezleriyle eşlenmesiyle ilgili bir hata düzeltildi (41491846).
  • Öğeler > Stiller sekmesi artık aşağıdakileri yapıyor:
    • Özel özelliklere sahip tamamen aşırı yüklenmiş devralınan kuralları gösterir (41489874).
    • Renk temasına (331123816) bağlı olarak light-dark() işlevinde uygulanan değeri vurgular.

Ö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.