Yang Baru di DevTools (Chrome 76)

Halo! Berikut ini adalah hal-hal 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> menebalkan, nilai bold mungkin lebih mudah diingat daripada nama font-weight. UI pelengkapan otomatis panel Style kini mendukung nilai CSS. Jika Anda ingat nilai kata kunci yang diinginkan, tetapi tidak dapat mengingat nama propertinya, coba ketik nilai dan pelengkapan otomatis akan membantu Anda menemukan nama yang Anda cari.

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

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

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

UI baru untuk setelan jaringan

Panel Network sebelumnya memiliki 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 lebih jarang digunakan telah dipindahkan ke belakang panel Setelan Jaringan Tombol Setelan Jaringan yang baru.

Setelan Jaringan

Gambar 2. Setelan Jaringan.

Opsi berikut telah dipindahkan ke Network Settings: 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 terkait perubahan UI ini ke masalah Chromium #892969.

Pesan WebSocket dalam ekspor HAR

Saat mengekspor file HAR dari panel Network untuk berbagi log jaringan dengan kolega Anda, 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 terkait fitur baru ini ke masalah Chromium #496006.

Tombol impor dan ekspor HAR

Bagikan log jaringan kepada kolega dengan lebih mudah menggunakan tombol Export All As HAR With Content Ekspor dan Import HAR File Impor baru. Impor dan ekspor HAR telah lama ada di DevTools. Tombol yang lebih mudah ditemukan adalah perubahan baru.

Tombol HAR baru.

Gambar 4. Tombol HAR baru.

Kirim masukan terkait 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 Memory menunjukkan bahwa halaman menggunakan total memori 43,4 MB. 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 terkait fitur baru ini ke masalah Chromium #958177.

Nomor port pendaftaran pekerja layanan

Panel Pekerja Layanan kini menyertakan nomor port di judulnya untuk memudahkan melacak pekerja layanan yang sedang Anda proses debug.

Port pekerja layanan.

Gambar 6. Port pekerja layanan.

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

Memeriksa peristiwa Pengambilan Latar Belakang dan Sinkronisasi Latar Belakang

Gunakan bagian Background Services baru pada panel Application untuk memantau peristiwa Background Fetch dan Background Sync. Mengingat peristiwa Pengambilan Latar Belakang dan Sinkronisasi Latar Belakang terjadi di... 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, dan bahkan setelah Anda menutup Chrome.

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

Panel Background Fetch.

Gambar 7. Panel Background Fetch. Demo oleh Maxim Salnikov.

Panel Sinkronisasi Latar Belakang.

Gambar 8. Panel Sinkronisasi Latar Belakang.

Kirim masukan terkait 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, kini 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 akan disisipkan ke 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 04.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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.

Yang Baru di DevTools

Daftar semua hal yang telah dibahas dalam seri What's New In DevTools.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59