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

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini ile konsoldaki 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ı Konsolu'na üretken yapay zeka özellikleri getiriyor.

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

Hatayla ilgili yapay zeka tarafından üretilmiş açıklama.

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

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

CSS ile sabitleme konumlandırması ile ilgili hataları 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 çö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 sabit konumlandırma API'si ile tanışın başlıklı makaleyi inceleyin.

Chromium sorunu: 40279608.

Kaynak paneliyle ilgili iyileştirmeler

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

Otomatik biçimlendirme ve parantez kapatmayı yapılandırma

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

İlgili davranışı yapılandırmak için Ayarlar > Tercihler > Kaynaklar'da yeni Otomatik parantez kapatma ve Küçültülmüş kaynakları otomatik olarak güzel yazdır seçeneklerini işaretleyin veya işaretlerini kaldırın.

Otomatik biçimlendirme ve parantez kapatma için yeni ayarlar eklenmeden önce 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 işlediğiniz reddedilen sözleri artık doğru şekilde yakalanmış olarak tanıyor.

Başka bir deyişle, Kaynaklar > Kesme Noktaları > Yakalanmamış istisnalarda duraklat seçeneği etkinleştirildiğinde hata ayıklayıcı, aşağıdakilere benzer ifadelerde duraklatılmaz:

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

Yakalanan retleri tanımadan önce ve tanıdıktan sonra

Chromium sorunu: 40283993.

Konsoldaki hata nedenleri

Konsol artık varsa yığın izinde hata nedenleri zincirlerini gösteriyor.

Hata ayıklamayı kolaylaştırmak için hataları yakalayıp yeniden oluştururken hata nedenlerini belirtebilirsiniz. Console, neden zincirinde ilerlerken her hata yığınını Caused by: önekiyle yazdırır. Böylece, orijinal hatayı görmeye devam edebilirsiniz.

Yazdırma yığın izlerinin "Caused by" (Nedeni) önekleriyle öncesi ve sonrası.

Chromium sorunu: 40182832.

Ağ paneli iyileştirmeleri

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

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

Erken ipuçları üstbilgileri, Ağ panelinin istek Üstbilgiler sekmesinde özel bir bölüme sahiptir. Daha önce, ilgili başlıkları Yanıt Başlıkları bölümünde bulabiliyordunuz.

Erken İpuçları, nihai yanıttan önce ön 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 kullanılması muhtemel olan kaynaklar hakkında ipuçları gönderebilir.

Erken ipuçları için özel bir bölüm eklenmeden önce ve sonra

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

Chromium sorunu: 40222701.

Şelale sütununu gizleme

Artık Ağ panelindeki Ş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 kutusunun işaretini kaldırın.

Şelale sütununu gizleme seçeneği eklenmeden önce ve eklendikten sonraki görünüm.

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, her seçici için geçen süre, eşleşme denemeleri ve sayısı ile 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 parçaları 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ğı simgesini, gizlemek için ise simgesini tıklayın. İşiniz bittiğinde parça adının sağındaki işaretini tıklayın.

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

Chromium sorunu: 311439339.

Bellek panelinde tutucuları yoksayma

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

Bir tutucuyu yoksaymak için bir nesne seçin ve Tutucu bölümünde bir tutucuyu sağ tıklayıp açılır menüden Bu tutucuyu yoksay'ı seçin. Yoksayılan tutucular, 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.

Retainer'ları yoksayma seçeneği eklenmeden önce ve eklendikten sonraki durum.

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

Chromium sorunu: 327337527.

Lighthouse 11.7.1

Lighthouse paneli artık Lighthouse 11.7.1'i çalıştırıyor. Değişikliklerin tam listesini inceleyin.

Önemli değişikliklerden biri, bu sürümde güncelliğini yitiren Publisher Ads eklentisi için desteğin sonlandırılmasıdır.

Yayıncı Reklamları eklentisi desteği eklenmeden ve kaldırıldıktan sonraki durum.

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.

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmeler 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 panelindeki söz dizimi vurgulayıcı güncellendi. Özellikle, artık normal ifadede v ve d işaretleri destekleniyor.
  • Ağ > Çerezler sekmesinde, muaf tutulan çerezlerin yanıt çerezleriyle eşlenmesiyle ilgili bir hata düzeltildi (41491846).
  • Öğeler > Stiller sekmesi artık şunları yapıyor:
    • Özel özelliklere sahip, tamamen aşırı yüklenmiş devralınan kuralları gösterir (41489874).
    • Renk temasına bağlı olarak light-dark() içinde uygulanan değeri vurgular (331123816).

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