مقدمة من أكاديمية حسوب
دورة تطوير التطبيقات باستخدام لغة JavaScript
في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp.
دورة تطوير واجهات المستخدم
في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية.
دورة تطوير تطبيقات الجوال باستخدام تقنيات الويب
في هذه الدورة ستتعلم أساسيات منصة كوردوفا و كيف تستخدمها لتطوير تطبيقات متعددة المنصات, بناء تطبيق لموقع Wordpress, تطوير تطبيق قائمة مهام, تطوير تطبيق حالة الطقس, تطوير تطبيق لمطعم باستخدام إطار العمل Ionic 4.
دورة تطوير تطبيقات الويب باستخدام لغة PHP
في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل.
دورة تطوير تطبيقات الويب باستخدام لغة Ruby
في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O.
دورة علوم الحاسوب
هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب.

كيف تفعل Debug للكود خطوة خطوة

مفهوم كلمة Debug في البرمجة

عند تشغيل أي برنامج تجد أن الأوامر التي كتبتها فيه يتم تنفيذها بسرعة فائقة بدون أي توقف لدرجة أنه قد يتم تنفيذ كل أوامره حتى و إن كان يحتوي على أكثر من ألف أمر في أقل من ثانية واحدة.

عندما يصبح الكود كبيراً و يحتوي على أوامر متداخلة و تبدأ المشاكل بالظهور فيه يصبح إكتشاف الأخطاء البرمجية (Bugs) أو المنطقية (Logical Errors) الموجودة فيه أمر صعب للغاية إذا كنا سنعتمد فقط على النتيجة النهائية التي يعطينا إياها.

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

في عالم البرمجة كلمة Debug أو Debugging تعني التحكم في تنفيذ أوامر البرنامج بهدف معرفة مكان وجود الأخطاء بالضبط في الكود بهدف تصحيحها.

 

كيف أفعل Debug للكود؟ 

لمراقبة سير تنفيذ الكود خطوة خطوة (أي لتفعل Debug) يجب أن يحتوي البرنامج الذي تستخدمه في كتابة الكود على بريمج يقال له Debugger.

لحسن الحظ أغلب البرامج المخصصة لكتابة الكود مثل VSCode و Netbeans و Pycharm و Visual Studio تحتوي على Debugger جاهز للاستخدام و طريقة استخدامه هي نفسها تقريباً في جميع البرامج.

بشكل عام, لتتحكم بسير تنفيذ الأوامر يجب وضع نقطة توقف (Breakpoint) عند الأمر الذي تريد أن لا يتم تنفيذه إلى بأمر منك و تستطيع وضع أكثر من نقطة توقف إذا أردت. كما أنه يفترض تشغيل البرنامج الذي تستخدمه لكتابة الكود بوضعية تصحيح الأخطاء (Debugging Mode) حتى يتوقف عند الوصول لأي نقطة توقف.

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

 

تطبيق آلية تصحيح الأخطاء (Debugging) عملياً

من أوائل الأماكن التي يواجه فيها المبرمج المبتدئ مشاكل برمجية صعب إكتشافها هو حين يتعامل مع المصفوفات (Arrays) حيث تجده يقوم بمحاولة التعامل مع عنصر (Element) غير موجود فيها.

فمثلاً إذا كنت تتعامل مع مصفوفة تتألف من 3 عناصر و حاولت طباعة قيمة العنصر الرابع فيها فهذا الأمر سيسبب مشكلة وقت التشغيل سببها أنك تحاول طباعة قيمة عنصر غير موجود فيها.

الآن, لنوضح كيفية تطبيق هذه الآلية سنعطيك مثال لكود بسيط جداً مكتوب بلغة جافا و مع افتراض أننا نستخدم برنامج Netbeans لكتابة الكود.

لاحظ أن الكود لا يظهر فيه أي مشكلة و لكن عند التشغيل يظهر في النتيجة (Output) أنه يوجد خطأ نوعه ArrayIndexOfBoundsException في السطر رقم 10.

الآن إذا أردنا أن نفعل Debug للكود السابق سيكون علينا وضع نقطة توقف عند الكود الذي نريد تنفيذه خطوة خطوة مع التذكير بأنه يجب تشغيل البرنامج بوضع التصحيح (Debugging Mode).

في برنامج Netbeans لوضع نقطة توقف (Breakpoint) في بداية أي سطر يجب النقر على رقم السطر فقط و عندها سيظهر نقطة حمراء في بدايته كالتالي.

لتشغيل البرنامج (أي الكود المكتوب) بوضع التصحيح يجب النقر على الزر الموجود بجانب زر التشغيل كالتالي.

الآن لاحظ ما حدث عند التشغيل:

  • ظهر في أعلى برنامج Netbeans لائحة خاصة للتحكم في تنفيذ أوامر البرنامج.
  • مكان نقطة التوقف تحول إلى سهم مما يشير أن البرنامج ينتظر أمر المتابعة منك عند هذا السطر.
  • أي متغير (variable) أو مصفوفة (Array) تم إنشاؤها عند تنفيذ الكود تظهر في أسفل البرنامج في القسم Variables, و لاحظ أن المصفوفة names تظهر فيه و يمكن النقر عليها لمعرفة كم عنصر تحتوي و كيف تم ترقيمهم أيضاً.

إذا قمنا بفتح المصفوفة names فإننا سنجد فيها ثلاث عناصر كالتالي:

  • العنصر الأول إسمه names[0] و قيمته "Mhamad"
  • العنصر الثاني إسمه names[1] و قيمته "Rola"
  • العنصر الثالث إسمه names[2] و قيمته "Diana"

