Geliştirici Araçları'ndaki yenilikler (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Paskalya yumurtasını bulma

DevTools ekibi, bu yılki 1 Nisan'ı kutlamak için DevTools'a bir Paskalya yumurtası sakladı.

Renkli 💫 emojiyi bulun.

Nesne paneli güncellemeleri

Bu sürümde Öğeler panelinde çeşitli güncellemeler yapıldı.

Öğeler > Stiller bölümünde odaklanmış bir sayfayı emüle etme

Öğeler > Stiller sekmesinde artık Öğe durumunu değiştir (:hov) düğmesinin altında Odaklanmış bir sayfayı taklit et seçeneği bulunuyor. Daha önce bu seçeneği yalnızca Oluşturma panelinde bulabilirsiniz.

Odağı sayfadan Geliştirici Araçları'na geçirirseniz bazı yer paylaşımı öğeleri, odak tarafından tetiklenirse otomatik olarak gizlenir. Örneğin, açılır listeler, menüler veya tarih seçicileri. Odaklanmış sayfa emülasyonu seçeneği, bu tür bir öğede odaktaymış gibi hata ayıklamanızı sağlar.

Stiller sekmesinde odaklanmış bir sayfayı taklit etmenin öncesi ve sonrası.

Chromium sorunu: 1468393.

var() yedeklerinde Renk Seçici, Açı Saati ve Easing Düzenleyici

CSS düzenlemesini basitleştirmek için Öğeler > Stiller sekmesinde artık var() yedeklerinde Renk Seçici, Açı Saati ve Yumuşatma Düzenleyici'yi kullanabilirsiniz.

var() yedeklerinde oluşturma öncesi ve sonrası Renk Seçici, Açı Saati ve Easing Düzenleyici araçları.

Chromium sorunu: 1520417.

CSS length aracının desteği sonlandırıldı

CSS uzunluk oluşturma aracı, iş akışını yavaşlattığı ve fazla değer katmadığı yönündeki geri bildirimler nedeniyle kullanımdan kaldırılıyor.

Artık değeri ayarlamak için sürükleyemez veya açılır menüden bir birim türü seçemezsiniz. Bunun yerine, değeri çift tıklayıp yeni bir değer yazın.

Uzunluk aracını tekrar etkinleştirmek için Ayarlar > Deneysel > Stiller sekmesinde CSS <length> içerik üretme aracının desteği sonlandırıldı'yı temizleyin.

Yine de bu aracı kullanmak istiyorsanız DevTools ekibi, fikrinizi ve uzunluk aracının iş akışınızda size nasıl yardımcı olduğunu öğrenmek ister. crbug/1522657 adresinde geri bildirimde bulunabilirsiniz.

Desteği sonlandırılan deneme devre dışı bırakılır.

Performans > Ana kanal bölümünde seçili arama sonucu için pop-up

Arama yapmayı kolaylaştırmak için Performans > Ana kanalındaki alev grafiğinde, arama sonuçları arasında geçiş yaptığınızda ilgili etkinliğin üstünde bir pop-up gösterilir.

Seçilen arama sonucunun üzerinde pop-up gösterilen öncesi ve sonrası.

Chromium sorunu: 1523279.

Ağ paneli güncellemeleri

Bu sürümde Ağ panelinde birkaç güncelleme yapıldı.

Ağ > EventStream sekmesindeki temizleme düğmesi ve arama filtresi

Ağ > EventStream sekmesi şunları alır:

  • Tablodaki yakalanan etkinlikleri temizleyen bir Temizle düğmesi.
  • Normal ifadeleri anlayan bir arama filtresi.

Temizle düğmesi ve arama filtresi eklenmeden önceki ve sonraki durum.

Geliştirici Araçları Ekibi, bu özelliği kullanıma sunduğu için Charles Vazac'a teşekkür eder.

