Ringkasan DevTools - Pengeditan elemen yang efisien, proses debug pekerja layanan, dan nuansa desain material

Gunakan menu konteks baru pada panel DOM untuk mengedit node secara efisien. Men-debug pekerja layanan secara langsung melalui panel Resources. Pilih dari semua nuansa Desain Material di pemilih warna. Library JS Blackbox dengan lebih mudah.

Menu konteks baru yang ditingkatkan pada panel DOM

Menu konteks DOM baru.

Kami telah menganalisis tindakan yang paling sering digunakan di panel DOM dan menyimpulkan bahwa menu konteks klik kanan harus lebih rapi dan diatur ulang.

Sekarang jauh lebih mudah untuk menyembunyikan atau menghapus elemen, memicu status tertentu seperti :active atau :hover, atau mengedit HTML-nya. Selain itu, jika Anda menggunakan trackpad dan tidak ingin repot mengklik kanan, klik tiga titik kecil di samping elemen yang dipilih.

Men-debug pekerja layanan melalui panel Resources

Pekerja layanan sangat baik setelah Anda menyiapkannya, tetapi mereka bisa jadi sulit untuk dipahami sejak awal. Hal ini diperburuk oleh fakta bahwa proses debug mereka harus dilakukan setelah meninggalkan DevTools dan membuka chrome://serviceworker-internals/ di jendela browser baru.

Pekerja Layanan di Referensi

Tidak lagi! Sekarang Anda dapat men-debug pekerja layanan untuk domain saat ini langsung dari panel Resource. Fitur ini masih dalam proses, tetapi sudah merupakan peningkatan yang signifikan dari status quo sebelumnya.

Semua warna: nuansa desain material di pemilih warna

Beberapa minggu yang lalu, kami menambahkan palet Desain Material ke pemilih warna untuk memberi Anda warna primer yang berani. Untuk benar-benar mendesain satu laman penuh, Anda pasti membutuhkan akses penuh ke semua nuansa Desain Material, jadi kami telah memasukkannya.

Untuk memunculkan bayangan, tekan lama salah satu warna primer dan klik bayangan sebagai gantinya.

Library JavaScript Blackbox dengan lebih mudah di setelan

Blackboxing JavaScript sudah ada sejak lama, tetapi tidak terlalu mudah ditemukan. Ini adalah fitur yang memungkinkan Anda mem-blackbox skrip di halaman untuk berfokus hanya pada kode yang Anda tulis (dan menyembunyikan semua kode penggabungan).

Sekarang kami telah memindahkannya ke Setelan. Cobalah:

Blackboxing

Yang terbaik dari yang lain

  • Tidak dapat mengakses tombol Rendering? Setelan Rendering telah dipindahkan ke menu utama DevTools (di bagian “Alat Lainnya”). Selain hal yang biasa digunakan (yaitu pengukur FPS), kami juga telah memindahkan “Emulasikan media cetak” ke sana.
  • Lelah mengetik chrome://inspect di Omnibox? Periksa Perangkat kini juga dapat ditemukan di menu utama baru di bagian “Alat Lainnya”.
  • Tidak sengaja menutup salah satu tab Panel samping yang dapat ditutup seperti Rendering atau Penelusuran? Anda kini dapat membukanya kembali dengan menu baru di sebelah kiri.

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