Giriş
2D veya WebGL bağlamı kullanmanız fark etmez. <canvas> öğesiyle çalışan herkes, hata ayıklamanın son derece zor olabileceğini bilir. Tuvalle ç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 tuval bağlamına gönderilen talimatları yakalayıp bunları tek tek incelemek isteyebilirsiniz. Neyse ki Chrome'un Geliştirici Araçları'nda tam olarak bunu yapmamızı sağlayan yeni bir Canvas Inspection özelliği var.
Bu makalede, tuval çalışmanızda hata ayıklamaya başlamak için bu özelliği nasıl kullanacağınızı göstereceğim. Denetleyici hem 2D hem de WebGL bağlamlarını destekler. Bu nedenle, hangisini kullanırsanız kullanın, yararlı hata ayıklama bilgilerini hemen alabilirsiniz.
Başlarken
Başlamak için Chrome'da about:flags adresine gidin ve "Geliştirici Araçları denemelerini etkinleştir" seçeneğini açın.
Ardından, Geliştirici Araçları'na gidin ve sağ alt köşedeki dişli simgesini 
tıklayın. Buradan Denemeler'e gidip Canvas inspection'ı (Canvas denetimi) etkinleştirebilirsiniz:
Değişikliklerin geçerli olması için Geliştirici Araçları'nı kapatıp yeniden açmanız gerekir (Alt+R veya kullanışlı bir alternatif olan Option+R kısayolunu kullanabilirsiniz).
Geliştirici Araçları yeniden açıldığında Profiller bölümüne gidin. Yeni bir Canvas Profiler seçeneği görürsünüz.
Başlangıçta Canvas Profiler'ın devre dışı olduğunu göreceksiniz. Hata ayıklamak istediğiniz tuvali içeren bir sayfanız olduğunda Etkinleştir'e basmanız yeterlidir. Sayfa, <canvas> çağrılarını yakalamaya hazır şekilde yeniden yüklenir:
Tek bir kare mi yoksa ardışık kareler mi yakalamak istediğinize karar vermeniz gerekir. Kare, DevTools Zaman Çizelgesi'nde gördüğünüzle tamamen aynıdır.
Tek kare, geçerli karenin sonuna kadar çağrıları yakalar ve ardından durur. Ardışık kareler ise 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 animasyonun tek bir karesini yakalamak isteyebilirsiniz. Bir kullanıcı etkinliğine yanıt olarak gerçekleşen kısa bir animasyon için ardışık kareleri yakalamanız gerekebilir.
Artık her şey hazır ve kayda başlayabiliriz.
Kareler yakalanıyor
Kaydetmek için Başlat'a basın ve ardından uygulamanızla normalde yaptığınız gibi etkileşim kurun. Bir süre sonra Geliştirici Araçları'na geri dönün ve art arda yakalama yapıyorsanız Durdur'a basın.
Artık soldaki listede, tüm <canvas> öğelerinde yakalanan bağlam çağrılarının sayısını içeren yeni bir profiliniz var. Profili tıkladığınızda şuna benzer 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 o 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.
Kare içinde çekim çağrısı gruplarını görürsünüz. Her çizim çağrısı grubu, gruptaki son çağrı olacak tek bir çizim çağrısı içerir. Peki, çekim çağrısı nedir? 2D bağlamında clearRect(), drawImage(), fill(), stroke(), putImageData() veya herhangi bir metin oluşturma işlevi, WebGL bağlamında ise clear(), drawArrays() veya drawElements() kullanılır. Temel olarak, mevcut çizim arabelleğinin içeriğini değiştirecek her şey bu kapsamdadır. (Grafiklerle ilgilenmiyorsanız arabelleği, üzerinde değişiklik yaptığımız pikselleri içeren bir bit eşlem olarak düşünebilirsiniz.)
Şimdi tek yapmanız gereken listedeki adımları uygulamak. Bunu kare, çekim çağrısı grubu veya çağrı düzeyinde yapabilirsiniz. Listede gezinmek için hangi yöntemi seçerseniz seçin (ekran görüntüsünün hemen altında hızlıca gezinmenize yardımcı olan düğmeler bulunur) o noktadaki bağlamı görürsünüz. Bu sayede, hataları ortaya çıktıkları anda hızlıca bulup düzeltebilirsiniz.
Farkı bulun
İki çağrı arasında hangi özelliklerin ve değişkenlerin değiştiğini görebilmek de faydalı bir özelliktir.
Bunu görmek için kenar çubuğu düğmesini (
) tıklamanız yeterlidir. Yeni bir görünüm açılır. Çekim çağrılarını adım adım incelediğinizde güncellenen özellikleri görürsünüz. Fareyle üzerine geldiğinizde tüm arabelleklerin veya dizilerin içerikleri gösterilir.
Sesinizi duyurun.
Artık Chrome'un Geliştirici Araçları'nda tuval çalışmanızda nasıl hata ayıklayacağınızı biliyorsunuz. Canvas Profiler aracıyla ilgili geri bildiriminiz varsa lütfen hata bildirin veya Chrome Geliştirici Araçları Grubu'nda yayınlayın. Chrome'un araçları yalnızca geliştiricilerin kullanımı ve geri bildirimleri sayesinde daha iyi hale geldiğinden, herhangi bir hata bulursanız veya bir <canvas> öğesini incelerken görmek istediğiniz başka bir şey olursa lütfen bize bildirin.