DevTools menjadi gelap, pengeditan @keyframe dan pelengkapan otomatis yang lebih cerdas

Paul Bakaus
Paul Bakaus

Pelajari bagaimana DevTools membuat Anda lebih jarang mengetik dengan fitur pelengkapan otomatis Console yang lebih cerdas, cara mengedit aturan @keyframe secara langsung di panel Styles, cara bersenang-senang dengan Variabel Kustom CSS, dan cara bergabung dengan sisi gelap.

Pelengkapan otomatis yang lebih canggih di konsol Anda

Jika Anda seperti saya dan banyak orang lainnya, ketik perintah ke konsol untuk men-debug aplikasi Anda, melihatnya tidak berfungsi, lakukan iterasi dan ketik lagi, dan lagi, dan lagi. Untuk membantu hal itu, kami sekarang otomatis melengkapi pernyataan lengkap yang Anda ketik sebelumnya, seperti berikut:

Pelengkapan Otomatis

Mengedit aturan @keyframe secara langsung di panel Styles

Saat kita memperkenalkan pemeriksa animasi dan editor easing ke DevTools, ini terbatas pada transisi karena kita tidak pernah menampilkan animasi CSS berbasis @keyframe di panel Style. Dengan senang hati saya sampaikan bahwa hal tersebut sudah tidak ada lagi di masa lalu, jadi berkreasilah. Lihat tweet video kami untuk pratinjau.

Dukungan properti CSS kustom

Properti CSS kustom di DevTools

Ada banyak manfaat yang akan hadir di CSS, dan salah satunya adalah variabel khusus, yang diluncurkan di Chrome 49. Kami memastikan untuk menyertakan dukungan penuh di DevTools, jadi jika Anda pernah menggunakan variabel di Sass sebelumnya, cobalah variabel asli, karena variabel tersebut memungkinkan Anda mengedit properti dengan cepat di panel Styles dan segera memperbarui elemen dependen.

Tema gelap untuk DevTools

Cara kerja Tema Gelap

Kami akhirnya menyerah pada permintaan yang telah kami dengar puluhan kali selama beberapa tahun terakhir: Anda sekarang bisa memilih sisi gelap di DevTools. Masuk ke pengaturan DevTools, Atur tema ke gelap dan nikmati. Fitur ini masih dalam versi beta karena banyak yang dibuat secara otomatis. Jadi, jika Anda melihat ada area yang dapat ditingkatkan, beri tahu kami.

Terbaik dari yang lain

  • Panel samping konsol sekarang diciutkan secara otomatis saat Anda mengklik tab Console lengkap.
  • Hierarki file di Sources telah dirombak bagus dengan ikon baru dan fungsi pengelompokan baru

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