Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 76)

Kayce Basques

Halo! Berikut yang baru di Chrome DevTools pada 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> dicetak 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 nilai dan pelengkapan otomatis akan membantu Anda menemukan nama yang dicari.

Setelah mengetik 'tebal', panel Styles akan otomatis melengkapi 'font-weight: bold'.

Gambar 1. Setelah mengetik bold, panel Styles 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 membersihkan panel Jaringan, beberapa opsi yang jarang digunakan telah dipindahkan ke panel Setelan Jaringan yang baru.

Setelan Jaringan

Gambar 2. Setelan Jaringan.

Opsi berikut telah dipindahkan ke Setelan Jaringan: Use Large Request Rows, Group By Frame, Show Overview, Capture Screenshots. 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 dimulai dengan garis bawah untuk menunjukkan bahwa properti ini 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 rekan kerja dengan lebih mudah menggunakan tombol Ekspor Semua Sebagai HAR Dengan Konten dan Impor File HAR yang baru. Pengimporan dan pengeksporan HAR sudah cukup lama di DevTools. 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 total 43,4 MB memori. 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 Service Workers kini menyertakan nomor port dalam judulnya untuk mempermudah pelacakan service worker mana yang sedang 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 pada panel Aplikasi untuk memantau peristiwa Pengambilan Latar Belakang dan Sinkronisasi Latar Belakang. Mengingat peristiwa Pengambilan Latar Belakang dan Sinkronisasi Latar Belakang terjadi di... hah... latar belakang, hal ini tidak akan terlalu berguna jika DevTools 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, bahkan setelah Anda menutup Chrome.

Buka panel Application, buka tab Background Fetch atau Background Sync, lalu klik Record untuk mulai mencatat peristiwa ke dalam log. 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, sekarang Anda 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 dimasukkan ke dalam kotak penelusuran di situs dokumentasi Puppeteer. Kemudian, tugas yang sama diulang di Chromium.

Lihat diskusi 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, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools.

Kirim saran atau masukan kepada kami melalui crbug.com.
Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.