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

Pelajari cara DevTools membuat Anda mengetik lebih sedikit dengan pelengkapan otomatis Konsol yang lebih cerdas, cara mengedit aturan @keyframe langsung di panel Gaya, cara bersenang-senang dengan Variabel Kustom CSS, dan cara bergabung dengan sisi gelap.

Pelengkapan otomatis yang lebih cerdas di konsol

Jika Anda seperti saya dan banyak orang lainnya, Anda mengetik perintah ke konsol untuk men-debug aplikasi, melihatnya tidak berfungsi, melakukan iterasi, dan mengetik lagi, lagi, dan lagi. Untuk membantu Anda, kini kami melengkapi otomatis pernyataan lengkap yang Anda ketik sebelumnya, seperti ini:

Pelengkapan Otomatis

Mengedit aturan @keyframe secara langsung di panel Gaya

Saat kami memperkenalkan pemeriksa animasi dan editor easing ke DevTools, keduanya terbatas pada transisi karena kami tidak pernah menampilkan animasi CSS berbasis @keyframe di panel Gaya. Dengan senang hati kami sampaikan bahwa hal tersebut kini sudah tidak berlaku lagi, jadi jangan ragu untuk berkreasi. Lihat tweet video kami untuk melihat pratinjaunya.

Dukungan properti CSS kustom

Properti CSS kustom di DevTools

Ada banyak hal menarik yang akan hadir di CSS, dan salah satunya adalah variabel kustom, yang diluncurkan di Chrome 49. Kami memastikan untuk menyertakan dukungan penuh di DevTools, jadi jika Anda pernah menggunakan variabel di Sass sebelumnya, coba variabel native, karena variabel ini memungkinkan Anda mengedit properti dengan cepat di panel Gaya dan langsung memperbarui elemen dependen.

Tema gelap untuk DevTools

Cara kerja Tema Gelap

Kami akhirnya mengabulkan permintaan yang telah kami dengar puluhan kali selama beberapa tahun terakhir: Anda kini dapat memilih tema gelap di DevTools. Buka setelan DevTools, Setel tema ke gelap, dan nikmati. Kami dapat mengatakan bahwa fitur ini masih dalam versi beta karena sebagian besar dibuat secara otomatis. Jadi, jika Anda melihat area yang dapat ditingkatkan, beri tahu kami.

Yang terbaik dari yang lain

  • Panel samping konsol kini otomatis diciutkan saat Anda mengklik tab Konsol lengkap.
  • Hierarki file di Sumber mendapatkan perombakan yang bagus dengan ikon baru dan fungsi pengelompokan baru

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

Sampai bulan depan!
Paul Bakaus & tim DevTools