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

Paul Bakaus
Paul Bakaus

Gunakan menu konteks baru 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. {i>library<i} Blackbox JS dengan lebih mudah.

Menu konteks baru yang ditingkatkan di panel DOM

menu konteks DOM baru.

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

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

Men-debug pekerja layanan melalui panel Resource

Service worker akan sangat bermanfaat setelah Anda menyiapkannya, tetapi mereka bisa saja kesulitan untuk memikirkannya sejak awal. Hal ini diperparah oleh fakta bahwa proses debug harus meninggalkan DevTools dan membuka chrome://serviceworker-internals/ di jendela browser baru.

Service Worker di Resource

Tidak lagi! Sekarang Anda dapat men-debug pekerja layanan untuk domain saat ini langsung dari panel Resource. Ini masih dalam proses, tetapi sudah merupakan peningkatan besar 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 utama yang berani. Untuk benar-benar mendesain satu laman penuh, Anda pasti membutuhkan akses penuh ke semua nuansa Desain Material, jadi kami telah membuatnya.

Untuk memunculkan shade, tekan lama salah satu warna utama dan klik shade.

Library JavaScript Blackbox lebih mudah di setelan

{i>Blackboxing<i} JavaScript telah ada selama beberapa waktu tetapi tidak terlalu mudah untuk ditemukan. Ini adalah fitur yang memungkinkan Anda meng-blackbox skrip pada halaman agar fokus hanya pada kode yang Anda tulis (dan menyembunyikan semua kode penggabungan).

Kami telah memindahkannya ke Setelan. Cobalah:

Blackboxing

Terbaik dari yang lain

  • Akses ke tombol Rendering tidak ada? Setelan Rendering telah dipindahkan ke menu utama DevTools (di bagian "More Tools"). Selain dugaan yang biasa (yaitu FPS meter), kami juga telah memindahkan "Emulasikan media cetak" ke sana.
  • Lelah mengetik chrome://inspect ke dalam Omnibox? Inspect Devices kini juga dapat ditemukan di menu utama yang baru di bagian “Alat Lainnya”.
  • Tidak sengaja menutup salah satu tab Panel Samping yang dapat ditutup ini seperti Rendering atau Penelusuran? Sekarang Anda dapat membukanya kembali dengan menu baru di sebelah kiri.

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