نلاحظ أنه لا يوجد عنصر إسمه names[3] و تذكر هذا الأمر لأنه سيحدث مشكلة لاحقة في البرنامج بسبب هذا الإسم.

الآن سننقر على زر تكبير نافذة القسم Output حتى تظهر بجانب القسم Variables حتى نرى ما سيحدث عند البدء بتنفيذ أوامر البرنامج واحداً تلو الآخر.

الآن عندما يتم تنفيذ أي أمر سيظهر في أسفل البرنامج, و إذا حدث أي خطأ عند تنفيذ أحد الأوامر سيظهر أيضاً.

إذا قمنا بالنقر على F8 أو الزر Step Over فإنه سيتم تنفيذ الأمر الموجود في السطر رقم 7 و سيظهر ناتجه في القسم Output و في حال لم يحدث أي مشكلة فإن سهم تنفيذ الأمر سينتقل إلى السطر رقم 8 كالتالي.

إذا قمنا بالنقر على F8 أو الزر Step Over من جديد فإنه سيتم تنفيذ الأمر الموجود في السطر رقم 8 و سيظهر ناتجه في القسم Output و في حال لم يحدث أي مشكلة فإن سهم تنفيذ الأمر سينتقل إلى السطر رقم 9 كالتالي.

إذا قمنا بالنقر على F8 أو الزر Step Over من جديد فإنه سيتم تنفيذ الأمر الموجود في السطر رقم 9 و سيظهر ناتجه في القسم Output و في حال لم يحدث أي مشكلة فإن سهم تنفيذ الأمر سينتقل إلى السطر رقم 10 كالتالي.

إذا قمنا بالنقر على F8 أو الزر Step Over من جديد فإنه سيتم تنفيذ الأمر الموجود في السطر رقم 10 و لكن هذه المرة لن يظهر ناتجه في القسم Output لأن تنفيذ هذا الأمر أدى لحدوث خطأ منطقي في الكود. إذاً هكذا عرفنا أن السطر رقم 10 فيه خطأ منطقي.

للتأكد أكثر من أن الخطأ حدث بسبب السطر رقم 10 يمكننا النقر على القسم Debugger Console لرؤية حالة تنفيذ الأوامر و لاحظ أنه أخبرنا أن البرنامج توقف بسبب تنفيذ الأمر الموجود في السطر رقم 10 و أخبرنا أن المشكلة هي uncompatibale source code و التي تعني أن المشكلة فيه هي مشكلة منطقية.

الآن بما أننا إنتهينا من فحص الكود و عرفنا الكود الذي يسبب المشكلة, يمكننا إيقاف عملية الفحص و إغلاق 

الآن بما أننا إنتهينا من فحص الكود و عرفنا الكود الذي يسبب المشكلة, يمكننا إيقاف عملية الفحص و إغلاق الملف 

Thread.java الذي يشير لنوع الخطأ الذي حدث.

الآن إذا قمنا بالنقر على نقطة التوقف التي قمنا بوضعها سابقاً في بداية السطر رقم 7 فإنه سيتم إزالتها و في حال قمنا بتشغيل البرنامج فإن الكود سيعمل بدون أي مشاكل كالتالي. 

 

ختام

نود الإشارة إلى أننا لم نتطرق لجميع الخيارات التي يمكن فعلها أثناء فحص الكود لأننا ركزنا على آلية فعل ذلك. يمكنك و ننصحك بتجربة كل الخيارات التي تظهر لك بنفسك لتتعلم المزيد حول ذلك و هذا بالطبع لا يؤثر أبداً على الكود. و تذكر أن عملية فحص الكود هي نفسها تقريباً في جميع البرامج التي تتيح لك القيام بذلك لهذا قم بتجربة القيام بذلك بنفسك على أي برنامج تستخدمه و إذا كنت تستخدم برنامج آخر مثل Visual Studio على سبيل المثال فكل ما عليك فعله لإيجاد شروحات حول كيفية فعل ذلك به هو البحث كالتالي: Visual Studio Debugging Tutorial

نبّهني عن
guest
6 تعليقات
الآراء المضمنة
شاهد جميع التعليقات
Mohammed Alemir
Mohammed Alemir
8 شهور سابقاً

شكرا محمد هرموش
اعطيتنا امل في الشروحات العربيه
بالتوفيق
محمد من السودان

Mhd Nuhad Sabri
8 شهور سابقاً

شكرا جزيلا لك أخ محمد.. يسعدني أن أرى مثل هذه المواقع باللغة العربية الجميلة والهادفة للتعلم بأن تنتشر في أنحاء العالم العربي.

جواد قباطي
جواد قباطي
3 شهور سابقاً

شكرا جزيلا على ما تقدمه من المعلومات
وجزاك ألله خيرا

جواد قباطي
جواد قباطي
2 شهور سابقاً

لماذا لا يحتوي موقعك فيجوال بيسك

جميع الحقوق محفوظة للموقع   ٢٠٢٠ - ٢٠١٤ ©
DMCA.com Protection Status

محتوى الموقع يخضع لرخصة (CC BY-NC-ND 4.0) التي لا تسمح باستخدام الشروحات لأغراض تجارية, إجراء تعديل عليها و نشرها في موقع آخر, وضع الشروحات في تطبيق أو في كتاب إلا في حال أخذ موافقة صريحة من إدارة الموقع.

© 2020 Harmash. All Content is licensed under CC BY-NC-ND 4.0 unless mentioned otherwise.