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

Sofia Emelianova
Sofia Emelianova
GitHub

Ağ panelinde basitleştirilmiş filtre çubuğu

Filtre çubuğu, istekleri daha kolay filtrelemenize ve Ağ panelini düzenlemenize olanak tanıyacak şekilde yeniden tasarlandı.

İlgili deneme bu sürümde varsayılan olarak etkinleştirilmişti ancak geri alınacak. İlerleme durumunu crbug.com/1523150 adresinden takip edebilirsiniz.

Yeni filtre çubuğunda iki açılır menü bulunur: biri istek türlerini seçmek, diğeri ise verileri ve uzantı URL'lerini gizlemek veya yalnızca engellenen çerezleri ve istekleri ile üçüncü taraf isteklerini göstermek için kullanılır. Her iki menüde de çoklu seçim desteklenir.

Eski filtre çubuğunu hemen geri getirmek için Ayarlar > Denemeler > Ağ panelindeki filtre çubuğunun yeniden tasarımı'nı kapatın.

Ağ panelindeki filtre çubuğu basitleştirilmeden önce ve basitleştirildikten sonraki görünümü.

Bu özellikle ilgili geri bildiriminizi crbug.com/1500573 adresinden gönderebilirsiniz.

Chromium sorunu: 1486431.

Öğe iyileştirmeleri

@font-palette-values desteği

Öğeler paneli artık @font-palette-values CSS at-rule'u destekliyor. font-palette özelliğinin varsayılan değerlerini özelleştirmenize olanak tanır.

Stiller'de font-palette özelliğinin değerini tıkladığınızda DevTools sizi özel değerlerinizi düzenleyebileceğiniz @font-palette-values özel bölümüne yönlendirir.

Stiller'deki @font-palette-values bölümü.

Chromium sorunu: 1501781.

Desteklenen kullanım alanı: Başka bir özel özelliğin yedek özelliği olarak özel özellik

Öğeler > Stiller artık başka bir özel özelliğin yedek özelliği olan özel bir özelliği çözümlüyor.

Özel bir özellik, başka bir özel özelliğin yedek özelliği olarak çözümlenmeden önce ve sonra.

Chromium sorunu: 1499265.

İyileştirilmiş kaynak eşlemesi desteği

Ayarlar > Denemeler > Kaynak haritalarını kullanarak ifadelerdeki değişken adlarını çöz ayarı varsayılan olarak etkinleştirildi.

Geliştirici Araçları, birleştirme, küçültme veya derleme işlemlerinden sonra bile Kaynaklar ve Kapsam'da orijinal kodunuzda hata ayıklamanıza olanak tanımak için kaynak eşlemelerini kullanır. Bu deneme, aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere orijinal değişken adlarınızı Geliştirici Araçları'nda tutarlı bir şekilde değerlendirmenize olanak tanır:

Daha fazla bilgi için ilgili RFC'ye bakın.

Chromium sorunu: 1444349.

Performans paneli iyileştirmeleri

Gelişmiş Etkileşimler parçası

Performans > Etkileşimler izinde, işleme süresi sınırlarında giriş ve sunum gecikmelerini gösteren bıyıklar bulunur.

Etkileşimler parçasına hata çubuğu eklemeden önceki ve ekledikten sonraki görünüm.

Ayrıca, bir etkileşimin üzerine geldiğinizde zamanlamalarla ilgili ayrıntılı ve faydalı bir ipucu görebilirsiniz.

Chromium sorunu: 1495751.

Aşağıdan yukarıya, çağrı ağacı ve etkinlik günlüğü sekmelerinde gelişmiş filtreleme

Performans panelindeki Aşağıdan Yukarıya, Çağrı Ağacı ve Etkinlik Günlüğü sekmelerine gelişmiş filtreleme için üç yeni düğme eklendi:

  • Büyük/küçük harf eşleştir.
  • Normal ifade.
  • Tüm kelimeyi eşleştir.

Gelişmiş filtreleme için üç yeni düğme.

Ayrıca, bağlamı korumanıza yardımcı olmak için artık Aşağıdan Yukarıya sekmesinde yalnızca üst düzey öğeler filtreyle eşleşiyor. Daha önce filtre her düğümle eşleşiyordu.

Chromium sorunu: 1496355.

Kaynaklar panelindeki girinti işaretleri

