DevTools Digest (Edisi CDS): Sekilas tentang Masa Depan dan Profiling RAIL

Pelajari bagaimana DevTools mengedepankan perangkat seluler dengan Mode Perangkat baru yang disederhanakan yang selalu aktif. Gunakan tombol warna untuk menambahkan warna dengan cepat ke pemilih Anda dan mengetahui apa yang akan segera hadir di DevTools.

Sekilas tentang masa depan penulis

Kami baru saja kembali dari Chrome Dev Summit di mana saya menunjukkan bagaimana bekerja dengan DevTools saat ini dan di masa mendatang. Biasanya kami tidak akan menyebutkan fitur apa pun yang masih berupa eksperimen atau progres yang berat dalam ringkasan ini, tetapi kali ini kami membuat pengecualian. Jika Anda tidak punya waktu untuk menonton keseluruhan presentasi, berikut intinya:

Mode Perangkat versi 2

Kami masih mengerjakan iterasi Device Mode baru yang berani ini, tapi kami ingin memberikan kesempatan kepada semua orang untuk mencobanya, jadi kami telah mengaktifkannya di Canary Anda hari ini. Dengan perubahan ini, kami mendorong DevTools untuk beralih ke masa depan mobile-first dengan pengembangan seluler sebagai default, dan pengembangan Desktop sebagai "add-on". Nantikan lebih banyak iterasi selama beberapa minggu ke depan dengan postingan blog yang diperpanjang setelah kami selesai.

Pemeriksaan animasi yang canggih

Pemeriksaan Animasi yang sedang berlangsung memberi Anda gambaran lengkap dan mendetail tentang apa yang terjadi pada segala sesuatu yang bergerak. Alih-alih menampilkan transisi pada satu elemen pada satu waktu, kami menambahkan heuristik yang mengelompokkan animasi kompleks sehingga Anda dapat fokus pada semua yang Anda lihat. Lihat video. Kami akan menyediakan postingan blog mandiri yang lebih besar saat aplikasi ini telah diluncurkan sepenuhnya.

Mode Tata Letak (pratinjau)

Belum cukup siap untuk peluncuran, tetapi sangat menjanjikan adalah Mode Tata Letak baru, sebuah fitur yang saya tidak sabar ingin melihatnya sepenuhnya. Mode Tata Letak menambahkan kemampuan pengeditan WYSIWYG ke DevTools untuk elemen apa pun di halaman. Sejauh ini, tinggi, lebar, padding, dan margin dapat diedit dalam konteks. Perlu waktu sedikit lebih lama sampai kami siap memberi Anda kesempatan untuk mencoba, tetapi kami akan terus mengabari Anda.

Pembuatan profil performa dengan panel Linimasa yang diperbarui

Sebagai bagian dari dorongan besar dalam memperkenalkan model performa RAIL baru, telah ada ratusan perubahan yang lebih kecil dan lebih besar pada panel Linimasa, dan bersama-sama perubahan tersebut mengubah dan meningkatkan sedikit cerita pembuatan profil performa. Jadi, alih-alih menampilkan setiap perubahan secara terpisah, Paul Irish kami sendiri menunjukkan kepada kami cara men-debug performa sebuah situs dengan benar, dalam hal ini situs seluler Hotel Tonight, live di atas panggung. Fitur yang baru diumumkan antara lain strip film beban dan performa, Waterfall jaringan yang disertakan, ringkasan tampilan hierarki, dan kemampuan untuk melihat biaya performa menurut domain & file.

Menambahkan warna latar depan dan latar belakang ke elemen apa pun dengan mudah

Setiap kali Anda ingin menambahkan properti warna latar belakang atau warna ke elemen, Anda tidak bisa hanya membuka pemilih warna. Sebaliknya, sebagian besar dari Anda mengetik sesuatu seperti “background: red;” setiap kali ikon pemilih warna muncul, lalu pilih warna sebenarnya yang Anda inginkan.

Sepertinya kami bisa menyederhanakannya. Kami menambahkan dua tombol bagus yang muncul saat mengarahkan kursor ke sudut kanan bawah pemilih, yang memungkinkan Anda menambahkan warna dan memunculkan pemilih dengan sekali klik:

Terbaik dari lainnya

  • Kami telah menyia-nyiakan banyak properti sebelumnya di panel Gaya dengan menampilkan jenis media umum. Kami sekarang menyembunyikan hal tersebut sebelum pemilih Anda jika wajar.
  • Anda kini dapat mengarahkan kursor ke atas pemilih CSS di panel Gaya untuk melihat jumlah elemen pada halaman yang diterapkan.
  • Belum menyerah untuk mencetak? Emulasi media cetak masih ada untuk melihat tampilan halaman Anda saat dicetak – kami baru saja memindahkannya ke Setelan Rendering.
  • Saat memilih elemen yang akan diperiksa, kita kini akan otomatis memperluas dan menutup sub hierarki DOM yang relevan. Sulit dijelaskan, melihat adalah rasa percaya.

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