Giriş
2D veya WebGL bağlamı kullanıyor olmanız fark etmez; <canvas>
öğesiyle çalışmış olan herkes hata ayıklamanın son derece zor olabileceğini bilir. Bir tuvalle çalışırken genellikle uzun ve takip edilmesi zor bir çağrı listesi bulunur:
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 tuval içeriğine gönderilen talimatları yakalamak ve bunları tek tek incelemek istersiniz. Neyse ki Chrome'un Geliştirici Araçları'nda, tam da bunu yapmanızı sağlayan yeni bir Canvas Denetleme özelliği var.
Bu makalede, tuval çalışmalarınızın hatalarını ayıklamaya başlamak için bu özelliği nasıl kullanacağınızı göstereceğim. İnceleyici hem 2D hem de WebGL bağlamlarını destekler. Bu nedenle, hangisini kullanırsanız kullanın, yararlı hata ayıklama bilgilerine hemen ulaşabilirsiniz.
Başlayın
Başlamak için Chrome'da about:flags
bölümüne gidip "Geliştirici Araçları denemelerini etkinleştir" seçeneğini açık konuma getirin.
Ardından Geliştirici Araçları'na gidip sağ alt köşedeki dişli simgesine dokunun. Buradan Denemeler'e gidip Tuval denetimini etkinleştirebilirsiniz:
Değişikliklerin geçerli olması için DevTools'u kapatıp yeniden açmanız gerekir (kullanışlı bir alternatif olan Alt+R
veya Option+R
'yi 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 Tuval Profil Aracı'nın devre dışı olduğunu fark edeceksiniz. Hata ayıklamak istediğiniz bir kanvas içeren bir sayfanız olduğunda Etkinleştir'e basmanız yeterlidir. Sayfa, <canvas>
çağrılarını yakalamak için yeniden yüklenmeye hazır olur:
Bir karenin tam olarak Geliştirici Araçları Zaman Çizelgesi'nde gördüğünüzle aynı olduğu tek bir kare mi yoksa art arda kare mi çekmek istediğinize karar vermeniz gerekir.
Tek kare, geçerli karenin sonuna kadar çağrıları yakalayıp durur. Ardışık kareler ise siz durmasını söyleyene 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 ortaya çıkan kısa bir animasyon için ardışık kareleri yakalamanız gerekebilir.
Artık hazırsınız. Çekimlere başlayabiliriz.
Çerçeveleri yakalama
Ekran görüntüsü almak için Başlat'a basıp uygulamanızla her zamanki gibi etkileşimde bulunmanız yeterlidir. Bir süre sonra tekrar Geliştirici Araçları'na dönün ve art arda çekim yapıyorsanız Durdur'a basın.
Artık sol taraftaki listede, tüm <canvas>
öğelerinde yakalanan bağlam çağrısı sayısını gösteren yepyeni bir profil göreceksiniz. Profili tıkladığınızda aşağıdakine benzer bir ekran görürsünüz:
Alt bölmede, üzerinden geçebileceğiniz tüm yakalanmış karelerin listesini görürsünüz ve her birini tıkladığınızda, üst kısımdaki ekran görüntüsünde söz konusu karenin sonundaki <canvas>
öğesinin 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 çizim çağrısı gruplarını göreceksiniz. Her çizim çağrısı grubu, gruptaki son çağrı olacak tek bir çizim çağrısı içerir. Peki, beraberlik çağrısı nedir? 2D bağlam için clearRect()
, drawImage()
, fill()
, stroke()
, putImageData()
veya herhangi bir metin oluşturma işlevi kullanılırken WebGL için clear()
, drawArrays()
veya drawElements()
kullanılır. Esasen, geçerli çizim arabelleğinin içeriğini değiştirecek her şeydir. (Grafiklerle ilgilenmiyorsanız tamponu, değiştirdiğimiz piksellerden oluşan bir bit eşlem olarak düşünebilirsiniz.)
Şimdi yapmanız gereken tek şey listeyi adım adım incelemektir. Bunu çerçevede, çizim çağrısı grubunda veya çağrı düzeyinde yapabilirsiniz. Listede hangi yöntemi seçerseniz seçin (ekran görüntüsünün hemen altında hızlı bir şekilde gezinmenizi sağlayan düğmeler de vardır), o noktada bağlamı görürsünüz. Böylece, ortaya çıkan hataları hızlı bir şekilde bulup düzeltebilirsiniz.
Farkı bulun
Yararlı başka bir özellik de iki çağrı arasında hangi özelliklerin ve değişkenlerin değiştiğini görebilme olanağıdır.
Görmek için kenar çubuğu düğmesini () tıkladığınızda yeni bir görünüm açılır. Çizim çağrılarında ilerlerken güncellenen özellikleri görürsünüz. Herhangi bir arabellek veya dizi, fareyle üzerine geldiğinizde içeriklerini görüntüler.
Sesinizi duyurun!
Artık Chrome'un Geliştirici Araçları'nı kullanarak tuvalinizdeki hataları nasıl ayıklayabileceğinizi biliyorsunuz. Canvas Profiler aracıyla ilgili geri bildirimleriniz varsa lütfen hata bildiriminde bulunun veya Chrome Geliştirici Araçları Grubu'nda yayınlayın. Herhangi bir hata bulursanız veya <canvas>
incelenirken görmek istediğiniz başka bir şey olursa bize bildirin, çünkü Chrome'un araçları sadece geliştiricilerin kullanımı ve geri bildirimleri sayesinde daha iyi hale gelir.