فحص لوحة الرسم باستخدام "أدوات مطوري البرامج في 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 تتيح لنا إجراء ذلك.

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

البدء

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

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

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

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

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

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

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

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

التقاط الإطارات

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

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

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

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

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

اكتشاف الفرق

وتتوفر ميزة أخرى مفيدة وهي القدرة على معرفة الخصائص والمتغيرات التي تغيرت بين طلبين.

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

استمع إليهم!

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