Ayrıca EventStream sekmesi artık yalnızca EventSource API'yi değil, sunucuların fetch/XHR aracılığıyla gönderdiği etkinlikleri de yakalar. Bu demo sayfasında deneyin.

Chromium sorunu: 1488863, 40659493.

Ağ > Çerezler bölümünde üçüncü taraf çerezleri için muafiyet nedenlerini içeren ipuçları

Ağ > Çerezler sekmesinde artık, üçüncü taraf çerezlerinin kullanımdan kaldırılması nedeniyle engellenmesi gereken çerezlerin yanında muafiyet nedenlerini içeren ipuçları gösteriliyor.

Üçüncü taraf çerezi için muafiyet nedenini içeren bir ipucu gösteren öncesi ve sonrası.

Üçüncü taraf çerezlerine aşağıdaki nedenlerle izin verilebilir:

Chromium sorunu: 41491846.

Kaynaklar'daki tüm kesme noktalarını etkinleştirme ve devre dışı bırakma

Kaynaklar > Kırılma noktaları bölümünde, açılır menüsüne Etkinleştir ve Tüm kırılma noktalarını devre dışı bırak seçenekleri eklendi. Daha önce bu seçenekler, durdurma noktalarının yeniden tasarımı kapsamında çıkarılmıştı.

Tüm kesme noktalarını etkinleştirmek veya devre dışı bırakmak için Kaynaklar > Kesme noktaları bölümünde bir kesme noktasını sağ tıklayın ve ilgili seçeneği belirleyin.

Etkinleştirme ve devre dışı bırakma seçeneklerini geri getirmeden önceki ve sonraki durum.

Chromium sorunu: 1522037.

Node.js için DevTools'da yüklü komut dosyalarını görüntüleme

Node.js için DevTools artık yüklenen komut dosyalarını Kaynaklar > Komut Dosyaları bölümündeki gezinme ağacında gösteriyor.

Yüklenen komut dosyalarının ağacını içeren Komut Dosyaları sekmesi eklenmeden önceki ve sonraki durum.

Chromium sorunu: 1518364.

Lighthouse 11.5.0

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

Dikkat çeken değişikliklerden biri, düzen kaymalarının temel nedenlerini tahmin eden yeni bir denetimdir. Bu denetim, yalnızca düzen kaymalarından etkilenen öğeleri listeleyen layout-shift-elements denetiminin yerini alır.

Düzenleme değişikliklerinin temel nedenlerini tahmin eden yeni bir denetim.

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.

Erişilebilirlik

Bu sürümde aşağıdaki erişilebilirlik iyileştirmeleri yapılmıştır:

  • Ekran okuyucular artık şunları duyurur:
    • Kaydedici panelinde, seçici türlerinin yanındaki Daha fazla bilgi bağlantı metni.
    • Ayarlar > Deneyler bölümünde filtreyle eşleşen deneme olmadığında.
    • Ayarlar > Kısayollar bölümünde bir kısayolu kaldırırken, onaylarken veya geri yüklerken gösterilen işlem onayı.
  • Ayarlar > Konumlar bölümündeki tablo artık erişilebilirlik araçları için tablo olarak doğru şekilde oluşturuluyor.

Chromium sorunları: 1516957, 324282443, 324467508, 324930007.

Diğer öne çıkan özellikler

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

  • DevTools'daki yazı tipleri Chrome ile eşleşecek şekilde güncellendi (1523538).
  • Performans: Fareyle zaman çizelgesinin üzerine geldiğinizde ekran görüntüsü görüntüleme sorunu düzeltildi (1519469).
  • Kaynaklar: Kodun okunabilirliğini artırmak için Düzenleyici'deki satır yüksekliği artırıldı (1523640).
  • Ağ > Yanıtlar: Farklı biçim ve kodlamalarla ilgili çeşitli görüntüleme sorunları düzeltildi (1523128, 1509336, 1523128, 41481944, 1509336).

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