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

Sofia Emelianova
Sofia Emelianova
GitHub

Paskalya yumurtasını bulma

DevTools ekibi, bu yılki 1 Nisan Şaka Günü'nü kutlamak için DevTools'da bir yere sürpriz yumurta sakladı.

Bu özelliği bulmak için renkli bir 💫 emojisi arayın.

Nesne paneli güncellemeleri

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

Öğeler > Stiller bölümünde odaklanılmış sayfa emülasyonu

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

Odak noktasını sayfadan Geliştirici Araçları'na kaydırırsanız odaklanma tarafından tetiklenen bazı yer paylaşımı öğeleri otomatik olarak gizlenir. Örneğin, açılır listeler, menüler veya tarih seçiciler. Odaklanılmış sayfa emülasyonu seçeneği, bu tür bir öğede odaklanılmış gibi hata ayıklamanıza olanak tanır.

Stiller sekmesinde odaklanılmış bir sayfa emüle etmeden önceki ve sonraki görünüm.

Chromium sorunu: 1468393.

var() geri dönüşlerinde renk seçici, açı saati ve yumuşatma düzenleyici

CSS düzenlemeyi basitleştirmek için Öğeler > Stiller sekmesinde artık var() geri dönüşlerinde Renk Seçici, Açı Saati ve Kolaylık Düzenleyici'yi kullanabilirsiniz.

var() geri dönüşlerindeki oluşturma öncesi ve sonrası renk seçici, açı saati ve yumuşatma düzenleyici araçları.

Chromium sorunu: 1520417.

CSS uzunluğu aracı desteği sonlandırıldı

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

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 temizleyin: Ayarlar > Deneysel > Stiller sekmesinde CSS <length> yazma aracını kullanımdan kaldırın.

Bu aracı kullanmaya devam etmek istiyorsanız Geliştirici Araçları ekibi, görüşlerinizi ve uzunluk aracının iş akışınızda size nasıl yardımcı olduğunu öğrenmek istiyor. crbug/1522657 adresinden geri bildirim gönderebilirsiniz.

Kullanımdan kaldırma denemesi devre dışı bırakıldı.

Performans > Ana parça bölümünde seçilen arama sonucu için pop-over

Aramayı kolaylaştırmak için Performans > Ana izindeki alev grafiği, arama sonuçları arasında geçiş yaptığınızda artık ilgili etkinliğin üzerinde bir pop-over gösteriyor.

Seçili arama sonucunun üzerinde pop-over gösterilmeden önceki ve gösterildikten sonraki görünümü.

Chromium sorunu: 1523279.

Ağ paneli güncellemeleri

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

Ağ > EventStream sekmesinde temizle düğmesi ve arama filtresi

Ağ > EventStream sekmesi:

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

Temizle düğmesi ve arama filtresi eklenmeden önceki ve sonraki görünüm.

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 getirme/XHR aracılığıyla gönderdiği etkinlikleri de yakalıyor. 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 ipucunun gösterildiği ö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 > Kesme noktaları bölümünde, açılır menüye Etkinleştir ve Tüm kesme noktalarını devre dışı bırak seçenekleri tekrar ekleniyor. Daha önce bu seçenekler kesme noktaları yeniden tasarımında yer almıyordu.

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

Etkinleştirme ve devre dışı bırakma seçenekleri geri getirilmeden önceki ve sonraki görünüm.

Chromium sorunu: 1522037.

Yüklenen komut dosyalarını Node.js için Geliştirici Araçları'nda görüntüleme

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

Komut Dosyaları sekmesi eklenmeden önce ve eklendikten sonraki görünüm.

Chromium sorunu: 1518364.

Lighthouse 11.5.0

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

Önemli 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üzen kaymalarının temel nedenlerini tahmin eden yeni bir denetim.

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.

Erişilebilirlik

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

  • Ekran okuyucular artık şunları duyuruyor:
    • Kaydedici panelindeki seçici türlerinin yanındaki Daha fazla bilgi bağlantı metni.
    • Ayarlar > Denemeler bölümünde filtreyle eşleşen deneme olmadığında
    • 'da kısayol kaldırma, onaylama veya geri yükleme sırasında işlem onayı Ayarlar > Kısayollar.
  • Ayarlar > Konumlar bölümündeki tablo artık erişilebilirlik araçları için doğru şekilde tablo olarak oluşturuluyor.

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

Diğer önemli noktalar

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

  • DevTools'daki yazı tipleri Chrome'a uyacak şekilde güncellendi (1523538).
  • Performans: Zaman çizelgesinin üzerine gelindiğinde ekran görüntüsünün gösterilmesiyle ilgili sorun düzeltildi (1519469).
  • Kaynaklar: Daha iyi kod okunabilirliği için Düzenleyici'deki satır yüksekliği artırıldı (1523640).
  • Ağ > Yanıtlar: Farklı biçimler 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, 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.