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

Pelajari bagaimana DevTools mengurangi mengetik dengan pelengkapan otomatis Konsol yang lebih cerdas, cara mengedit aturan @keyframe langsung di panel Styles, cara bersenang-senang dengan Variabel Khusus CSS, dan cara menggabungkan sisi gelap.

Pelengkapan otomatis yang lebih cerdas di konsol Anda

Jika Anda seperti saya dan banyak lainnya, Anda mengetik perintah ke konsol untuk men-debug aplikasi Anda, melihat bahwa aplikasi tidak berfungsi, mengulangi dan mengetiknya lagi, dan lagi, dan lagi. Untuk membantu hal tersebut, sekarang kami melengkapi pernyataan lengkap yang Anda ketik sebelumnya secara otomatis, seperti berikut:

Pelengkapan Otomatis

Edit aturan @keyframe secara langsung di panel Styles

Saat kami memperkenalkan pemeriksa animasi dan easing editor ke DevTools, fungsi ini terbatas pada transisi karena kami tidak pernah menampilkan animasi CSS berbasis @keyframe di panel Style. Dengan senang hati saya sampaikan bahwa sekarang sudah tidak ada lagi, jadi silakan lakukan semuanya. Lihat tweet video kami untuk melihat pratinjau.

Dukungan properti CSS kustom

Properti CSS kustom di DevTools

Ada banyak manfaat 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 telah menggunakan variabel di Sass sebelumnya, cobalah variabel native, karena variabel 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 berkali-kali selama beberapa tahun terakhir: Anda kini bisa memilih sisi gelap di DevTools. Masuk ke pengaturan DevTools, Setel tema ke gelap dan nikmati. Menurut saya, fitur ini masih dalam versi beta karena banyak fitur yang dibuat secara otomatis. Jadi, jika Anda melihat ada area yang perlu ditingkatkan, beri tahu kami.

Terbaik dari lainnya

  • Panel samping konsol kini diciutkan secara otomatis saat Anda mengklik tab Console penuh.
  • Pohon file di Sources mendapat perbaikan besar 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