فحص لوحة الرسم باستخدام "أدوات مطوري البرامج في Chrome"

Paul Lewis

مقدمة

لا يهمّ ما إذا كنت تستخدم سياقًا ثنائي الأبعاد أو WebGL، فأي شخص سبق له العمل مع عنصر <canvas> يعرف أنّه قد يكون من الصعب جدًا تصحيح الأخطاء. يتضمن العمل مع لوحة الرسم عادةً قائمة طويلة من الاستدعاءات يصعب تتبعها:

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
}

في بعض الأحيان، قد تحتاج إلى تسجيل التعليمات المرسَلة إلى سياق لوحة الرسم والاطّلاع عليها واحدة تلو الأخرى. لحسن الحظ، هناك ميزة جديدة في "أدوات مطوري البرامج في Chrome" تُسمى "فحص Canvas" تتيح لنا إجراء ذلك.

في هذه المقالة، سأوضّح لك كيفية استخدام هذه الميزة لبدء تصحيح أخطاء عملك على لوحة الرسم. تتيح أداة الفحص سياقات ثنائية الأبعاد وWebGL، لذا أيًا كان السياق الذي تستخدمه، من المفترض أن تتمكّن من الحصول على معلومات مفيدة لتصحيح الأخطاء على الفور.

الخطوات الأولى

للبدء، انتقِل إلى about:flags في Chrome وفعِّل "تفعيل تجارب أدوات المطوّرين"

الشكل 1: تفعيل تجارب أدوات المطوّرين في about:flags

بعد ذلك، انتقِل إلى "أدوات مطوري البرامج" وانقر على رمز الترس في أسفل يسار الصفحة. من هناك، يمكنك الانتقال إلى التجارب (Experiments) وتفعيل فحص Canvas‏ (Canvas inspection):

الشكل 2: تفعيل فحص Canvas في تجارب "أدوات مطوّري البرامج"

لتطبيق التغييرات، عليك إغلاق "أدوات مطوّري البرامج" وإعادة فتحها (يمكنك استخدام Alt+R أو Option+R، وهو بديل مفيد).

عند إعادة فتح "أدوات مطوري البرامج"، انتقِل إلى قسم "الملفات الشخصية" (Profiles) وسيظهر لك خيار جديد باسم "محلّل أداء Canvas"‏ (Canvas Profiler).

في البداية، ستلاحظ أنّ ميزة Canvas Profiler غير مفعَّلة. بعد الحصول على صفحة تحتوي على لوحة تريد تصحيح أخطائها، ما عليك سوى النقر على تفعيل وستتم إعادة تحميل الصفحة لتصبح جاهزة لتسجيل طلبات <canvas>:

الشكل 3: تفعيل Canvas Profiler

عليك تحديد ما إذا كنت تريد التقاط إطار واحد أو إطارات متتالية، حيث يكون الإطار مماثلاً تمامًا لما تراه في "المخطط الزمني لأدوات مطوري البرامج".

مصطلح أساسي: يمثّل الإطار مرورًا واحدًا عبر حلقة معالجة الأحداث في صفحتك. ويشمل ذلك تشغيل JavaScript، ومعالجة الأحداث، وتعديل نموذج العناصر في المستند (DOM)، وتغيير الأنماط، وتنفيذ التنسيق، وعرض الصفحة وتركيبها. للحصول على صور متحركة سلسة، يجب أن تستغرق كل لقطة أقل من 1/60 من الثانية، أو 16.6 ملي ثانية.

يؤدي خيار إطار واحد إلى تسجيل الطلبات حتى نهاية الإطار الحالي ثم يتوقف. من ناحية أخرى، تلتقط ميزة الإطارات المتتالية جميع إطارات عناصر <canvas> إلى أن تطلب منها التوقف. يعتمد الوضع الذي تختاره على كيفية استخدامك للعنصر <canvas>. بالنسبة إلى صورة متحركة مستمرة، قد تحتاج إلى التقاط إطار واحد. بالنسبة إلى الصور المتحركة القصيرة التي تظهر استجابةً لحدث من المستخدم، قد تحتاج إلى التقاط لقطات متتالية.

