Pengantar
Tidak masalah apakah Anda menggunakan konteks 2D atau WebGL, siapa pun yang pernah menggunakan elemen <canvas> tahu bahwa proses debug bisa sangat sulit. Bekerja dengan kanvas biasanya melibatkan daftar panggilan yang panjang dan sulit diikuti:
function draw() {
context.clearRect(0, 0, 258, 258);
context.fillStyle = "#EEEEEE";
context.beginPath();
context.arc(129, 129, 127, 0, 6.28, true);
context.closePath();
context.fill();
// … and on and on
}
Terkadang Anda ingin menangkap petunjuk yang dikirim ke konteks kanvas dan menelusurinya satu per satu. Untungnya, ada fitur Canvas Inspection baru di DevTools Chrome yang memungkinkan kita melakukan hal tersebut.
Dalam artikel ini, kami akan menunjukkan cara menggunakan fitur ini untuk mulai men-debug karya canvas Anda. Inspektur mendukung konteks 2D dan WebGL, jadi apa pun yang Anda gunakan, Anda akan bisa mendapatkan informasi proses debug yang berguna secara langsung.
Memulai
Untuk memulai, buka about:flags di Chrome dan aktifkan “Enable Developer Tools experiments”
Selanjutnya, buka DevTools dan tekan ikon roda gigi 
di pojok kanan bawah. Dari sana, Anda dapat membuka Experiments dan mengaktifkan Canvas inspection:
Agar perubahan diterapkan, Anda harus menutup dan membuka kembali DevTools (Anda dapat menggunakan Alt+R atau Option+R, alternatif yang praktis).
Saat DevTools dibuka kembali, buka bagian Profiles dan Anda akan melihat opsi Canvas Profiler baru.
Pertama-tama, Anda akan melihat bahwa Canvas Profiler dinonaktifkan. Setelah Anda memiliki halaman yang berisi kanvas yang ingin di-debug, cukup tekan Enable dan halaman akan dimuat ulang, siap untuk menangkap panggilan <canvas>:
Anda harus memutuskan apakah ingin mengambil satu frame, atau frame berturut-turut, dengan frame yang sama persis seperti yang akan Anda lihat di Linimasa DevTools.
Single frame merekam panggilan hingga akhir frame saat ini, lalu berhenti. Sebaliknya, Consecutive frames menangkap semua frame dari semua elemen <canvas> hingga Anda menghentikannya. Mode yang Anda pilih bergantung pada cara Anda menggunakan elemen <canvas>. Untuk animasi yang sedang berlangsung, Anda mungkin ingin mengambil satu frame. Untuk animasi singkat yang terjadi sebagai respons terhadap peristiwa pengguna, Anda mungkin perlu mengambil frame berturut-turut.
Dengan begitu, kita sudah siap dan dapat mulai merekam.
Mengambil frame
Untuk merekam, cukup tekan Start, lalu berinteraksi dengan aplikasi seperti biasa. Setelah beberapa saat, kembali ke DevTools dan, jika Anda merekam secara berurutan, tekan Stop.
Sekarang Anda memiliki profil baru yang menarik dalam daftar di sebelah kiri, lengkap dengan jumlah panggilan konteks yang diambil di semua elemen <canvas>. Klik profil dan Anda akan melihat layar yang terlihat seperti ini:
Di panel bawah, Anda akan melihat daftar semua frame yang diambil yang dapat Anda lihat satu per satu dan, saat Anda mengklik setiap frame, screenshot di bagian atas akan menampilkan status elemen <canvas> di akhir frame tersebut. Jika memiliki beberapa elemen <canvas>, Anda dapat memilih elemen yang akan ditampilkan menggunakan menu tepat di bawah screenshot.
Di dalam frame, Anda akan melihat grup panggilan gambar. Setiap grup panggilan gambar berisi satu panggilan gambar, yang akan menjadi panggilan terakhir dalam grup. Jadi, apa itu panggilan gambar? Untuk konteks 2D, hal tersebut dapat berupa clearRect(), drawImage(), fill(), stroke(), putImageData(), atau fungsi rendering teks apa pun, dan untuk WebGL, hal tersebut dapat berupa clear(), drawArrays(), atau drawElements(). Pada dasarnya, ini adalah apa pun yang akan mengubah konten buffering gambar saat ini. (Jika Anda tidak menyukai grafik, Anda dapat menganggap buffer sebagai bitmap dengan piksel yang kita manipulasi.)
Sekarang, Anda hanya perlu mengikuti langkah-langkah dalam daftar. Anda dapat melakukannya di tingkat frame, grup panggilan gambar, atau panggilan. Apa pun cara yang Anda pilih untuk menelusuri daftar (dan ada tombol tepat di bawah screenshot yang membantu Anda menavigasi dengan cepat), Anda akan melihat konteks pada titik tersebut, yang berarti Anda dapat dengan cepat menemukan dan memperbaiki bug saat muncul.
Temukan perbedaannya
Fitur berguna lainnya adalah kemampuan untuk melihat properti dan variabel mana yang telah berubah di antara dua panggilan.
Untuk melihatnya, cukup klik tombol sidebar (
) dan tampilan baru akan muncul. Saat Anda menelusuri panggilan gambar, Anda akan melihat properti yang telah diperbarui. Buffer atau array apa pun akan menampilkan kontennya jika Anda mengarahkan kursor ke atasnya.
Sampaikan pendapat Anda.
Sekarang Anda tahu cara men-debug pekerjaan kanvas di DevTools Chrome. Jika Anda memiliki masukan tentang alat Canvas Profiler, laporkan bug atau posting ke Grup Chrome DevTools. Beri tahu kami jika Anda menemukan bug atau jika ada hal lain yang ingin Anda lihat saat memeriksa <canvas>, karena alat Chrome hanya akan menjadi lebih baik melalui penggunaan dan masukan developer.