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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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 hatanın yapay zeka tarafından oluşturulan açıklaması.

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

Öğeler > Stiller'de @position-try kuralları desteği

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

@position-try CSS kurallarını desteklemeden önce ve sonra.

Daha fazla bilgi için CSS sabit konumlandırma API'sinin tanıtımı bölümüne bakın.

Chromium sorunu: 40279608.

Kaynaklar panelinde yapılan iyileştirmeler

Bu sürümde, Kaynaklar paneline bazı iyileştirmeler getiriliyor.

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

Artık Kaynaklar'da 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. Ayraç kapatma, açılış parantezi yazdığınızda otomatik olarak bir kapanış parantezi () veya }) veya etiket (>) ekler.

İlgili davranışı yapılandırmak için Ayarlar > Tercihler > Kaynaklar altındaki yeni otomatik kapanan parantezler ve Küçültülmüş kaynakları otomatik olarak yazdır seçeneklerini işaretleyin veya bunların işaretini kaldırın.

Otomatik güzel yazdırma ve köşeli parantez kapatma için yeni ayarlar eklendikten önce ve sonra.

Chromium sorunları: 40865010, 324314570.

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

Kaynaklar paneli, artık .catch() veya iki bağımsız değişken içeren .then() ile ele aldığınız reddedilen vaatlerin yakalandığını doğru şekilde kabul ediyor.

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 oluştururken hata nedenlerini belirtebilirsiniz. Konsol neden zincirinde ilerledikçe her hata yığınını Caused by: önekiyle yazdırır. Böylece orijinal hatayı yine görebilirsiniz.

"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 İpuçları başlıklarını inceleyin

Erken İpuçları başlıklarına, Ağ panelinde isteğin Başlıklar sekmesinde özel bir bölüm eklenir. Önceden alakalı üstbilgileri Yanıt Üstbilgileri bölümünde bulabilirdiniz.

İlk İpuçları, son yanıttan önce ön HTTP yanıtı göndermek için kullanılan bir HTTP durum kodudur (103 Early Hints). Bu, sunucunun ana kaynağı oluşturmakla meşgulken sayfa tarafından kullanılması muhtemel önemli alt kaynaklar (örneğin, bir stil sayfası veya kritik JavaScript) ya da kaynaklar hakkında tarayıcıya ipuçları göndermesine olanak tanır.

İlk İpuçları için özel bir bölüm eklemeden öncesi ve sonrası.

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 gizle

Artık Ağ panelinde Şelale sütununu diğer sütunları gizlediğiniz gibi 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ğinin eklenmesinden önceki ve sonraki süreç.

Chromium sorunu: 40574989.

Performans paneli iyileştirmeleri

Bu sürümde, Performans paneline çeşitli iyileştirmeler sunulmaktadır.

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ıralamayı 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 kanal 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ı yoksayın

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 üst taraftaki 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.

Kayda değer değişiklikler arasında, kullanımdan kaldırılan Yayıncı Reklamları eklentisi desteği de bulunmaktadır. Ancak bu destek bu sürümde geçerliliğini yitirmiştir.

Yayıncı Reklamları eklentisi desteğini kaldırmadan önce ve ekledikten sonra.

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.

Çeşitli önemli noktalar

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

  • Kaydedici paneli, önizleme durumundan çıktı (329271496).
  • Özel biçimlendirici, body() işlevi için geçerli bir davranış olan null döndürdüğünde Konsol artık hata göstermiyor (329400119).
  • Kaynaklar paneli, söz dizimi vurgulayıcıyı güncelledi, özellikle de artık normal ifadede v ve d işaretlerini destekliyor.
  • Ağ > Çerezler sekmesinde, muaf tutulan çerezleri yanıt çerezleriyle eşlemeyle 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).
    • Uygulanan değeri, renk temasına (331123816) bağlı olarak Light-dark() içinde vurgular.

Ö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ı Ekibi ile iletişime geçme

Yeni özellikleri, güncellemeleri veya Geliştirici Araçları ile ilgili diğer konuları görüşmek 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.