Pelajari cara DevTools beralih ke mobile-first dengan Mode Perangkat baru yang disederhanakan dan selalu aktif. Gunakan tombol warna untuk menambahkan warna ke pemilih dengan cepat dan cari tahu apa yang akan segera hadir di DevTools.
Sekilas tentang masa depan pembuatan konten
Kami baru saja kembali dari Chrome Dev Summit tempat kami menunjukkan tampilan penggunaan DevTools saat ini dan di masa mendatang. Biasanya saya tidak menyebutkan fitur apa pun yang masih merupakan eksperimen atau pekerjaan berat yang sedang dalam progres dalam ringkasan ini, tetapi kali ini saya membuat pengecualian. Jika Anda tidak punya waktu untuk menonton seluruh presentasi, berikut intinya:
Mode Perangkat versi 2
Kami masih berupaya keras untuk membuat iterasi Mode Perangkat yang baru dan berani ini, tetapi ingin memberi semua orang kesempatan untuk mencobanya, jadi kami telah mengaktifkannya di Canary Anda hari ini. Dengan perubahan ini, kami mendorong DevTools ke masa depan mobile-first, dengan pengembangan seluler sebagai default, dan pengembangan Desktop sebagai “add-on”. Nantikan iterasi lainnya selama beberapa minggu ke depan dengan postingan blog yang diperluas setelah kami selesai.
Pemeriksaan animasi yang canggih
Pemeriksaan Animasi yang sedang berlangsung memberi Anda gambaran lengkap dan mendetail tentang apa yang terjadi pada apa pun yang bergerak. Daripada menampilkan transisi pada satu elemen secara bergantian, kami menambahkan heuristik yang mengelompokkan animasi kompleks sehingga Anda dapat berfokus pada semua yang Anda lihat. Lihat videonya. Kami akan menawarkan postingan blog mandiri yang lebih besar saat kami diluncurkan sepenuhnya.
Mode Tata Letak (cuplikan)
Mode Tata Letak baru belum siap untuk digunakan, tetapi sangat menjanjikan. Saya tidak sabar untuk melihat fitur ini sepenuhnya dibuat. 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. Kami akan segera menginformasikan kepada Anda jika sudah siap untuk mencobanya.
Membuat profil performa dengan panel Linimasa yang diperbarui
Sebagai bagian dari upaya yang lebih besar untuk memperkenalkan model performa RAIL baru, ada ratusan perubahan kecil dan besar pada panel Linimasa, dan perubahan tersebut secara keseluruhan mengubah dan meningkatkan kualitas profil performa. Jadi, alih-alih menampilkan setiap perubahan secara terpisah, Paul Irish dari tim kami menunjukkan cara men-debug performa situs dengan benar, dalam hal ini situs seluler Hotel Tonight, secara live di panggung. Di antara fitur yang baru diumumkan adalah strip film pemuatan 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 dengan mudah ke elemen apa pun
Setiap kali ingin menambahkan properti warna atau warna latar belakang ke elemen, Anda tidak dapat langsung membuka pemilih warna. Sebagai gantinya, sebagian besar dari Anda mengetik sesuatu seperti “background: red;” setiap kali sehingga ikon pemilih warna muncul, lalu memilih warna yang sebenarnya Anda inginkan.
Kami pikir kami dapat menyederhanakannya. Kami menambahkan dua tombol praktis yang muncul saat mengarahkan kursor ke sudut kanan bawah pemilih, sehingga Anda dapat menambahkan warna dan menampilkan pemilih dengan sekali klik:
Yang terbaik dari yang lain
- Kita telah menyia-nyiakan banyak ruang sebelumnya di panel Gaya dengan menampilkan jenis media generik. Sekarang kami menyembunyikan hal tersebut sebelum pemilih Anda jika hal tersebut tidak biasa.
- Anda kini dapat mengarahkan kursor lama ke pemilih CSS di panel Gaya untuk melihat jumlah elemen di halaman yang terpengaruh.
- Belum menyerah untuk mencetak? Emulasi media cetak masih ada untuk melihat tampilan halaman Anda saat dicetak. Kami hanya memindahkannya ke Setelan Rendering.
- Saat memilih elemen untuk diperiksa, kita sekarang akan otomatis meluaskan dan menutup sub-hierarki DOM yang relevan. Sulit dijelaskan, melihat adalah 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