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ğ panelindeki dağınıklığı azaltmanıza olanak tanıyacak şekilde yeniden tasarlandı.

İlgili deneme bu sürümde varsayılan olarak etkinleştirildi 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 için, diğeri ise verileri ve uzantı URL'lerini gizlemek veya yalnızca engellenen çerezleri, istekleri ve üçüncü taraf isteklerini göstermek için. Her iki menü de çoklu seçimi destekler.

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ğunun basitleştirilmesinden önceki ve sonraki durum.

Bu özellikle ilgili geri bildiriminizi crbug.com/1500573 adresinde paylaşabilirsiniz.

Chromium sorunu: 1486431.

Öğe iyileştirmeleri

@font-palette-values desteği

Öğeler paneli artık @font-palette-values CSS at-kuralını destekliyor. font-palette mülkünün varsayılan değerlerini özelleştirmenize olanak tanır.

Stiller bölümünde font-palette mülkünün değerini tıklayın. 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 durum: Başka bir özel mülkün yedeği olarak özel mülk

Öğeler > Stiller artık başka bir özel mülkün yedeği olan özel bir mülkü çözer.

Başka bir özel mülkün yedeği olarak özel bir mülkün çözülmesinden önceki ve sonraki durum.

Chromium sorunu: 1499265.

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

Ayarlar > Deneyler > Kaynak haritalarını kullanarak ifadelerdeki değişken adlarını çöz seçeneği varsayılan olarak etkindir.

Geliştirici Araçları, orijinal kodunuzu birleştirdikten, küçülttükten veya derledikten sonra bile Kaynaklar ve Kapsam'da 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ı DevTools'ta tutarlı bir şekilde değerlendirmenizi sağlar:

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

Chromium sorunu: 1444349.

Performans paneli iyileştirmeleri

Gelişmiş Etkileşimler kanalı

Performans > Etkileşimler kanalında, işlem süresi sınırlarında giriş ve sunum gecikmelerini gösteren antenler bulunur.

Etkileşimler kanalına anten eklemeden önceki ve sonraki durum.

Ayrıca, fareyle bir etkileşimin üzerine geldiğinizde zamanlamaları ayrıntılı olarak gösteren faydalı bir ipucu görebilirsiniz.

Chromium sorunu: 1495751.

Aşağıdan Yukarı, Çağrı Ağacı ve Olay Günlüğü sekmelerinde gelişmiş filtreleme

Performans panelindeki Aşağıdan Yukarı, Ç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 yalnızca üst düzey öğeler Aşağıdan Yukarı sekmesindeki filtreyle eşleşiyor. Önceden filtre her düğümle eşleşiyordu.

Chromium sorunu: 1496355.

Kaynaklar panelindeki girinti işaretçileri

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

Önce ve sonra işaretleme, girintili kod bloklarını dikey çizgilerle gösterir.

Chromium sorunu: 1479986.

Ağ panelinde geçersiz kılınan üstbilgiler ve içerikler için faydalı ipuçları

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

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

Chromium sorunu: 1469776.

İstek engelleme kalıplarını eklemek ve kaldırmak 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 komutlar yazabilirsiniz.

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

Ekle komutu sizi kalıbı belirteceğiniz 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ılır.

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)'na gidin.

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

Ayrıca Sorunlar paneli CSP ihlallerini de bildirir.

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

Lighthouse 11.3.0

Lighthouse panelinde artık Lighthouse 11.3.0 sürümü kullanılıyor. Değişikliklerin tam listesini inceleyin. 404 sayfaları hakkında rapor oluşturma özelliği, dikkate değer değişiklikler arasındadır.

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:

  • Ağ > Yük bölümünde artık kaynağı göster ve URL'ye kodlanmış içeriği göster düğmelerine sekme tuşuyla odaklanabilir ve ilgili işlemi tetiklemek için Enter veya Boşluk tuşuna basabilirsiniz.
  • Konsol'da, karışıklığı azaltmak için artık Hata Ayıklama Aracı tarafından kullanılamayan komut dosyalarına yönlendiren bağlantılar devre dışı bırakıldı ve tıklanamıyor.
  • Kaynaklar > Sayfa bölümündeki 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 öne çıkan özellikler

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

  • Performans. Bir kayıt başarısız olursa artık Ham izleme etkinliklerini indirme ve neyin yanlış gittiğini bulmaya çalışma (commit) seçeneğiniz var.
  • Konsol'u 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 kapatıyor.
  • Geliştirici Kaynakları'nı tıklayın. CSS kaynaklarını ve sorunlarını bildirmeyi engelleyen bir hata düzeltildi (1420362).
  • Öğeler:
    • Iframe'lerdeki öğeleri incelemeyle ilgili bir hata düzeltildi (1453375).
    • Hesaplanmış. Varsayılan değerlerin oluşturulmasını engelleyen bir hata düzeltildi (1499882).
    • Arama'yı tıklayın. Bir veya iki karakterden oluşan kısa sorgular için eşleşme sayısının hesaplanmasını engelleyen bir hata düzeltildi (1416457).
  • Konsol. Artık Filtre kutusunda kaçan karakterle biten normal ifadeler doğru şekilde ayrıştırılıyor (1346936).
  • Ayarlar > Workspace'e gidin. Hariç tutulan klasör eklenmesini engelleyen bir hata düzeltildi (1503580).
  • Ağ > Önizleme'yi tıklayın. Artık data: URI'leri (1381791) içeren resimleri oluşturur.
  • Bellek. İşlem çubuğuna uygun ve düğmeleri eklendi (1275407).

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