Pengantar
Tidak masalah jika Anda menggunakan konteks 2D atau WebGL, dan siapa pun yang pernah menggunakan elemen <canvas> akan mengetahui bahwa men-debug akan 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 mengambil petunjuk yang dikirim ke konteks kanvas dan mempelajarinya satu per satu. Untungnya ada fitur Canvas Inspection baru di DevTools Chrome yang memungkinkan kita melakukan hal itu.
Dalam artikel ini, saya akan menunjukkan cara menggunakan fitur ini untuk mulai men-debug pekerjaan kanvas. Pemeriksa mendukung konteks 2D dan WebGL, sehingga apa pun yang digunakan, Anda akan langsung mendapatkan informasi proses debug yang berguna.
Memulai
Untuk memulai, buka about:flags di Chrome dan aktifkan “Aktifkan eksperimen Developer Tools”
Selanjutnya, buka DevTools dan tekan roda gigi 
di sudut kanan bawah. Dari sana, Anda dapat membuka Eksperimen dan mengaktifkan Pemeriksaan Canvas:
Agar perubahan diterapkan, Anda harus menutup dan membuka kembali DevTools (Anda dapat menggunakan Alt+R atau Option+R, yang merupakan 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 berisi kanvas yang ingin di-debug, cukup tekan Aktifkan dan halaman akan dimuat ulang dan siap merekam panggilan <canvas>:
Anda harus memutuskan apakah ingin mengambil satu frame, atau frame berturut-turut, dengan frame yang sama persis dengan yang Anda lihat di Timeline DevTools.
Frame tunggal merekam panggilan hingga akhir frame saat ini, lalu berhenti. Di sisi lain, Frame Consecutive merekam semua frame dari semua elemen <canvas> hingga Anda memintanya untuk berhenti. Mode yang Anda pilih bergantung pada cara Anda menggunakan elemen <canvas>. Untuk animasi yang sedang berjalan, Anda mungkin ingin mengambil satu frame. Untuk animasi singkat yang terjadi sebagai respons terhadap peristiwa pengguna, Anda mungkin perlu menangkap frame yang berurutan.
Setelah itu, kita sudah siap untuk mulai merekam.
Mengambil gambar frame
Untuk merekam, cukup tekan Start, lalu berinteraksi dengan aplikasi Anda seperti biasa. Setelah beberapa waktu, kembali ke DevTools dan, jika Anda merekam video berturut-turut, tekan Stop.
Sekarang Anda memiliki profil baru dalam daftar di sebelah kiri, lengkap dengan jumlah panggilan konteks yang direkam di seluruh elemen <canvas>. Klik profil dan Anda akan melihat layar yang terlihat seperti ini:
Di panel bawah, Anda akan melihat daftar semua frame yang diambil dan dapat Anda langkah demi langkah dan, saat Anda mengklik setiap frame, screenshot di bagian atas akan menunjukkan status elemen <canvas> di akhir frame tersebut. Jika Anda memiliki beberapa elemen <canvas>, Anda dapat memilih elemen mana 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 tersebut. Jadi, apa itu panggilan gambar? Untuk konteks 2D, hal-hal seperti clearRect(), drawImage(), fill(), stroke(), putImageData() atau fungsi rendering teks apa pun, dan untuk WebGL, adalah clear(), drawArrays(), atau drawElements(). Pada dasarnya, apa pun yang akan mengubah konten buffer gambar saat ini. (Jika Anda tidak menyukai grafik, Anda dapat menganggap buffer sebagai bitmap dengan piksel yang sedang kita manipulasi.)
Sekarang yang Anda lakukan adalah memeriksa daftarnya. Anda dapat melakukannya pada frame, menggambar grup panggilan, atau tingkat panggilan. Apa pun cara yang dipilih untuk menelusuri daftar (dan ada tombol tepat di bawah screenshot yang membantu Anda menavigasi dengan cepat), Anda akan melihat konteks pada saat itu, yang berarti Anda dapat dengan cepat menemukan dan memperbaiki {i>bug<i} yang muncul.
Temukan perbedaannya
Fitur berguna lainnya adalah kemampuan untuk melihat properti dan variabel mana yang berubah di antara dua panggilan.
Untuk melihat bahwa Anda cukup mengklik tombol sidebar (
) dan tampilan baru akan muncul. Saat Anda melakukan panggilan gambar, Anda akan melihat properti yang telah diperbarui. Setiap buffer atau array akan menampilkan kontennya jika Anda mengarahkan kursor ke atasnya.
Pastikan Anda didengar!
Jadi sekarang Anda tahu cara men-debug pekerjaan kanvas di Chrome DevTools. Jika Anda memiliki masukan terkait alat Canvas Profiler, harap laporkan bug atau posting ke Chrome DevTools Group. Beri tahu kami jika Anda menemukan bug atau jika ada hal lain yang ingin Anda ketahui saat memeriksa <canvas>, karena ini hanya melalui penggunaan developer dan masukan yang membuat alat Chrome menjadi lebih baik.