اختبار وتصحيح مكونات التعليمات البرمجية
أثناء قيامك بتطوير مكونات أكثر تعقيدًا، قد تحتاج إلى اختبار منطقها وتصحيح الأخطاء بطرق تفاعلية. إحدى الأدوات المفيدة المتوفرة لديك هي أداة Power Apps اختبار المكونات، والتي تسمح لك باختبار البيانات المختلفة ومدخلات السياق للتأكد من أن المكون الخاص بك يعمل بشكل صحيح. بالإضافة إلى ذلك، نظرًا لأنك تقوم ببناء مكونات التعليمات البرمجية باستخدام تقنيات الويب القياسية مثل TypeScript وCSS، وHTML، فلديك العديد من الأدوات المساعدة المقدمة من خلال هذا النظام البيئي، مثل إمكانات تصحيح أخطاء العميل المتوفرة فِي معظم المتصفحات الحديثة.
قم باختبار مكون التعليمات البرمجية الخاص بك وتصحيحه فِي Power Apps أداة اختبار المكونات
أداة Power Apps اختبار المكونات هي أداة مساعدة تم إنشاؤها بواسطة Microsoft تساعدك على عرض أحد Power Apps المكونات بسرعة فِي بيئة محلية. إذا كنت قد أكملت التمرين فِي هذه النمطية حول كتابة مكون التعليمات البرمجية، فقد رأيت هذه الأداة المساعدة قيد التنفيذ بالفعل. يمكنك بدء أداة اختبار محلية من داخل Power Apps مشروع مكون باستخدام الأمر npm start.
بعد بدء تشغيل أداة الاختبار، سيتم عرض المكون الخاص بك فِي نافذة المتصفح، مثل تلك التي قمت بإنشائها فِي التمرين السابق.
مدخلات السياق
ضمن أداة الاختبار، يمكنك تزويد المكون الخاص بك بمدخلات متنوعة لتحديد كيفية عرضه (وهو أمر مفيد لضمان عرض المكون بشكل صحيح فِي سياقات عرض مختلفة).
في القائمة المنسدلة إدخالات السياق، يمكنك تحديد عامل التصميم مثل الويب والكمبيوتر اللوحي والهاتف. يمكنك أيضًا توفير حقول عرض وارتفاع واضحة لمعرفة كيفية عرض المكون بأبعاد مختلفة.
مدخلات البيانات
تساعدك القائمة المنسدلة مدخلات البيانات على التأكد من أن المكون يعمل كما متوقع عند توفير معلمات بيانات مختلفة وتسمح لك أيضًا بتحديد كيفية عرض المكون بناءً على النوع المحدّد فِي حقل معين.
وإذا كان المكون الخاص بك عبارة عن مكون مجموعة بيانات، فيمكنك تحميل ملفات CSV باستخدام بيانات وهمية. يمكنك تصدير ملف CSV من عينة البيئة المستهدفة التي تنشئ المكون على أساسها، أو يمكنك إنشاء مكون جديد.
في المثال السابق، إذا أردت إنشاء ملف CSV جديد، فيجب أن يشبه النموذج الآتي:
الاسم، الهاتف 1، العنوان 1_المدينة
جو، 123-555-0100، سياتل
ماري، 123-555-0101، أتلانتا
ستيف، 123-555-0102، ريدموند
بعد تحميل ملف CSV بنجاح، سيعرض المكون سجلاته، وكما هو الحال مع عناصر التحكم فِي الخصائص لديك، يمكنك تعيين أنواع مختلفة كما هو محدّد بواسطة مجموعة النوع المقابل للمكون (المحددة فِي ملف ControlManifest.Input.xml الخاص بالمكون).
تصحيح أخطاء مكون تعليمات برمدية باستخدام تصحيح أخطاء المستعرض
تتميز معظم المستعرضات الحديثة بمجموعة متنوعة من إمكانيات تصحيح الأخطاء المضمنة. تتميز المستعرضات Microsoft Edge وGoogle Chrome وMozilla Firefox وApple Safari بأدوات مطور مضمنة تتيح تجارب تصحيح الأخطاء التفاعلية. لمزيد من المعلومات حول كل مستعرض، راجع الارتباطات التالية.
| المستعرض | وثائق أدوات المطور |
|---|---|
| Microsoft Edge | https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium |
| Google Chrome | https://developers.google.com/web/tools/chrome-devtools |
| Mozilla Firefox | https://developer.mozilla.org/docs/Tools/Debugger |
| Apple Safari | https://support.apple.com/guide/safari-developer/welcome/mac |
في هذا التمرين سوف تستخدم Microsoft Edge. أثناء فتح Microsoft Edge متصفح نشط Microsoft Edge، ابدأ تشغيل أدوات DevTools بالضغط على F12 على لوحة المفاتيح.
افحص HTML الخاص بك باستخدام لوحة العناصر
في DevTools، علامة التبويب الأولى المتاحة بعد الترحيب هي العناصر. حدّد العناصر وتوفر لك لوحة العناصر طريقة لعرض HTML الذي يتم تقديمه داخل الصفحة. يمكنك الانتقال إلى حيث يتم عرض عنصر التحكم الخاص بك باستخدام وظيفة الفحص، والتي يمكن الوصول إليها بإحدى الطرق الثلاث:
حدّد أيقونة تحديد عنصر فِي الصفحة لفحصها فِي الجزء العلوي الأيسر من لوحة العناصر، ثم حدّد العنصر فِي أداة اختبار المكونات. يحدّد هذا الإجراء هذا العنصر فِي العارض الخاص بك على اليمين (انظر 3 فِي الرسم البياني أدناه).
التمييز والنقر بزر الماوس الأيمن فوق عنصر داخل المكون، ثم تحديد فحص.
حدّد أي عنصر من لوحة Elements.
افحص سجلات وحدة التحكم وقم بتشغيل البرنامج النصي فِي لوحة وحدة التحكم
إحدى الآليات المتكررة لتوفير سياق تصحيح الأخطاء داخل البرنامج النصي للعميل هي استخدام التابع console.log(). وإذا كنت تريد توفير تسجيل داخل منطق المكون، فيمكنك استخدام هذه الطريقة. يتم عرض هذه السجلات فِي لوحة تحكم DevTools عند تشغيلها، مما يوفر طريقة قيمة لتتبع المنطق أثناء تشغيله داخل المكون الخاص بك. تُظهر الصورة التالية مثالاً لسجلين من مجموعة أدوات الاختبار.
كما يمكنك تشغيل البرنامج النصي الخاص بك من داخل وحدة التحكم. وقد تكون هذه الطريقة ذات قيمة لاختبار العديد من استدعاءات الطرق والمنطق من داخل سياق البيئة المباشرة.
قم بتعيين نقاط توقف مصحح الأخطاء فِي لوحة المصادر
إحدى الأدوات المساعدة الأكثر قيمة فِي DevTools هي القدرة على تعيين نقاط توقف مصحح الأخطاء فِي التعليمات البرمجية الخاصة بك حتى تتمكن من فحص المتغيرات وتدفق تنفيذ طريقتك. يعين هذا المثال نقطة توقف فِي ملف Index.ts الذي قمت بتطويره كجزء من Power Apps المكون الخاص بك. في المثال التالي، ستتوقف عند نقطة توقف عند كل تشغيل للأسلوب RefreshData.
إذا حددت زر عنصر التحكم لديك، يتم الدخول إلى نقطة التوقف هذه، ما يوفر لك القدرة على التنقل اليدوي عبر منطق معالج الأحداث. بالإضافة إلى ذلك، يمكنك فحص القيم، مثل التي تم تغييرها، كما هو موضح فِي الصورة الآتية.
