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

Sofia Emelianova
Sofia Emelianova

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ı Konsolu'nda üretken yapay zeka özellikleri sunuyor.

Bir hata veya uyarıyla ilgili yapay zeka tarafından oluşturulan bir açıklama almak için Konsoldaki mesajın yanında bulunan Ampul kıvılcımı. Bu hatayı anla (uyarı) 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'de @position-try kural desteği > Stiller

CSS sabit konumlandırması hatalarını ayıklamanıza yardımcı olması 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 paneli iyileştirmeleri

Bu sürümde, Kaynaklar paneline yönelik çeşitli iyileştirmeler yapılmıştır.

Otomatik okunaklı yazdırmayı ve köşeli parantez kapatmayı yapılandırma

Artık Kaynaklar'dan Düzenleyici için otomatik güzel yazdırmayı ve köşeli parantez kapatma özelliğini etkinleştirebilir veya devre dışı bırakabilirsiniz. Keyifli yazdırma, küçültülmüş dosyaları okunabilir hale 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 Ayarlar'da yeni check_box Otomatik kapanan parantezler ve check_box Küçültülmüş kaynakları otomatik olarak yazdır seçeneklerini işaretleyin veya bunların işaretini kaldırın > Tercihler > Kaynaklar.

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

Chromium sorunları: 40865010, 324314570.

Reddedilen vaatlerin yerine getirildiği 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 > Ayrılma noktaları > check_box Yakalanmayan istisnalarda duraklat açıksa hata ayıklayıcı aşağıdakine benzer ifadelerde duraklamaz:

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

Yakalanan retlerin tanınması öncesinde ve sonrasında.

Chromium sorunu: 40283993.

Console'daki hata nedenleri

Konsol, artık varsa yığın izlemedeki hata nedenlerini zincir halinde gösteriyor.

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.

Yazdırmadan önceki ve sonraki yığın izlemelerde "Caused by" önekleri bulunur.

Chromium sorunu: 40182832.

Ağ paneli iyileştirmeleri

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

İlk İpuçları başlıklarını inceleyin

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

İ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 İlk İpuçlarıyla sunucu düşünme süresini kullanarak daha hızlı sayfalar yükleme başlıklı makaleyi inceleyin.

Chromium sorunu: 40222701.

Şelale sütununu gizle

Artık 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 check_box_outline_blank Ş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 kaydet

Performans paneline, uzun süreli Stili Yeniden Hesapla etkinlikleri için CSS seçici istatistiklerini yakalamanızı sağlayan 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 bir seçici için geçen süre, eşleşme denemeleri ve sayısı ile yavaş yol eşleşmeme yüzdesiyle ilgili bilgiler gösterilir.

Seçici istatistikleri eklenmeden önceki ve sonraki.

Chromium sorunu: 324282954.

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

Performans paneli, parçaların sırasını değiştirmenize ve gizlemenize olanak tanıyan yeni bir yapılandırma moduna sahip olur.

Yapılandırma moduna girmek için kanal adının solundaki düzenle Düzenle düğmesini tıklayın. Ardından, kanalı taşımak için arrow_upward yukarı veya arrow_downward simgesini tıklayın ya da visibility_off gizlemeyi tıklayın. İşiniz bittiğinde parça adının sağındaki bitti Kontrol düğmesini tıklayın.

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

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 Retainer bölümünde bir tutucuyu sağ tıklayın ve açılır menüden Bu tutucuyu yoksay'ı seçin. Yok sayılan tutucular, 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.

Tutucuları yoksayma seçeneği eklemeden önce ve sonra.

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

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.

Kayda değer değişiklikler arasında, kullanımdan kaldırılan Yayıncı Reklamları eklentisi desteği de yer almaktadır. 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 öne çıkan anlar

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 v ve d destekleniyor işaretleridir.
  • > Çerezler sekmesi, muaf tutulan çerezleri yanıt çerezleriyle (41491846) eşlemeyle ilgili bir hatayı düzeltti.
  • Öğeler > Stiller sekmesi artık şunları 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

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

  • Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
  • Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i Daha fazla > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
  • @ChromeDevTools adresinden tweet atabilirsiniz.
  • Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.