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 mem-build ekstensi Chrome yang menggunakan CDP.
Misalnya, ini adalah perintah CDP yang menyisipkan aturan baru dengan ruleText yang diberikan dalam stylesheet dengan styleSheetId yang diberikan, di 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 Pemantau protokol memberi Anda 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 dan tanda petik yang terbuka dan tertutup, tetapi juga harus mengingat parameter perintah yang pada akhirnya 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 dengan memberikan daftar perintah yang tersedia melalui fitur pelengkapan otomatis.
- Isi otomatis parameter perintah. Mengurangi kebutuhan untuk memeriksa dokumentasi CDP guna mendapatkan daftar parameter perintah yang tersedia.
- Menyederhanakan pengetikan parameter. Anda hanya perlu mengisi nilai parameter yang ingin dikirim.
- Edit dan kirim ulang. Meningkatkan kecepatan pembuatan prototipe dengan mempermudah perubahan perintah CDP.
Sekarang, mari kita lihat apa yang ditawarkan editor baru ini, dan cara memanfaatkannya.
Fitur pelengkapan otomatis
Fitur pelengkapan otomatis kini mendukung panel input perintah. Perintah 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 dengan mudah mengedit nilai parameter primitif. 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 yang sesuai dengan perintah apa. Selain itu, editor menampilkan parameter dalam urutan tertentu: parameter wajib terlebih dahulu (dalam warna merah) dan parameter opsional berikutnya (dalam warna biru).
Untuk menambahkan nilai ke parameter opsional, arahkan kursor ke namanya, lalu 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 menyediakan pilihan nilai potensial (untuk enum) atau opsi benar atau salah yang sederhana untuk boolean. Fitur ini mengurangi kemungkinan mengetik nilai yang salah untuk parameter enum serta mempertahankan akurasi dan kesederhanaan.
Parameter array
Untuk parameter array, Anda dapat menambahkan nilai ke array secara manual. Arahkan kursor ke baris parameter, lalu 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. Hal ini berfungsi untuk semua jenis parameter bertingkat.
Mempelajari fungsi perintah dan parameter di editor
Pernahkah Anda tidak yakin dengan tujuan parameter atau perintah? Sekarang, Anda dapat mengarahkan kursor ke perintah atau parameter, dan tooltip deskriptif akan muncul, lengkap dengan link ke dokumentasi online.
Mendapatkan peringatan sebelum mengirim parameter yang salah
Sebelumnya, jika Anda tidak tahu apakah nilai parameter memiliki jenis yang benar dan harus menunggu untuk membaca respons error, editor baru ini cocok untuk Anda. Halaman ini menampilkan error real-time jika parameter tidak dapat menerima nilai yang Anda masukkan.
Mengirim ulang perintah
Jika perlu menyesuaikan parameter perintah yang baru saja Anda kirim, Anda tidak perlu mengetik ulang. Untuk mengedit dan mengirim ulang perintah, klik kanan item di petak data, lalu pilih Edit dan 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 langsung ke panel input, perintah tersebut akan mengisi editor dengan lancar, dan sebaliknya.
Kesimpulan
Sasaran 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 mengirim perintah CDP.
Mendownload saluran pratinjau
Sebaiknya gunakan 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 sebelum pengguna melakukannya.
Hubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.
- Kirim masukan dan permintaan fitur kepada kami di crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
- Tweet ke @ChromeDevTools.
- Berikan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.