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

بول لويس

مقدمة

لا يهم إذا كنت تستخدم سياقًا ثنائي الأبعاد أو 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 تتيح لنا إجراء ذلك.

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

البدء

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

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

بعد ذلك، انتقِل إلى "أدوات مطوري البرامج" وانقر على الترس في أسفل يسار الشاشة. من هناك، يمكنك الانتقال إلى التجارب وتفعيل فحص اللوحة:

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

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

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

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

الشكل 3 - التبديل إلى محلّل لوحة الرسم

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

المصطلح الرئيسي: يمثّل الإطار تمريرة واحدة عبر حلقة أحداث صفحتك. ويشمل هذا تشغيل 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. إذا كانت لديك ملاحظات حول أداة محلّل لوحة الرسم، يُرجى الإبلاغ عن خطأ أو النشر على مجموعة أدوات مطوّري البرامج في Chrome. يُرجى إخبارنا في حال العثور على أي أخطاء أو إذا كنت تريد أي شيء آخر عند فحص <canvas>، لأنّ ذلك يقتصر على استخدام المطوّرين والملاحظات التي يقدّمها المطوّرون لتحسين أدوات Chrome.