الشكل 4: اختيار عدد اللقطات التي سيتم التقاطها

بهذا نكون قد انتهينا من الإعداد وأصبحنا جاهزين لبدء التسجيل.

جارٍ التقاط الإطارات

للتسجيل، ما عليك سوى النقر على بدء ثم التفاعل مع تطبيقك كالمعتاد. بعد مرور بعض الوقت، ارجع إلى "أدوات مطوّري البرامج"، وإذا كنت تسجّل بشكل متتالٍ، انقر على إيقاف.

الآن لديك ملف شخصي جديد لامع في القائمة على اليسار، مكتمل بعدد مكالمات السياق التي تم التقاطها عبر جميع عناصر <canvas>. انقر على الملف الشخصي وستظهر لك شاشة تبدو على النحو التالي:

الشكل 5: ملف شخصي للوحة الرسم في "أدوات مطوّري البرامج"

في اللوحة السفلية، ستظهر قائمة بجميع اللقطات التي تم التقاطها والتي يمكنك التنقّل بينها، وعند النقر على كل منها، ستعرض لقطة الشاشة في الأعلى حالة عنصر <canvas> في نهاية تلك اللقطة. إذا كان لديك عدة عناصر <canvas>، يمكنك اختيار العنصر الذي يظهر باستخدام القائمة أسفل لقطة الشاشة مباشرةً.

الشكل 6: اختيار سياق اللوحة

داخل الإطار، ستظهر لك مجموعات طلبات الرسم. تحتوي كل مجموعة طلبات رسم على طلب رسم واحد، وهو آخر طلب في المجموعة. إذًا، ما هو طلب الرسم؟ بالنسبة إلى سياق ثنائي الأبعاد، يشمل ذلك clearRect() أو drawImage() أو fill() أو stroke() أو putImageData() أو أي دوال لعرض النص، وبالنسبة إلى WebGL، يشمل ذلك clear() أو drawArrays() أو drawElements(). وهي في الأساس أي شيء من شأنه تغيير محتوى مخزن الرسم المؤقت الحالي. (إذا لم تكن مهتمًا بالرسومات، يمكنك اعتبار المخزن المؤقت كصورة نقطية تحتوي على وحدات بكسل نقوم بمعالجتها.)

الآن كل ما عليك فعله هو التنقل في القائمة. ويمكنك إجراء ذلك على مستوى الإطار أو مجموعة طلبات الرسم أو الطلب. أيًا كانت الطريقة التي تختارها للتنقّل في القائمة (وهناك أزرار أسفل لقطة الشاشة مباشرةً تساعدك في التنقّل بسرعة)، سيظهر لك السياق في تلك المرحلة، ما يعني أنّه يمكنك العثور على الأخطاء وإصلاحها بسرعة عند ظهورها.

الشكل 7: أزرار التنقّل لتسهيل الانتقال بين القوائم

بين الأمس والحاضر

ومن الميزات المفيدة الأخرى إمكانية معرفة السمات والمتغيّرات التي تغيّرت بين طلبَين.

للاطّلاع على ذلك، ما عليك سوى النقر على زر الشريط الجانبي () وستظهر طريقة عرض جديدة. أثناء التنقّل بين طلبات الرسم، ستظهر لك السمات التي تم تعديلها. ستعرض أي مخازن مؤقتة أو مصفوفات محتوياتها إذا مررت فوقها.

أسمِع صوتك!

أصبحت الآن تعرف كيفية تصحيح أخطاء عملك على لوحة الرسم في "أدوات مطوّري البرامج في Chrome". إذا كانت لديك ملاحظات حول أداة Canvas Profiler، يُرجى الإبلاغ عن خطأ أو نشرها في مجموعة "أدوات مطوّري البرامج في Chrome". يُرجى إعلامنا إذا عثرت على أي أخطاء أو إذا كان هناك أي شيء آخر تريد رؤيته عند فحص <canvas>، لأنّ أدوات Chrome تتحسّن فقط من خلال استخدام المطوّرين لها وملاحظاتهم.