Chrome Geliştirici Araçları ile tuval denetleme

Paul Lewis

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.

Şekil 1 - about:flags'de Geliştirici Araçları Denemelerini Etkinleştirme

Ardından Geliştirici Araçları'na gidip sağ alt köşedeki dişli simgesine dokunun. Buradan Denemeler'e gidip Tuval denetimini etkinleştirebilirsiniz:

Şekil 2 - Geliştirici Araçları denemelerinde Tuval denetimini etkinleştirme

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:

Şekil 3 - Canvas Profiler'ı açma

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.

Anahtar terim: Çerçeve, sayfanızın etkinlik döngüsü üzerinden yapılan tek bir geçişi temsil eder. Bu; JavaScript çalıştırmayı, etkinlikleri işlemeyi, DOM'yi güncellemeyi, stil değişikliklerini, düzeni gerçekleştirmeyi, sayfayı boyamayı ve birleştirmeyi içerir. Animasyonların akıcı olması için her karenin saniyenin 1/60'ından azını veya 16,6 ms'yi aşmasını istersiniz.

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.

Şekil 4 - Yakalanacak kare sayısını seçme

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:

Şekil 5 - Geliştirici Araçları'nda bir tuval profili

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.

Şekil 6 - Tuval bağlamınızı seçme

Ç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.

Şekil 7 - Listeler arasında kolayca geçiş yapmak için gezinme düğmeleri

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.