الخطوات
-
1
افتح لوحة Run and Debug
انقر أيقونة الخطأ في شريط النشاط على الجانب الأيسر من VS Code، أو اضغط
Ctrl+Shift+D(Cmd+Shift+Dعلى Mac). هذا يفتح لوحة Run and Debug. إن لم تُعدّ مُصحّحاً لهذا المشروع من قبل، سترى زراً كتبته create a launch.json file — انقر عليه.javascript// Keyboard shortcuts // Open Run & Debug panel: Ctrl+Shift+D (Cmd+Shift+D on Mac) // Start debugging: F5 // Stop debugging: Shift+F5 // Step over (next line): F10 // Step into (go inside): F11 // Step out (go up): Shift+F11 // Continue to breakpoint: F5 (while paused) -
2
أنشئ ملف launch.json
حين يُطلب منك اختيار بيئة، اختر Node.js. ينشئ VS Code الملف
.vscode/launch.jsonبإعداد افتراضي. الحقل الأهم هو"program"— اضبطه على نقطة دخول تطبيقك. المتغير${workspaceFolder}يُحلّ إلى جذر مشروعك المفتوح.json// .vscode/launch.json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "skipFiles": ["<node_internals>/**"], "program": "${workspaceFolder}/src/index.js" // For TypeScript with ts-node: // "program": "${workspaceFolder}/src/index.ts", // "runtimeArgs": ["-r", "ts-node/register"] } ] } -
3
ضع نقطة توقف
افتح الملف الذي تريد إيقاف التنفيذ فيه. انقر في الحافة — المساحة الفارغة يسار أرقام الأسطر. تظهر نقطة حمراء تُشير إلى نقطة التوقف. انقر عليها مرة أخرى لإزالتها. يمكنك وضع نقاط توقف عديدة في أي عدد من الملفات قبل بدء المُصحّح.
نقاط التوقف تبقى بين جلسات التصحيح (تُحفظ في حالة مساحة عمل VS Code)، لا تحتاج إلى إعادة إضافتها في كل مرة.
javascript// Example: src/index.js // Set a breakpoint on line 12 by clicking the gutter const express = require('express'); const app = express(); app.get('/users/:id', async (req, res) => { const userId = parseInt(req.params.id); // <- breakpoint here const user = await getUserById(userId); if (!user) { return res.status(404).json({ error: 'Not found' }); } res.json(user); }); -
4
شغّل المُصحّح وافحص المتغيرات
اضغط
F5أو انقر زر التشغيل الأخضر في لوحة Run and Debug. يبدأ البرنامج ويتوقف التنفيذ عند نقطة توقفك. اللوحة اليسرى الآن تعرض ثلاثة أقسام:- Variables — كل المتغيرات في النطاق عند السطر الحالي بقيمها الراهنة. وسّع الكائنات والمصفوفات.
- Watch — تعبيرات تضيفها يدوياً. انقر + لإضافة أي تعبير JS؛ يُقيَّم باستمرار أثناء السير.
- Call Stack — كل استدعاءات الدوال التي أدت إلى السطر الحالي. انقر أي إطار لفحص المتغيرات في ذلك المستوى.
javascript// When paused at a breakpoint: // - Hover over any variable to see its value in a tooltip // - In the Watch panel, add expressions like: // user.email // req.headers['authorization'] // Array.isArray(results) // results.length > 0 // The Debug Console (bottom panel) lets you run arbitrary code // in the paused context — great for one-off inspections: // > user // > Object.keys(req.body) // > new Date(user.created_at).toISOString() -
5
تنقل خطوة خطوة في الكود
أثناء الإيقاف، تتحكم في التنفيذ سطراً سطراً:
- F10 (Step Over) — نفّذ السطر الحالي وانتقل للتالي. إن استدعى السطر دالة، نفّذها دون الدخول فيها.
- F11 (Step Into) — إن استدعى السطر الحالي دالة، ادخل تلك الدالة وأوقف عند سطرها الأول.
- Shift+F11 (Step Out) — أكمل تنفيذ الدالة الحالية وأوقف عند السطر الذي استدعاها.
- F5 (Continue) — استأنف حتى نقطة التوقف التالية أو نهاية البرنامج.
javascript// Typical stepping workflow: // 1. F5 → start; pauses at first breakpoint // 2. F10 → step over to next line, inspect variables // 3. F11 → step INTO getUserById() to see what happens inside // 4. F10 → step through lines inside getUserById() // 5. Shift+F11 → step OUT back to the calling function // 6. F5 → continue to next breakpoint or program end // Use F10 most of the time. // Use F11 only when you need to go inside a specific function. // Use Shift+F11 to get out of a utility function quickly. -
6
أضف نقاط توقف مشروطة
نقطة التوقف العادية تُوقف في كل مرة يُصل إلى السطر. نقطة التوقف المشروطة تُوقف فقط حين يكون تعبير معين صحيحاً. هذا ضروري لتصحيح الأخطاء داخل الحلقات — لا تريد ضغط F5 ألف مرة للوصول إلى التكرار الذي يحدث فيه الخطأ.
انقر بزر الماوس الأيمن على نقطة توقف موجودة (أو في الحافة) واختر Add Conditional Breakpoint أو Edit Breakpoint. أدخل أي تعبير JavaScript.
javascript// Right-click the breakpoint → Edit Breakpoint → Expression // Pause only when i equals 500 // Expression: i === 500 // Pause only when user is null // Expression: user === null // Pause when a specific ID is processed // Expression: req.params.id === '42' // Hit Count: pause every N times the line is hit // (separate option in the same menu) // Useful for: pause every 100th iteration -
7
فعّل Auto Attach لعمليات الطرفية
Auto Attach يجعل VS Code يُصحّح تلقائياً أي عملية Node.js تُشغّلها في الطرفية المدمجة — دون الحاجة لـ
launch.json. افتح Command Palette (Ctrl+Shift+P) وشغّل Debug: Toggle Auto Attach. اضبطها على Smart (تربط بعمليات node في مساحة عملك، وتتجاهل الأدوات العامة).بعد تفعيلها، افتح طرفية مدمجة وشغّل
node src/index.js— يربط VS Code تلقائياً ونقاط توقفك تعمل فوراً.bash// Enable Auto Attach: // Ctrl+Shift+P → "Debug: Toggle Auto Attach" → Smart // Then in the integrated terminal: node src/index.js // VS Code automatically attaches — breakpoints are active // Works with npm scripts too: npm run dev // As long as the underlying process is Node.js, it attaches // Works with nodemon: nodemon src/index.js // Each restart re-attaches automatically -
8
الربط بعملية تعمل بالفعل
إن كانت عملية Node تعمل بالفعل (بدأت خارج VS Code، أو في حاوية Docker)، يمكنك الربط بها بدلاً من إطلاق جديدة. شغّل Node بعلامة inspect، ثم أضف إعداد "Attach" إلى
launch.json.javascript// 1. Start Node with the inspector node --inspect src/index.js // Listening on ws://127.0.0.1:9229/... // Or for immediate pause on first line: node --inspect-brk src/index.js // 2. Add to .vscode/launch.json { "type": "node", "request": "attach", "name": "Attach to Running Node", "port": 9229, "skipFiles": ["<node_internals>/**"] } // 3. In VS Code: F5 → select "Attach to Running Node" // Breakpoints activate immediately
نصائح ومحاذير
- أضف <code>"skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**"]</code> إلى إعداد الإطلاق — هذا يمنع المُصحّح من الدخول في مكتبات Node المدمجة والحزم الخارجية.
- وحدة تحكم التصحيح في الأسفل تُنفّذ كوداً في سياق الإيقاف الحالي. استخدمها لاختبار إصلاح فورياً قبل كتابته — أسرع من تعديل-حفظ-إعادة تشغيل.
- لمشاريع TypeScript، اضبط <code>"sourceMap": true</code> في <code>tsconfig.json</code> وأضف <code>"outFiles": ["${workspaceFolder}/dist/**/*.js"]</code> إلى launch.json لكي يربط VS Code JS المُصرَّف بمصدر TS.
- Logpoints (انقر يمين في الحافة → Add Logpoint) تطبع رسالة في وحدة تحكم التصحيح دون إيقاف التنفيذ — مثل <code>console.log</code> غير مُخِل لا يتطلب تغيير الكود.
- <code>node --inspect-brk</code> يُوقف عند السطر الأول من السكريبت قبل تشغيل أي كود — مفيد حين يحدث الانهيار أثناء تهيئة الوحدات.
خاتمة
مُصحّح VS Code أحد تلك الأدوات التي تبدو بطيئة في الإعداد حتى تستخدمها مرة واحدة على خطأ حقيقي. بعدها، العودة إلى console.log تشبه التصحيح بعيون مغلقة. اقضِ عشر دقائق مع launch.json ونقاط التوقف، ولن تقترب من خطأ Node.js صعب بنفس الطريقة أبداً.