Ringkasan DevTools - Penyusunan Ulang Tab, Console pada 2, dan Pemroses Peristiwa Framework

Paul Bakaus
Paul Bakaus

Urutkan ulang tab DevTools sesuai keinginan Anda; lihat dengan tepat di mana peristiwa framework terikat dan blokir permintaan jaringan untuk melihat skrip pihak ketiga mana yang memperlambat Anda.

Navigasi panel yang lebih baik: konsol di #2, penyusunan ulang tab, dan garis bawah yang bagus

Setelah menyelidiki area DevTools mana yang paling sering digunakan, menjadi jelas bahwa panel Console layar penuh tidak layak berada di posisi terakhir di bilah tab utama. Sebagai panel yang paling sering digunakan kedua, panel ini kini menjadi tab kedua. Hal ini terutama penting untuk resolusi yang lebih rendah saat kami tidak dapat menampilkan semua tab sekaligus.

Tapi lihat, kita paham. Urutan klasik adalah bagian dari memori otot dan Anda akan merasa pusing untuk sementara waktu. Atau mungkin, terengah-engah, Anda tidak suka konsol layar penuh! Jangan khawatir, kami siap membantu Anda. Tab sekarang dapat diurutkan ulang dengan menariknya, seperti:

Perubahan yang Anda buat pada panel tab akan tetap ada, dan berfungsi dengan tab native maupun tab yang disediakan ekstensi. Dan sebagai bonus, kami telah memberikan garis bawah animasi yang halus. Karena kami bersikap baik seperti itu.

Dukungan untuk pemroses peristiwa framework

Peristiwa yang dibuat oleh JS Framework seperti jQuery terkadang menjadi masalah saat bekerja dengan DevTools. Itu karena sebagian besar framework menggabungkan peristiwa DOM asli ke dalam API peristiwa kustomnya, sehingga melihat pemroses peristiwa tidak mengungkapkan banyak hal tentang apa yang terjadi:

Pemroses Framework Nonaktif

Namun, dengan opsi baru “Framework Listeners” di tab Event Listener, DevTools mengetahui bagian pembungkusan kerangka kerja dan otomatis mengatasinya. Sekarang, peristiwa yang dibatasi oleh framework terlihat dan berperilaku sama persis seperti instance aslinya, yang memberi tahu Anda di mana framework tersebut sebenarnya terikat:

Pemroses Framework Aktif

Terbaik dari yang lain

  • Formatter Objek Kustom memungkinkan bahasa yang ditranspilasi seperti CoffeeScript untuk memformat objek mereka dengan lebih baik di Konsol DevTools.
  • Linimasa memiliki dialog baru yang terlihat lebih baik selama perekaman yang menunjukkan sekilas status, waktu, dan penggunaan buffer.

    Petunjuk Linimasa.
  • Pada baris yang sama, Panel Jaringan menampilkan petunjuk yang berguna saat sekarang kosong:

    Petunjuk Jaringan.
  • Anda kini dapat memfilter konten campuran di Panel Jaringan menggunakan input filter dan menyetelnya ke mixed-content:displayed


Seperti biasa, beri tahu kami pendapat Anda melalui Twitter atau komentar di bawah, dan kirimkan bug ke crbug.com/new.

Sampai bulan depan Paul Bakaus & tim DevTools