Giriş
2D veya WebGL bağlamı kullanıyor olmanız fark etmez. <canvas> öğesiyle daha önce çalışmış olan herkes, hata ayıklamanın son derece zor olabileceğini bilir. Tuval üzerinde çalışmak genellikle uzun ve takip edilmesi zor bir çağrı listesi içerir:
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
}
Bazen bir kanvas bağlamına gönderilen talimatları yakalamak ve bunları tek tek incelemek isteyebilirsiniz. Neyse ki Chrome'un Geliştirici Araçları'nda tam da bunu yapmamıza olanak tanıyan yeni bir tuval denetimi özelliği var.
Bu makalede, kanvas çalışmanızda hata ayıklama işlemine başlamak için bu özelliği nasıl kullanacağınızı göstereceğiz. Denetleyici hem 2D hem de WebGL bağlamlarını destekler. Dolayısıyla, hangisini kullanırsanız kullanın, yararlı hata ayıklama bilgilerini hemen alabilmeniz gerekir.
Başlarken
Başlamak için Chrome'da about:flags simgesine gidin ve "Geliştirici Araçları denemelerini etkinleştir" seçeneğini etkinleştirin.
Ardından DevTools'a gidin ve sağ alt köşedeki dişli simgesine 
dokunun. Buradan Denemeler'e gidip Tuval denetimi'ni etkinleştirebilirsiniz:
Değişikliklerin geçerli olması için Geliştirici Araçları'nı kapatıp yeniden açmanız gerekir (kullanışlı bir alternatif olan Alt+R veya Option+R'yi kullanabilirsiniz).
DevTools yeniden açıldığında Profiller bölümüne gidin. Burada yeni bir Tuval Profilleyici seçeneği göreceksiniz.
Başlangıçta, Kanvas Profilleyici'nin devre dışı olduğunu görürsünüz. Hata ayıklamak istediğiniz tuvali içeren bir sayfa oluşturduktan sonra Etkinleştir'e basmanız yeterlidir. Sayfa, <canvas> çağrılarını yakalamak için yeniden yüklenir:
Tek bir kare mi yoksa DevTools zaman çizelgesinde gördüğünüz gibi tam olarak aynı olan art arda kareler mi yakalamak istediğinize karar vermeniz gerekir.
Tek çerçeve, geçerli çerçevenin sonuna kadar gelen aramaları yakalar ve ardından durup sona erer. Öte yandan ardışık kareler, siz durdurana kadar tüm <canvas> öğelerinin tüm karelerini yakalar. Hangi modu seçeceğiniz, <canvas> öğesini nasıl kullandığınıza bağlıdır. Devam eden bir animasyon için tek bir kare yakalamak isteyebilirsiniz. Bir kullanıcı etkinliğine yanıt olarak gerçekleşen kısa bir animasyon için art arda kareler yakalamanız gerekebilir.
Artık çekim yapmaya hazırsınız.
Kare yakalama
Kayıt yapmak için Başlat'a basmanız ve ardından uygulamanızla normalde yaptığınız gibi etkileşim kurmanız yeterlidir. Bir süre sonra DevTools'a geri dönün ve art arda yakalama yapıyorsanız Durdur'a basın.
Artık sol taraftaki listede, tüm <canvas> öğelerinde yakalanan bağlam çağrılarının sayısıyla birlikte yeni bir profiliniz var. Profili tıkladığınızda aşağıdaki gibi bir ekran görürsünüz:
Alt bölmede, adım adım ilerleyebileceğiniz tüm yakalanan karelerin listesini görürsünüz. Her birini tıkladığınızda, üstteki ekran görüntüsünde <canvas> öğesinin ilgili karenin sonundaki durumu gösterilir. Birden fazla <canvas> öğeniz varsa ekran görüntüsünün hemen altındaki menüyü kullanarak hangisinin gösterileceğini seçebilirsiniz.
Çerçevenin içinde çağrı grupları çizeceğinizi görürsünüz. Her çekiliş çağrısı grubu, gruptaki son çağrı olacak tek bir çekiliş çağrısı içerir. Peki, çekiliş çağrısı nedir? 2D bağlam için clearRect(), drawImage(), fill(), stroke(), putImageData() veya herhangi bir metin oluşturma işlevi gibi öğeler, WebGL için ise clear(), drawArrays() veya drawElements() kullanılır. Esasen, mevcut çizim arabelleğinin içeriğini değiştirecek her şeydir. (Grafiklerle ilgili bilginiz yoksa arabelleği, üzerinde işlem yaptığımız piksellerin bulunduğu bir bitmap olarak düşünebilirsiniz.)
Artık tek yapmanız gereken listede ilerlemek. Bunu çerçeve, çizim çağrısı grubu veya çağrı düzeyinde yapabilirsiniz. Listede hangi yolu seçerseniz seçin (ekran görüntüsünün hemen altında hızlıca gezinmenize yardımcı olacak düğmeler vardır) o noktadaki bağlamı görürsünüz. Bu sayede, ortaya çıkan hataları hızlıca bulup düzeltebilirsiniz.
Farkı bulun
Faydalı bir diğer özellik de iki çağrı arasında hangi özelliklerin ve değişkenlerin değiştiğini görebilmenizdir.
Bunu görmek için kenar çubuğu düğmesini (
) tıklamanız yeterlidir. Yeni bir görünüm açılır. Çizim çağrılarında ilerlerken güncellenen özellikleri görürsünüz. Arabellekler veya diziler, fareyle üzerine geldiğinizde içeriklerini gösterir.
Sesinizi duyurabilirsiniz.
Artık Chrome'un Geliştirici Araçları'nda kanvas çalışmanızda nasıl hata ayıklama yapacağınızı biliyorsunuz. Tuval Profilleyici aracıyla ilgili geri bildiriminiz varsa lütfen hata kaydı gönderin veya Chrome Geliştirici Araçları Grubu'nda yayın yapın. Herhangi bir hata bulursanız veya <canvas> cihazını incelerken görmek istediğiniz başka bir şey olursa bize bildirin. Bu sadece geliştirici kullanımı ve Chrome araçlarının daha iyi hale geldiği için geri bildirimdir.