Geliştirici Araçları Özeti - Sekme Yeniden Sıralama, 2. Konsol ve Çerçeve Etkinlik İşleyicileri

Paul Bakaus
Paul Bakaus

DevTools sekmelerini size en uygun şekilde yeniden sıralayın; çerçeve etkinliklerinin tam olarak nereye bağlandığını görün ve hangi üçüncü taraf komut dosyalarının sizi yavaşlattığını görmek için ağ isteklerini engelleyin.

Daha iyi panel gezinmesi: 2 numaralı konsolda konsol, sekmeleri yeniden sıralama ve şık alt çizgiler

DevTools'un en çok hangi alanlarının kullanıldığını inceledikten sonra, tam ekran Console panelinin ana sekme çubuğundaki son konumu hak etmediği anlaşıldı. En çok kullanılan ikinci panel olarak artık ikinci sekme oldu. Bu durum, özellikle tüm sekmeleri aynı anda gösteremediğimiz düşük çözünürlüklerde önemlidir.

Ancak bunu anlayabiliyoruz. Klasik düzen kas hafızanızın bir parçası olduğu için bir süre başınız dönecek. Ya da tam ekran konsoldan nefret ediyorsunuzdur. Endişelenmeyin, size yardımcı olacağız. Sekmeler artık sürükleyerek yeniden sıralanabilir. Örneğin:

Sekme çubuğunda yaptığınız değişiklikler kalıcı olur ve hem yerel sekmeler hem de uzantı tarafından sağlanan sekmelerle çalışır. Ayrıca, ek olarak akıcı ve animasyonlu alt çizgiler de ekledik. Çünkü biz böyleyiz.

Çerçeve etkinlik işleyicileri desteği

jQuery gibi JS çerçeveleri tarafından oluşturulan etkinlikler, bazen Geliştirici Araçları ile çalışırken sorun oluşturuyordu. Bunun nedeni, çoğu çerçevenin yerel DOM etkinliklerini özel etkinlik API'lerine sarmalaması ve bu nedenle etkinlik dinleyicisine bakmanın neler olduğu hakkında çok fazla bilgi vermemesidir:

Çerçeve Dinleyicileri Kapalı

Ancak Etkinlik İşleyici sekmesindeki yeni "Çerçeve İşleyicileri" seçeneği sayesinde Geliştirici Araçları, çerçeve sarmalama bölümünden haberdar olur ve bunu otomatik olarak çözer. Artık çerçevelere bağlı etkinlikler, yerel muadillerine tam olarak benzeyip aynı şekilde davranarak aslında nerede bağlandığını size bildirir:

Çerçeve İşleyicileri Açık

En iyiler

  • Özel Nesne Düzenleyiciler, CoffeeScript gibi derlenmiş dillerin DevTools Konsolu'nda nesnelerini daha iyi biçimlendirmesine olanak tanır.
  • Zaman çizelgesinde, kayıt sırasında durumu, zamanı ve arabelleğe alma kullanımını bir bakışta gösteren yeni ve daha iyi görünümlü bir iletişim kutusu yer alır.

    Zaman çizelgesi ipucu.
  • Aynı şekilde, Ağ Paneli şu anda boş olduğunda faydalı bir ipucu gösterir:

    Ağ İpucu.
  • Artık filtre girişini kullanarak ağ panelinde karma içerikleri filtreleyebilir ve mixed-content:displayed olarak ayarlayabilirsiniz.


Her zaman olduğu gibi, Twitter üzerinden veya aşağıdaki yorumlar bölümünden düşüncelerinizi bizimle paylaşın ve crbug.com/new adresinden hataları bildirin.

Gelecek ay görüşmek üzere! Paul Bakaus ve DevTools ekibi