تصحيح الأخطاء

عند المساهمة في الـ core repo، أو كتابة loader/plugin، أو حتى العمل على مشروع معقد، تُعدّ أدوات تصحيح الأخطاء أساسية في سير عملك. سواءً أكانت المشكلة بطء الأداء في مشروع كبير أو تتبع أخطاء غير مفيد، فإن الأدوات المساعدة التالية تُسهّل عليك عملية تحديد المشكلة.

• البيانات stats data المتاحة من خلال Node و CLI.
• أدوات مطوري Chrome وأحدث إصدار من Node.js.

الإحصائيات

سواءً أردتَ تحليل هذه البيانات يدويًا أو استخدام أداة لمعالجتها، فإن بيانات stats تُعدّ مفيدة للغاية عند تصحيح أخطاء البناء. لن نتطرق إلى التفاصيل هنا لوجود صفحة كاملة مخصصة لمحتوياتها الصفحة الكاملة، ولكن اعلم أنه يمكنك استخدامها للعثور على المعلومات التالية:

• محتويات كل module.
• الـ modules الموجودة داخل كل جزء.
• إحصائيات تجميع وحل كل module.
• أخطاء البناء والتحذيرات.
• العلاقات بين الـ modules.
• وغير ذلك الكثير...

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

أدوات المطورين

على الرغم من أن عبارات console قد تكون فعّالة في الحالات البسيطة، إلا أن الحاجة قد تدعو أحيانًا إلى حلول أكثر عملية. وكما يعلم معظم مطوري واجهات المستخدم، تُعد أدوات مطوري Chrome منقذة عند تصحيح أخطاء تطبيقات الويب، ولكن استخدامها لا يقتصر على ذلك. فمنذ إصدار Node v6.3.0 والإصدارات الأحدث، يُمكن للمطورين استخدام علامة --inspect المدمجة لتصحيح أخطاء برنامج Node في أدوات المطورين.

لنبدأ باستدعاء webpack باستخدام node --inspect.

لاحظ أنه لا يمكننا تشغيل الـ scripts الخاصة بـ npm، على سبيل المثال npm run build، لذلك سيتعين علينا تحديد المسار الكامل لـ node_modules:

node --inspect ./node_modules/webpack/bin/webpack.js

والذي من المفترض أن يكون الـ Output شيئاً مثل:

Debugger listening on ws://127.0.0.1:9229/c624201a-250f-416e-a018-300bbec7be2c
For help see https://nodejs.org/en/docs/inspector

ننتقل الآن إلى chrome://inspect في المتصفح، وستجد جميع البرامج النصية النشطة التي قمت بفحصها ضمن عنوان "Remote Target". انقر على رابط "inspect" أسفل كل برنامج نصي لفتح مصحح أخطاء مخصص، أو انقر على رابط "فتح أدوات مطوري Node المخصصة" لجلسة تتصل تلقائيًا. يمكنك أيضًا تجربة إضافة NiM extension, وهي إضافة مفيدة لمتصفح Chrome تفتح تلقائيًا علامة تبويب أدوات المطورين في كل مرة تستخدم فيها الأمر --inspect لفحص برنامج نصي.

نوصي باستخدام الخيار --inspect-brk الذي يُوقف التنفيذ عند أول سطر في البرنامج النصي، مما يسمح لك بتصفح الكود المصدري (The source code) لتعيين نقاط توقف وبدء/إيقاف عملية البناء حسب رغبتك. ولا تنسَ أنه لا يزال بإمكانك تمرير وسائط إلى البرنامج النصي. على سبيل المثال، إذا كان لديك عدة ملفات تهيئة، يمكنك تمرير --config webpack.prod.js لتحديد ملف التهيئة الذي ترغب في تصحيحه.