Yang Baru di DevTools (Chrome 76)

Kayce Basques

Halo! Berikut adalah yang baru di Chrome DevTools di Chrome 76.

Pelengkapan otomatis dengan nilai CSS

Saat menambahkan deklarasi gaya ke node DOM, terkadang nilai deklarasi lebih mudah diingat daripada nama deklarasi. Misalnya, saat membuat node <p> tebal, nilai bold mungkin lebih mudah diingat daripada nama font-weight. UI pelengkapan otomatis panel Gaya kini mendukung nilai CSS. Jika Anda ingat nilai kata kunci yang diinginkan, tetapi tidak dapat mengingat nama properti, coba ketik nilainya dan pelengkapan otomatis akan membantu Anda menemukan nama yang Anda cari.

Setelah mengetik &#39;bold&#39;, panel Gaya akan otomatis melengkapi dengan &#39;font-weight: bold&#39;.

Gambar 1. Setelah mengetik bold, panel Gaya akan otomatis melengkapi font-weight: bold.

Kirim masukan tentang fitur baru ini ke masalah Chromium #931145.

UI baru untuk setelan jaringan

Panel Network sebelumnya mengalami masalah kegunaan saat opsi seperti menu throttling tidak dapat dijangkau saat jendela DevTools sempit. Untuk memperbaiki masalah ini dan merapikan panel Jaringan, beberapa opsi yang jarang digunakan telah dipindahkan ke panel Tombol Setelan Jaringan Setelan Jaringan yang baru.

Setelan Jaringan

Gambar 2. Setelan Jaringan.

Opsi berikut telah dipindahkan ke Setelan Jaringan: Gunakan Baris Permintaan Besar, Kelompokkan Menurut Frame, Tampilkan Ringkasan, Ambil Screenshot. Gambar 3 memetakan lokasi lama ke lokasi baru.

Memetakan lokasi lama ke lokasi baru.

Gambar 3. Memetakan lokasi lama ke lokasi baru.

Kirim masukan tentang perubahan UI ini ke masalah Chromium #892969.

Pesan WebSocket dalam ekspor HAR

Saat mengekspor file HAR dari panel Jaringan untuk membagikan log jaringan kepada kolega, file HAR Anda kini menyertakan pesan WebSocket. Properti _webSocketMessages diawali dengan garis bawah untuk menunjukkan bahwa properti tersebut adalah kolom kustom.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Kirim masukan tentang fitur baru ini ke masalah Chromium #496006.

Tombol impor dan ekspor HAR

Bagikan log jaringan kepada kolega dengan lebih mudah menggunakan tombol Ekspor Semua Sebagai HAR Dengan Konten Ekspor dan Impor File HAR Impor yang baru. Impor dan ekspor HAR telah ada di DevTools selama beberapa waktu. Tombol yang lebih mudah ditemukan adalah perubahan baru.

Tombol HAR baru.

Gambar 4. Tombol HAR baru.

Kirim masukan tentang perubahan UI ini ke masalah Chromium #904585.

Total penggunaan memori real-time

Panel Memori kini menampilkan total penggunaan memori secara real time.

Total penggunaan memori real-time.

Gambar 5. Bagian bawah panel Memori menunjukkan bahwa halaman menggunakan memori 43,4 MB secara keseluruhan. 209 KB/dtk menunjukkan bahwa total penggunaan memori meningkat 209 KB per detik.

Lihat juga Performance Monitor untuk melacak penggunaan memori secara real time.

Kirim masukan tentang fitur baru ini ke masalah Chromium #958177.

Nomor port pendaftaran pekerja layanan

Panel Pekerja Layanan kini menyertakan nomor port dalam judulnya untuk mempermudah pelacakan pekerja layanan yang Anda debug.

Port pekerja layanan.

Gambar 6. Port pekerja layanan.

Kirim masukan tentang perubahan UI ini ke masalah Chromium #601286.

Memeriksa peristiwa Pengambilan Latar Belakang dan Sinkronisasi Latar Belakang

Gunakan bagian Layanan Latar Belakang baru di panel Aplikasi untuk memantau peristiwa Pengambilan Latar Belakang dan Sinkronisasi Latar Belakang. Mengingat peristiwa Pengambilan Latar Belakang dan Sinkronisasi Latar Belakang terjadi di... latar belakang, DevTools tidak akan terlalu berguna jika hanya mencatat peristiwa Pengambilan Latar Belakang dan Sinkronisasi Latar Belakang saat DevTools terbuka. Jadi, setelah Anda mulai merekam, peristiwa Pengambilan Latar Belakang dan Sinkronisasi Latar Belakang akan terus direkam, bahkan setelah Anda menutup tab, dan bahkan setelah Anda menutup Chrome.

Buka panel Aplikasi, buka tab Pengambilan Latar Belakang atau Sinkronisasi Latar Belakang, lalu klik Rekam Rekam untuk mulai mencatat peristiwa. Klik peristiwa untuk melihat informasi selengkapnya tentang peristiwa tersebut.

Panel Pengambilan Latar Belakang.

Gambar 7. Panel Pengambilan Latar Belakang. Demo oleh Maxim Salnikov.

Panel Sinkronisasi Latar Belakang.

Gambar 8. Panel Sinkronisasi Latar Belakang.

Kirim masukan tentang fitur baru ini ke masalah Chromium #927726.

Puppeteer untuk Firefox

Puppeteer untuk Firefox adalah project eksperimental baru yang memungkinkan Anda mengotomatiskan Firefox dengan Puppeteer API. Dengan kata lain, Anda kini dapat mengotomatiskan Firefox dan Chromium dengan Node API yang sama, seperti yang ditunjukkan dalam video di bawah.

Setelah menjalankan node example.js, Firefox akan terbuka dan teks page disisipkan ke kotak penelusuran di situs dokumentasi Puppeteer. Kemudian, tugas yang sama diulang di Chromium.

Lihat perbincangan Puppeteer oleh Joel dan Andrey dari Google I/O 2019 untuk mempelajari lebih lanjut Puppeteer dan Puppeteer untuk Firefox. Pengumuman Firefox terjadi sekitar menit ke-4.

Mendownload saluran pratinjau

Sebaiknya gunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

Daftar semua yang telah dibahas dalam seri Yang baru di DevTools.