Kaynaklar panelindeki Düzenleyici, girintili kod bloklarını artık size kolaylık sağlaması için dikey çizgilerle işaretliyor.

Dikey çizgilerle girintili kod bloklarını işaretlemeden önce ve sonra

Chromium sorunu: 1479986.

Ağ panelinde geçersiz kılınan başlıklar ve içerik için faydalı ipuçları

Ağ paneli artık bir isteğin Başlıklar ve Yanıt sekmelerinin yanındaki mor nokta simgesinin üzerine geldiğinizde ipuçlarını gösteriyor. İpuçları, Geliştirici Araçları tarafından neyin geçersiz kılındığını gösterir.

Başlıklar ve Yanıtlar sekmelerindeki mor nokta simgesinin yanındaki yeni ipuçları.

Chromium sorunu: 1469776.

İstek engelleme kalıpları ekleme ve kaldırma için yeni komut menüsü seçenekleri

Artık Komut Menüsü'ne ağ isteği engelleme kalıpları eklemek veya kaldırmak için komut yazabilirsiniz.

Ağ engelleme kalıpları eklemek veya kaldırmak için yeni komutlar eklemeden ve ekledikten sonraki durum.

Ekle komutu, kalıbı belirtmek için iletişim kutusuna yönlendirir. Kaldır komutu ise Ağ isteği engelleme panelini açmadan tüm kalıpları kaldırır.

CSP ihlalleri denemesi kaldırıldı

89 sürümünde kullanıma sunulan deneysel CSP ihlalleri sekmesi, gereksiz olduğu için kaldırıldı.

CSP ayrıntılarını bir bakışta görmek için Uygulama > Çerçeveler > İçerik Güvenliği Politikası (CSP)'ne gidin.

Uygulama panelindeki İçerik Güvenliği Politikası.

Ayrıca, Sorunlar panelinde CSP ihlalleri bildirilir.

Uygulama panelindeki İçerik Güvenliği Politikası.

Lighthouse 11.3.0

Lighthouse paneli artık Lighthouse 11.3.0'ı çalıştırıyor. Değişikliklerin tam listesini inceleyin. Önemli değişikliklerden biri, 404 sayfalarıyla ilgili rapor çalıştırma özelliğidir.

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ı:

  • Ağ > Yük bölümünde artık kaynağı görüntüle ve URL kodlu görüntüle düğmelerine sekme ile odaklanabilir ve ilgili işlemi tetiklemek için Enter veya Boşluk tuşuna basabilirsiniz.
  • Console'da, kafa karışıklığını azaltmak için artık Debugger'da kullanılamayan komut dosyalarına yönlendiren bağlantılar gri renkte gösteriliyor ve tıklanamıyor.
  • Kaynaklar > Sayfa'daki ağaç gibi gezinme ağaçlarında, Enter tuşu artık alt öğeleri olan düğümleri genişletip daraltıyor.

Chromium sorunları: 1338391, 1500662, 1420362.

Diğer önemli noktalar

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

  • Performans. Kayıt başarısız olursa artık Ham izleme etkinliklerini indirebilir ve neyin yanlış gittiğini anlamaya çalışabilirsiniz (commit).
  • Konsolu Göster kısayolu (Mac için Ctrl+`, Windows ve Linux için Ctrl++) artık yalnızca Konsol'u açmakla kalmıyor, ikinci kez basıldığında da kapatıyor.
  • Geliştirici Kaynakları CSS kaynaklarının ve bunlarla ilgili sorunların bildirilmesini engelleyen hata düzeltildi (1420362).
  • Öğeler:
    • Iframe'lerdeki öğeleri incelemeyle ilgili bir hata düzeltildi (1453375).
    • Hesaplanmış. Varsayılan değerlerin oluşturulmasını engelleyen hata düzeltildi (1499882).
    • Arama Bir veya iki karakterlik kısa sorgularda eşleşme sayısının hesaplanmasını engelleyen hata düzeltildi (1416457).
  • Console. Artık Filtre kutusunda kaçış karakteriyle biten normal ifadeler doğru şekilde ayrıştırılıyor (1346936).
  • Ayarlar > Workspace. Hariç tutulan bir klasörün eklenmesini engelleyen hata düzeltildi (1503580).
  • Ağ > Önizleme Artık data: URI'leriyle resimler oluşturuluyor (1381791).
  • Bellek İşlem çubuğuna uygun yükleme ve kaydetme düğmeleri eklendi (1275407).

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