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 menjadi lebih mudah diingat daripada nama font-weight. UI pelengkapan otomatis panel Gaya kini mendukung CSS masing-masing. Jika Anda ingat nilai kata kunci yang diinginkan, tetapi tidak dapat mengingat nama propertinya, coba mengetik nilai dan pelengkapan otomatis akan membantu Anda menemukan nama yang dicari.

Setelah mengetik &#39;tebal&#39; panel Styles akan dilengkapi otomatis menjadi &#39;font-weight: bold&#39;.

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 {i>Network<i} sebelumnya memiliki masalah {i>usability<i} di mana opsi seperti menu throttling tidak dapat dijangkau saat jendela DevTools sempit. Untuk mengatasi masalah ini dan merapikan panel Jaringan, beberapa opsi yang jarang digunakan telah dipindahkan ke Setelan Jaringan yang baru Tombol Setelan Jaringan Google Analytics.

Setelan Jaringan

Gambar 2. Setelan Jaringan.

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

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 sekarang menyertakan pesan WebSocket. Properti _webSocketMessages dimulai dengan garis bawah untuk menunjukkan bahwa ini adalah bidang khusus ({i>custom field<i}).

...
"_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 fitur baru Ekspor Semua Sebagai HAR Dengan Konten Ekspor dan Impor File HAR Tombol Impor. Mengimpor dan mengekspor HAR telah muncul di DevTools untuk sementara 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 sebesar 43,4 MB di total. 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 memudahkan pelacakan pekerja layanan 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 Latar Belakang Peristiwa Pengambilan dan Sinkronisasi Latar Belakang. Mengingat peristiwa Pengambilan Latar Belakang dan Sinkronisasi Latar Belakang terjadi di... yah... latar belakang, ini tidak akan berguna jika DevTools hanya merekam Latar Belakang Peristiwa Ambil dan Sinkronisasi Latar Belakang saat DevTools terbuka. Setelah mulai merekam, fitur Latar Belakang Peristiwa Sinkronisasi Latar Belakang dan Ambil 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 Record 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 proyek eksperimental baru yang memungkinkan Anda untuk mengotomatiskan Firefox dengan API Puppeteer. Dengan kata lain, sekarang Anda bisa mengotomatiskan Firefox dan Chromium dengan Node API yang sama, yang ditunjukkan dalam video di bawah ini.

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 Puppeteer talk 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   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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