How To Debug JavaScript with Chrome DevTools

مقدمة

تصحيح الأخطاء (Debugging) هو مهارة أساسية لكل مطور JavaScript. لحسن الحظ، يوفر متصفح Google Chrome مجموعة أدوات مطوري الويب (DevTools) المدمجة والقوية التي تجعل عملية التصحيح فعالة وبديهية. في هذا المقال، نستعرض الخطوات الأساسية للبدء في تصحيح شفرتك باستخدام Chrome DevTools.

1. فتح أدوات المطورين (DevTools)

هناك عدة طرق لفتح DevTools في Chrome:

الاختصار: اضغط F12 أو Ctrl+Shift+I (على Windows/Linux) أو Cmd+Option+I (على Mac).
القائمة: انقر بزر الماوس الأيمن في الصفحة واختر "فحص" (Inspect).
القائمة الرئيسية: من قائمة Chrome (☰) → "More Tools" → "Developer Tools".

2. التبويب "Sources" – مركز التصحيح

بعد فتح DevTools، انتقل إلى تبويب "Sources". هنا ستجد:

مستعرض الملفات (File Navigator): يعرض جميع ملفات JavaScript المرتبطة بالصفحة.
محرر الكود (Code Editor): حيث يمكنك عرض الكود المصدري ووضع نقاط التوقف (Breakpoints).
لوحة التصحيح (Debugging Panel): تحتوي على أدوات التحكم في التنفيذ ومشاهدة القيم.

3. وضع نقاط التوقف (Setting Breakpoints)

نقطة التوقف هي مكان في الكود تتوقف فيه عملية التنفيذ، مما يتيح لك فحص حالة المتغيرات والخطوات التالية.

طريقة سهلة: انقر على رقم السطر في محرر الكود لإضافة أو إزالة نقطة توقف (ستظهر علامة زرقاء).
أنواع أخرى من النقاط:

Conditional Breakpoint: انقر بزر الماوس الأيمن على رقم السطر → "Add conditional breakpoint..." وأدخل شرطاً يتوقف عنده التنفيذ.
Event Listener Breakpoints: في لوحة التصحيح، يمكنك إيقاف الكود عند حدوث حدث معين (مثل click، submit).

4. التحكم في التنفيذ (Execution Control)

بمجرد تنشيط نقطة توقف وإعادة تحميل الصفحة، ستتوقف الشفرة. استخدم أزرار التحكم في لوحة التصحيح:

Resume (F8): يستمر التنفيذ حتى النقطة التالية.
Step Over (F10): تنفيذ السطر الحالي والانتقال للسطر التالي (دون الدخول إلى الدوال).
Step Into (F11): الدخول إلى الدالة المحددة لتصحيح داخلها.
Step Out (Shift+F11): الخروج من الدالة الحالية والعودة إلى السطر الذي استدعاها.
Pause/Resume: إيقاف/استئناف البرنامج.

5. فحص المتغيرات والقيم (Inspecting Variables)

بينما تكون الشفرة متوقفة، يمكنك:

مشاهدة نطاق المتغيرات (Scope): في لوحة "Scope" سترقى قيم المتغيرات المحلية والعالمية.
Watch Expressions: في لوحة "Watch"، أضف أي تعبير (مثل اسم متغير أو عملية حسابية) لمتابعة قيمته بشكل ديناميكي.
Console: يمكنك كتابة أسماء المتغيرات مباشرة في Console للحصول على قيمتها الحالية.

6. استخدام Console.log بشكل ذكي

لا تهمل Console! يمكنك استخدامها بطريقة أكثر فعالية أثناء التصحيح:

console.log('Value:', variable): طباعة قيم متعددة.
console.table(array): عرض المصفوفات والكائنات بشكل جدول منظم.
console.trace(): طباعة مسار الاستدعاء للدوال (Call Stack).

7. تصحيح الأخطاء الديناميكية (Live Editing)

في تبويب "Sources"، يمكنك تعديل الكود مباشرة وإعادة تنفيذه دون إعادة تحميل الصفحة:

قم بتعديل الكود في المحرر.
اضغط Ctrl+S لحفظ التغييرات.
اضغط Ctrl+Shift+F10 لإعادة تنفيذ الكود المعدل.

8. تتبع الشبكة والأخطاء (Network & Errors)

تبويب "Network": تتبع طلبات HTTP ومعرفة ما إذا كان هناك خطأ في استدعاء API.
تبويب "Console": يظهر جميع أخطاء JavaScript مباشرة، ويمكنك النقر على اسم الملف والرقم للانتقال للسطر المسبب للخطأ.

9. نصائح متقدمة

Blackboxing: استبعاد مكتبات خارجية (مثل jQuery) من التصحيح عن طريق تحديدها في الإعدادات.
Workspaces: ربط مجلد محلي بمشروعك في DevTools للتحرير المباشر وحفظ التغييرات في ملفاتك الأصلية.

الخلاصة

يوفر Chrome DevTools بيئة متكاملة وفعالة لتصحيح أخطاء JavaScript. تبدأ العملية بفهم كيفية فتح الأدوات، ثم وضع نقاط التوقف، والتحكم في التنفيذ، وفحص البيانات. مع الممارسة، ستصبح قادراً على تشخيص وإصلاح المشكلات بسرعة أكبر، مما يزيد من إنتاجيتك كـ مطور.