Yang Baru di DevTools (Chrome 76)

Kayce Basques

Halo! Berikut 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> menjadi 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 ingat nama propertinya, coba ketik nilai dan pelengkapan otomatis akan membantu Anda menemukan nama yang Anda cari.

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

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

UI baru untuk setelan jaringan

Panel Jaringan sebelumnya memiliki masalah kegunaan saat opsi seperti menu pembatasan tidak dapat diakses saat jendela DevTools sempit. Untuk memperbaiki masalah ini dan menyederhanakan panel Jaringan, beberapa opsi yang kurang sering digunakan telah dipindahkan ke belakang panel Setelan Jaringan yang baru.

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.

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 rekan kerja, file HAR Anda kini menyertakan pesan WebSocket. Properti _webSocketMessages dimulai 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 dan Impor File HAR yang baru. Impor dan ekspor HAR sudah ada di DevTools sejak lama. Tombol yang lebih mudah ditemukan adalah perubahan 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.

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

Lihat juga Monitor Performa untuk melacak penggunaan memori secara real-time.

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

Nomor port pendaftaran pekerja layanan

Panel Service Workers kini menyertakan nomor port dalam judulnya untuk mempermudah pelacakan pekerja layanan yang sedang Anda debug.

Gambar 6. Port pekerja layanan.

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

Memeriksa peristiwa Pengambilan Data di Latar Belakang dan Sinkronisasi di Latar Belakang

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

Buka panel Application, buka tab Background Fetch atau Background Sync, lalu klik Record untuk mulai mencatat peristiwa. Klik peristiwa untuk melihat informasi selengkapnya.

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

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 akan dimasukkan ke dalam kotak penelusuran di situs dokumentasi Puppeteer. Kemudian, tugas yang sama akan diulangi di Chromium.

Tonton presentasi Puppeteer oleh Joel dan Andrey dari Google I/O 2019 untuk mempelajari lebih lanjut Puppeteer dan Puppeteer untuk Firefox. Pengumuman Firefox terjadi sekitar pukul 4.05.

Mendownload saluran pratinjau

Pertimbangkan untuk menggunakan 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 Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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