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

Sofia Emelianova
Sofia Emelianova
GitHub

Paskalya yumurtasını bulun

Bu yıl 1 Nisan'ı kutlamak için Gündüz Geliştirici Araçları ekibi, Geliştirici Araçları'nın bir yerine bir Paskalya yumurtası gizledi.

Bu emojiyi bulmak için renkli bir 💫 emoji arayın.

Öğeler paneli güncellemeleri

Bu sürüm, Öğeler paneline çeşitli güncellemeler getirir.

Öğeler >'de odaklanılan sayfa emülasyonu Stiller

Öğeler > Stiller sekmesinde artık Öğelerin durumunu değiştir (:hov) düğmesinin altında check_box Odaklanmış sayfayı emüle et seçeneği bulunuyor. Önceden, bu seçenek yalnızca Oluşturma panelinde bulunabiliyordu.

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çiciler. Odaklanılan sayfayı emüle et seçeneği, böyle bir öğedeymiş gibi hata ayıklamanızı sağlar.

Stiller sekmesinde odaklanılan bir sayfanın emülasyonunun öncesinde ve sonrasında.

Chromium sorunu: 1468393.

var() yedekte Renk Seçici, Açılı Saat ve Yumuşak Geçiş Düzenleyici

CSS düzenlemesini basitleştirmek için Öğeler > Stiller sekmesi artık var() yedeklerinde Renk Seçici, Açı Saat ve Yumuşak Geçiş Düzenleyici'yi kullanmanıza olanak tanıyor.

var() yedeklerindeki Renk Seçici, Açılı Saat ve Yumuşak Geçiş Düzenleyici araçlarını oluşturma öncesi ve sonrası.

Chromium sorunu: 1520417.

CSS uzunluk aracı desteği sonlandırıldı

CSS uzunluğu yazma aracı, iş akışını yavaşlattığına ve fazla değer sağlamadığına dair geri bildirimler nedeniyle kullanımdan kaldırıldı.

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

Uzunluk aracını tekrar açmak için ayarlar Ayarlar > Denemeler > check_box CSS <length> desteğini sonlandırma içerik oluşturma aracını kullanın.

Yine de bu aracı kullanmak istiyorsanız Geliştirici Araçları ekibi, görüşlerinizi öğrenmek ve uzunluk aracının iş akışınızda size nasıl yardımcı olduğunu öğrenmek ister. crbug/1522657 adresinden geri bildirimlerinizi iletebilirsiniz.

Desteği sonlandırma denemesi devre dışı bırakıldı.

Seçilen arama sonucunun Performans > Ana parça

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

Seçilen arama sonucunun üzerinde bir pop-up gösterilmesinden önce ve sonra.

Chromium sorunu: 1523279.

Ağ paneli güncellemeleri

Bu sürüm, Ağ paneline birkaç güncelleme getiriyor.

Ağ'daki düğmeyi ve arama filtresini temizle > EventStream sekmesi

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

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

Temizle düğmesi ve arama filtresi eklemeden önce ve sonra.

Geliştirici Araçları ekibi, bu özelliği etkinleştirdiği için Charles Vazac'a teşekkür etmek istiyor.

Ayrıca EventStream sekmesi artık sunucuların yalnızca EventSource API ile değil, getirme/XHR yoluyla gönderdiği etkinlikleri de yakalıyor. Bu demo sayfasında deneyin.

Chromium sorunu: 1488863, 40659493.

Ağ'daki üçüncü taraf çerezleri için muafiyet nedenleri içeren ipuçları > Kurabiye

Ağ > Çerezler sekmesinde artık, aksi halde üçüncü taraf çerezlerinin kullanımdan kaldırılması tarafından engellenmesi gereken çerezlerin yanında muafiyet nedenleri bulunan ipuçları yer alıyor.

Üçüncü taraf çerezi için muafiyet nedeni içeren bir ipucunun gösterilmesinden önce ve sonra.

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

Chromium sorunu: 41491846.

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

Kaynaklar > Ayrılma noktaları bölümü, Etkinleştir ve Tüm kesme noktalarını devre dışı bırak seçeneklerini açılır menüye geri getirir. Daha önce, bu seçenekler ayırma noktalarının yeniden tasarlanması nedeniyle dışarıda bırakılmıştı.

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

Etkinleştirme ve devre dışı bırakma seçeneklerinin geri getirilmesinden önceki ve sonraki süreç.

Chromium sorunu: 1522037.

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

Node.js için Geliştirici Araçları, yüklenen komut dosyalarını artık Kaynaklar > Komut dosyaları.

Komut Dosyaları sekmesini, yüklenen komut dosyaları ağacıyla eklemeden önce ve sonra.

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.

Kayda değer değişiklikler arasında, düzen değişikliklerinin temel nedenlerini tahmin eden yeni bir denetim de yer alıyor. Bu denetim, yalnızca düzen kaymalarından etkilenen öğeleri listeleyen düzen-kaydırma-öğeleri denetiminin yerini almıştır.

Düzen kaymalarının temel nedenlerini tahmin eden yeni bir denetim.

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.

Erişilebilirlik

Bu sürüm aşağıdaki erişilebilirlik iyileştirmelerine sahiptir:

  • Ekran okuyucular artık şunları duyuracak:
    • Kaydedici panelinde seçici türlerinin yanında bulunan Daha fazla bilgi bağlantı metni.
    • Ayarlarda Ayarlar > Denemeler.
    • Ayarlar'daki Ayarlar bölümünde bir kısayolu kaldırırken, onaylarken veya geri yüklerken işlem onayı > Kısayollar.
  • Ayarlar Ayarlar bölümündeki tablo > Konumlar artık erişilebilirlik araçları için doğru şekilde tablo olarak oluşturuluyor.

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

Çeşitli öne çıkan anlar

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

  • Geliştirici Araçları'ndaki yazı tipleri Chrome'la eşleşecek şekilde güncellenir (1523538).
  • Performans: Fareyle zaman çizelgesinin üzerine gelindiğinde görünen ekran görüntüsü düzeltildi (1519469).
  • Kaynaklar: Kodların daha iyi okunabilmesi için Editor'daki 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ı 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.