Chrome DevTools Protocol (CDP) adalah protokol proses debug jarak jauh (API) yang memungkinkan developer berkomunikasi dengan browser Chrome yang sedang berjalan. Chrome DevTools menggunakan CDP untuk membantu Anda memeriksa status browser, mengontrol perilakunya, dan mengumpulkan informasi proses debug. Anda juga dapat membuat ekstensi Chrome yang menggunakan CDP.
Misalnya, ini adalah perintah CDP yang menyisipkan aturan baru dengan ruleText yang diberikan dalam stylesheet dengan styleSheetId yang diberikan, pada posisi yang ditentukan oleh location.
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
Tab panel samping Protocol monitor menyediakan cara untuk mengirim permintaan CDP dan melihat semua permintaan dan respons CDP yang dikirim dan diterima DevTools.
Sebelumnya, sulit untuk membuat perintah secara manual, terutama perintah dengan banyak parameter. Anda tidak hanya perlu memperhatikan tanda kurung buka dan tutup serta tanda kutip, Anda juga harus mengingat parameter perintah yang, pada gilirannya, membuat Anda mencari dokumentasi CDP.
Untuk mengatasi masalah ini, DevTools memperkenalkan editor CDP baru yang tujuan utamanya adalah untuk:
- Perintah pelengkapan otomatis. Sederhanakan input perintah CDP Anda dengan memberi Anda daftar perintah yang tersedia melalui fitur pelengkapan otomatis.
- Parameter perintah yang terisi otomatis. Mengurangi kebutuhan untuk memeriksa dokumentasi CDP untuk daftar parameter perintah yang tersedia.
- Sederhanakan pengetikan parameter. Anda hanya perlu mengisi nilai parameter yang ingin dikirim.
- Edit dan kirim ulang. Meningkatkan kecepatan pembuatan prototipe dengan membuatnya lebih cepat untuk memodifikasi perintah CDP.
Sekarang, mari kita lihat apa saja yang ditawarkan editor baru ini, dan bagaimana Anda dapat memanfaatkannya.
Fitur pelengkapan otomatis
Fitur pelengkapan otomatis kini mendukung kolom input perintah. Langkah ini membantu Anda menulis nama perintah CDP yang dapat Anda akses. Hal ini dapat sangat berguna untuk perintah yang tidak menerima parameter.
Parameter string dan angka
Dengan editor baru ini, Anda kini dapat mengedit nilai parameter primitif dengan mudah. Untuk membuka editor, klik ikon 
di samping input perintah.
Setelah Anda memasukkan nama perintah, editor akan otomatis menampilkan parameter yang sesuai. Anda tidak perlu mencari dokumentasi untuk mengetahui parameter apa yang bekerja dengan perintah apa. Selain itu, editor menampilkan parameter dalam urutan tertentu: yang wajib terlebih dahulu (berwarna merah) dan yang opsional berikutnya (berwarna biru).
Untuk menambahkan nilai ke parameter opsional, arahkan kursor ke namanya dan klik tombol +. Untuk mereset parameter ke tidak ditentukan, klik tombol Reset ke nilai default.
Parameter enum dan boolean
Saat mengedit parameter enum atau boolean, Anda akan melihat menu drop-down yang memberikan pilihan nilai potensial (untuk enum) atau opsi benar atau salah yang sederhana untuk boolean. Fitur ini mengurangi kemungkinan pengetikan nilai yang salah untuk parameter enum dan mempertahankan akurasi dan kemudahan.
Parameter array
Untuk parameter array, Anda dapat menambahkan nilai ke array secara manual. Arahkan kursor ke baris parameter dan klik tombol +.
Untuk menghapus item array satu per satu, klik tombol tempat sampah di samping item. Anda juga dapat menghapus semua parameter dari array dengan tombol blokir. Dalam hal ini, parameter array direset ke [].
Parameter objek
Saat Anda memasukkan perintah yang menerima parameter objek, editor akan mencantumkan kunci objek ini dan Anda dapat mengedit nilainya secara langsung. Ini berfungsi untuk semua jenis parameter bertingkat.
Mempelajari fungsi perintah dan parameter di editor
Apakah Anda pernah tidak yakin tentang tujuan dari suatu parameter atau perintah? Sekarang, Anda dapat mengarahkan kursor ke perintah atau parameter, dan tooltip deskriptif akan muncul, lengkap dengan link ke dokumentasi online.
Berikan peringatan sebelum mengirim parameter yang salah
Sebelumnya, jika Anda tidak tahu apakah nilai parameter adalah jenis yang benar dan harus menunggu untuk membaca respons error, editor baru ini cocok untuk Anda. Fitur ini menampilkan error real-time jika parameter tidak dapat menerima nilai yang Anda masukkan.
Kirim ulang perintah
Jika Anda perlu menyesuaikan parameter perintah yang baru saja Anda kirim, Anda tidak perlu mengetiknya lagi. Untuk mengedit dan mengirim ulang perintah, klik kanan item di datagrid dan pilih Edit and kirim ulang dari menu drop-down. Tindakan ini akan otomatis membuka kembali editor CDP dan mengisinya dengan perintah yang Anda pilih.
Menyalin perintah ke format JSON
Untuk menyalin perintah CDP dalam format JSON ke papan klip, klik ikon salin 
di ujung paling kiri toolbar. Selain itu, perlu diingat bahwa jika Anda memasukkan perintah secara langsung ke panel input, perintah itu akan mengisi editor dengan lancar, dan sebaliknya.
Kesimpulan
Tujuan tim DevTools di balik desain editor CDP baru ini adalah untuk menyederhanakan pengetikan perintah CDP. Editor baru juga dapat digunakan untuk melihat parameter bersama dokumentasi dan memberikan cara yang lebih mudah untuk mengirimkan perintah CDP Anda.
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
> Bantuan > Laporkan masalah DevTools di DevTools. - Tweet di @ChromeDevTools.
- Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.