في هذا الدرس 5تصفّح المواضيع
تصحيح الأخطاء الاحترافي (Debugging) ليس تخميناً عشوائياً وتجربة تغييرات عمياء! بل يعتمد منهجية علمية هادئة من أربع خطوات: إعادة إنتاج المشكلة بانتظام ← قراءة مكدس الاستدعاءات ← تجميد السطر وفحص القيم ← معالجة السبب الجذري.
يمنحك مكدس الخطأ (Stack Trace) ثلاثة مفاتيح فورية: نوع الخطأ، ورسالته الدقيقة، ورقم السطر واسم الدالة التي وقع فيها الانهيار.
إلى جانب console.log() المعتادة، يزودك المتصفح بعائلة دوال تشخيصية متخصصة تختصر وقت الفحص بشدة:
| الدالة التشخيصية | الميزة العملية في الفحص | نصيحة الاستخدام الأفضل |
|---|---|---|
console.log({ qty, price }) | تطبع اسم كل متغير بجانب قيمته تلقائياً | تمنع التباس الأرقام المطبوعة بلا عنوان |
console.table(records) | تعرض مصفوفات الكائنات في جدول منظم | مثالية لفحص ردود JSON واكتشاف الحقول الناقصة |
console.assert(cond, msg) | لا تطبع تحذيراً إلا عند فشل الشرط فقط | مراقبة الفرضيات المنطقية بهدوء |
console.time / timeEnd | تقيس الزمن المنقضي بالمللي ثانية بدقة | مقارنة سرعة خوارزميتين عملياً |
console.trace() | تطبع تسلسل الدوال التي أدت للسطر الحالي | كشف الجهة التي استدعت دالة بالخطأ |
const items = [{ sku: 'A1', price: '25' }, { sku: 'B2', price: 40 }];
console.table(items);
const badType = typeof items[0].price !== 'number';
console.assert(!badType, 'Price must be a number!');
document.getElementById('dbg-out').textContent =
'Caught string price bug: ' + JSON.stringify({ firstType: typeof items[0].price });بينما تكتفي الطباعة بعرض ما تذكرت طباعته فقط، تقوم نقاط التوقف (Breakpoints) بتجميد التنفيذ لحظياً لتفحص كافة المتغيرات المحلية والخارجية على الهواء مباشرة بطريقتين:
- لوحة Sources في أدوات المطور: بالنقر على رقم السطر، أو بوضع نقطة توقف شرطية (Conditional Breakpoint) مثل
total < 0فلا يتوقف التنفيذ وسط ألف دورة إلا عند العنصر المسبب للخلل! - التعليمة البرمجية
debugger;: توقف التنفيذ تلقائياً عند ذلك السطر متى كانت أدوات المطور مفتوحة (ويجب دائماً حذفها من الكود قبل نشر المشروع في الإنتاج!).
function calcDiscount(price, pct) {
debugger;
const cut = price * (pct / 100);
return price - cut;
}
document.getElementById('run-dbg').addEventListener('click', () => {
const finalPrice = calcDiscount(200, 15);
document.getElementById('d-res').textContent = 'Final: $' + finalPrice;
});بمجرد توقف التنفيذ عند نقطة توقف في تبويب Sources، تمنحك أزرار التحكم الأربعة قدرة المشي داخل الكود خطوة بخطوة مع مراقبة تغير القيم في لوحتي Scope وWatch:
- استئناف (Resume —
F8): متابعة التشغيل الطبيعي حتى نقطة التوقف التالية. - تخطي السطر (Step Over —
F10): تنفيذ السطر الحالي كاملاً والوقوف على السطر الذي يليه مباشرة. - الدخول للدالة (Step Into —
F11): الغوص داخل الدالة المستدعاة في هذا السطر لتتبع تفاصيلها الداخلية. - الخروج للمستدعي (Step Out —
Shift+F11): إكمال الدالة الفرعية الحالية والعودة للوقوف عند السطر الذي استدعاها.
احتفظ بقائمة الفحص السريعة هذه؛ فهي تكشف أكثر من 80% من الأخطاء البرمجية اليومية في ثوانٍ معدودة:
- جمع قيم الحقول كنصوص: خاصية
input.valueنص دائماً؛ فحولها بـNumber()قبل الجمع الحسابي! - خطأ إملائي في معرف العنصر: كتابة معرف غير موجود في
getElementByIdتُرجعnullوتسبب خطأ قراءة خاصية منnull. - نسيان
returnمع الأقواس المعقوفة: كتابةarr.map((x) => { x * 2; })تُرجعundefined! - نسيان كلمة
await: محاولة قراءة نتيجةres.json()بدونawaitتعامل الوعد المعلق كأنه البيانات نفسها. - تجاوز حدود المصفوفة بواحد: كتابة الشرط
i <= arr.lengthبدل<تقرأ فهرساً خارج النطاق يساويundefined!
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتممت الفصل العشرين بإتقان منهجية تصحيح الأخطاء عبر قراءة مكدس الاستدعاءات، واستخدام console.table وconsole.assert، وإيقاف التنفيذ بنقاط التوقف وتعليمة debugger، والتنقل السطري وتجنب أشهر الأخطاء المتكررة. الخطوة التالية: انطلق إلى الفصل الحادي والعشرين (الأخير) بدءاً من درس «دوال الإنشاء المتقدمة في كائن المستند DOM»!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Stack Trace مكدس الاستدعاءات Stack Trace
- التقرير التسلسلي المرافق للخطأ والذي يعرض نوعه ورسالته وسلسلة الدوال وأرقام الأسطر المؤدية إليه.
- للمراجعة
- 02 debugger Statement التعليمة البرمجية debugger
- كلمة محجوزة تجمد تنفيذ السكربت عند السطر الحالي لفحص المتغيرات متى كانت أدوات المطور مفتوحة.
- للمراجعة
- 03 Conditional Breakpoint نقطة التوقف الشرطية
- نقطة توقف مقيدة بشرط منطقي لا تجمد الحلقة إلا عند تحقق الحالة الشاذة المراد فحصها.
- للمراجعة
- 04 console.table الدالة التشخيصية console.table
- دالة تعرض المصفوفات والكائنات في جدول منظم الأعمدة والصفوف داخل لوحة المطور.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 IDE IDE
- Integrated Development Environment
- بيئة التطوير المتكاملة التي تدعم ربط نقاط التوقف وفحص المتغيرات مع المتصفح.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- شجرة عناصر الصفحة التي تتيح وضع نقاط توقف تلقائية عند تعديل أي عنصر فرعي.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
حوّل السعر النصي "25" إلى الرقم 25 بدون علامتي تنصيص في محرر التجربة الأول وتأكد من تحول النوع إلى number.
-
افتح أدوات المطور (F12) ثم اضغط زر التشغيل في محرر التجربة الثاني لمشاهدة توقف التنفيذ وفحص المتغيرات الحية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.