الهدف
بنهاية الدرس تستخدم DevTools debugger — تحط نقاط إيقاف (breakpoints) وتتبّع الكود خطوة بخطوة — وتكتب vitest test يفشل وبعدين تعدّل الكود لين ينجح.
ليش هذا الحين؟
ترى كل مطور يواجه bugs — المطور المبتدئ يضيع ساعات في console.log عشوائي. المطور الذكي يفتح DevTools ويعرف المشكلة في دقائق. والـ testing مو للشركات الكبيرة — لو كتبت 5 tests لـ utility functions مهمة، تحميت من ساعات debugging مستقبلا. الهدف إنك تتعلم أدوات توصلك للحل بسرعة.
الفكرة
Debugging = عملية منهجية، مو تخمين.
المطورين يطيحون في فخ "console.log everywhere" بدل ما يفكرون بشكل منهجي. الطريقة الصحيحة:
- Reproduce: خل المشكلة تصير مرة ثانية بشكل موثوق
- Isolate: حصّر وين المشكلة تصير
- Inspect: شوف الـ state الفعلي عند نقطة المشكلة
- Fix: غيّر شي واحد وجرّب
DevTools = مختبرك الشخصي. Tabs الأهم:
- Console: errors، logs، تشغيل JavaScript مباشرة
- Sources: ملفات الـ app، breakpoints، debugger
- Network: كل الـ HTTP requests، status codes، responses
- Elements: الـ DOM الحي، CSS المطبّق، شجرة العناصر
Breakpoint = نقطة إيقاف. تقول للـ debugger: "لما تمر من هنا، وقّف." تقدر تفحص كل متغير في هاللحظة بالضبط.
Testing = تكتب العقد، مو تخمّن النتيجة.
الـ test الجيد يقول: "إذا عطيت هذي الـ function هذي الـ inputs، المفروض ترجع هالـ output." لما تغيّر الكود، الـ test يقولك لو كسرت شي.
شنو تختبر:
- دوال نقية (Pure functions) (أكثر شي مفيد للـ testing)
- Business logic (حسابات، validations، transformations)
- الحالات الحدّية (Edge cases) (empty array، null، zero)
شنو ما تختبر:
- UI بشكل مباشر (معقد ويكسر مع كل تغيير بسيط)
- Database calls (سوّ محاكاة (mock) أو اختبارات تكامل (integration tests) منفصلة)
- كل سطر من الكود (تضيع وقت على trivial code)
vitest هو الاختيار للـ Next.js projects — أسرع من Jest و config أبسط.