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

Paul Bakaus
Paul Bakaus

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

Gambaran sekilas masa depan penyusunan

Kami baru saja kembali dari Chrome Dev Summit, di mana saya akan menunjukkan kepada Anda bagaimana bekerja dengan DevTools saat ini dan di masa mendatang. Saya biasanya tidak menyebutkan fitur yang masih merupakan eksperimen atau progres berat dalam ringkasan ini, tetapi kali ini saya membuat pengecualian. Jika Anda tidak memiliki waktu untuk menonton seluruh khotbah, berikut intinya:

Mode Perangkat versi 2

Kami masih mengerjakan iterasi baru Mode Perangkat yang baru dan berani ini, tetapi ingin memberikan kesempatan kepada semua orang untuk mencobanya, jadi kami telah mengaktifkannya di Canary sekarang. Dengan perubahan ini, kami mendorong DevTools ke masa depan yang berorientasi seluler di mana pengembangan seluler adalah default, dan pengembangan Desktop adalah "add-on". Nantikan lebih banyak iterasi selama beberapa minggu ke depan dengan postingan blog tambahan setelah kami selesai.

Pemeriksaan animasi yang canggih

Pemeriksaan Animasi yang sedang dikerjakan memberi Anda gambaran lengkap dan mendetail tentang apa yang terjadi pada objek yang bergerak. Alih-alih menunjukkan transisi pada satu elemen pada satu waktu, kami menambahkan heuristik yang mengelompokkan animasi kompleks sehingga Anda dapat fokus pada semua yang Anda lihat. Lihat videonya. Kami akan menawarkan postingan blog mandiri yang lebih besar saat peluncuran penuh.

Mode Tata Letak (cuplikan)

Belum cukup siap untuk diluncurkan, tetapi yang sangat menjanjikan adalah Mode Tata Letak baru, fitur yang tidak sabar untuk dilihat sepenuhnya. Mode Tata Letak menambahkan kemampuan pengeditan WYSIWYG ke DevTools untuk setiap elemen di halaman. Sejauh ini, tinggi, lebar, padding, dan margin dapat diedit sesuai konteks. Perlu waktu sedikit lebih lama hingga kami siap mengizinkan Anda untuk mencoba, tetapi kami akan terus mengabari Anda.

Pembuatan profil performa dengan panel Linimasa yang diperbarui

Sebagai bagian dari dorongan yang lebih besar dalam memperkenalkan model performa RAIL yang baru, terdapat ratusan perubahan yang lebih kecil dan lebih besar pada panel Linimasa, dan secara bersamaan mengubah dan meningkatkan cerita pembuatan profil performa sedikit. Jadi, alih-alih menampilkan setiap perubahan secara terpisah, Paul Irish menunjukkan kepada kita cara men-debug performa situs dengan benar, dalam hal ini situs seluler Hotel Tonight, yang berada di atas panggung. Beberapa fitur yang baru diumumkan adalah strip film pemuatan dan performa, Waterfall jaringan yang disertakan, ringkasan hierarki, dan kemampuan untuk melihat biaya performa menurut domain & file.

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

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

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

Terbaik dari yang lain

  • Kami telah menyia-nyiakan banyak properti sebelumnya di panel Gaya dengan menampilkan jenis media umum. Kami sekarang menyembunyikan hal tersebut kepada pemilih Anda jika hal tersebut dianggap tidak wajar.
  • Anda sekarang dapat mengarahkan kursor ke atas pemilih CSS lama di panel Gaya untuk melihat berapa banyak elemen di halaman yang menerapkannya.
  • Masih belum menyerah untuk mencetak? Emulasi media cetak masih ada untuk melihat seperti apa tampilan halaman Anda saat dicetak – kami baru saja memindahkannya ke Setelan Rendering.
  • Saat memilih elemen yang akan diperiksa, kita sekarang memperluas dan menutup sub-hierarki DOM yang relevan secara otomatis. Sulit dijelaskan, melihat berarti 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