لا تحتاج إلى أداة تصحيح أخطاء خارجية. يمكنك تصحيح أخطاء تطبيقات Node.js الخاصة بك مباشرةً في محرر VS Code باستخدام الأداة المدمجة.
تصحيح أخطاء تطبيق Node.js الخاص بك في Visual Studio Code نفسه ممكن ومباشر. يأتي محرر VS Code مزودًا بمصحح أخطاء مدمج قادر على تصحيح أخطاء أي تطبيق يستهدف وقت تشغيل Node.js. هذا يعني أنه يمكنك تصحيح أخطاء JavaScript أو أي لغة أخرى يتم تجميعها لها (مثل TypeScript).
ستوجهك هذه المقالة عبر خطوات تصحيح أخطاء تطبيق Node.js الخاص بك في VS Code. ستتعلم كيفية بدء جلسة تصحيح الأخطاء وإدراج نقاط التوقف وإرفاق عملية خارجية وتصحيح شفرة TypeScript البرمجية باستخدام خرائط المصدر.
ما تحتاجه للبدء
قبل أن تبدأ ، قم بتثبيت كل من Node.js و VS Code على جهازك المحلي. أحدث إصدار من Node.js متاح على Node.js الموقع الرسمي. وبالمثل ، بالنسبة لبرنامج Visual Studio Code ، قم بتنزيل أحدث إصدار من ملف كود VS موقع إلكتروني. للحصول على تعليمات حول كيفية إعداد VS Code على نظام Windows، اقرأ دليل الإعداد الخاص بنا.
تحتاج أيضًا إلى مشروع Node.js. يمكنك إنشاء تطبيق Node.js بسيط من البداية أو استخدام تطبيق موجود.
عملية التصحيح في رمز VS
يعد بدء جلسة تصحيح الأخطاء في محرر VS Code أمرًا سهلاً للغاية. افتح الملف باستخدام VS Code وانقر فوق ملف تشغيل وتصحيح في الشريط الجانبي (أو اضغط على Ctrl + Shift + D على لوحة المفاتيح الخاصة بك). بعد ذلك ، انقر فوق ملف تشغيل وتصحيح زر لبدء العملية.
بشكل افتراضي ، سيحاول Node.js اكتشاف بيئة تصحيح الأخطاء في مشروعك. ولكن إذا لم ينجح الاكتشاف التلقائي ، فسيطالبك بتحديد البيئة المناسبة. بالنسبة لهذا البرنامج التعليمي ، هذه البيئة هي Node.js.
بعد تحديد البيئة ، يقوم VS Code بتنشيط مصحح الأخطاء وإرفاقه بالعملية. يمكنك أن ترى مخرجاتك في ملف DEBUG CONSOLE. باستخدام شريط أدوات التصحيح في الجزء العلوي ، يمكنك تكرار التعليمات البرمجية أو إيقاف التنفيذ مؤقتًا أو إنهاء الجلسة.
لديك أيضًا خيار إنشاء ملف التكوين. ال launch.json يتيح لك file تكوين وإعداد تفاصيل التصحيح. إذا كان النص البرمجي يتطلب وسيطة ، فقم بتوفير هذه الوسيطات في ملف launch.json ملف. يمكن تعيين خيارات متعددة لكل تكوين:
{
"إصدار": "0.2.0",
"التكوينات": [
{ "يكتب": "العقدة",
"طلب": "يطلق",
"اسم": "برنامج الإطلاق",
"skipFiles": [ "/**" ],
"برنامج": "$ {workspaceFolder} \\ index.js"
}
]
}
ستلاحظ أيضًا خمس لوحات على الجانب الأيسر من المحرر. هذه اللوحات المتغيرات, يشاهد, مكدس المكالمات, نصوص محملة، و نقاط فاصلة:
عند الانتهاء من إعداد التكوين ، حدد البرنامج وقم بتنفيذه من خلال قائمة التكوين.
إرفاق عملية خارجية
هناك طريقة أخرى لإعداد جلسة تصحيح أخطاء Node.js وهي إرفاق عملية خارجية. ابدأ البرنامج بالأمر التالي:
العقدة --inspect index.js
أدخل ال -brk العلم بعد --فحص إذا كنت تريد إرفاقه قبل بدء تشغيل البرنامج.
بعد ذلك ، افتح منتقي العملية في VS Code. يسرد هذا جميع العمليات المتاحة في بيئة Node.js. لفتح المنتقي ، اضغط على السيطرة + Shift + P. والعثور على تصحيح الأخطاء: إرفاق الأمر Node.js.
انقر فوق الأمر وحدد الخيار الصحيح لبدء عملية التصحيح.
إنشاء نقطة توقف
إذا كنت تريد التوقف عند نقاط محددة في برنامجك لفحص الكود ، فاضبط نقاط التوقف هناك. يمكنك تعيين نقاط الفصل في أي مكان تقريبًا في التعليمات البرمجية الخاصة بك. يتضمن هذا المتغيرات الإعلانات والتعبيرات والتعليقات. لكن لا يمكنك تعيين نقاط توقف في تعريفات الوظائف.
يعد إنشاء نقطة توقف أمرًا بسيطًا جدًا. أثناء تحريك الماوس إلى الجانب الأيسر من أرقام الخطوط ، تظهر دائرة حمراء على كل سطر. حدد رقم السطر في التعليمات البرمجية الخاصة بك حيث تريد إدراج نقطة التوقف. ثم انقر فوق هذا السطر لإضافة نقطة التوقف:
في ال نقاط فاصلة في الجزء ، ستجد جميع نقاط التوقف ممكّنة في مشروعك. هذا هو المكان الذي ستدير فيه نقاط التوقف وتحررها وتعطيلها. يمكنك أيضًا إيقاف الكود عند طرح استثناء أو في حالات الاستثناءات غير المعلنة. يتيح لك ذلك فحص المشكلة قبل انتهاء العملية.
دعونا نرى نقاط التوقف في العمل. انقر على يطلق رمز لبدء جلسة التصحيح. سيتوقف البرنامج مؤقتًا عند نقطة التوقف الأولى وسيعطي قيمة الاستقصاء:
يمكنك النقر فوق يكمل رمز (أو اضغط F5) لنقل البرنامج إلى نقطة التوقف التالية. سيستمر هذا حتى تصل إلى نهاية البرنامج.
تصحيح أخطاء TypeScript باستخدام خرائط المصدر
مع استمرار تزايد شعبية Typescript ، لا بد أن تزداد كمية مشاريع Node.js المكتوبة في TypeScript. لحسن الحظ ، يمكنك أيضًا تصحيح أخطاء المشاريع المستندة إلى TypeScript باستخدام VS Code.
أولاً ، قم بإنشاء ملف tsconfig.json ملف في الدليل الجذر لمشروعك (إذا لم يكن قد تم إنشاؤه بالفعل) وقم بتمكين خرائط المصدر:
{ "خيارات المترجم": { "sourceMaps": حقيقي }}
بعد ذلك ، قم بإرفاق العملية قيد التشغيل وتعيين نقاط التوقف في ملف TypeScript. سيجد Visual Studio Code خرائط المصدر ويستخدمها.
يمكنك إخبار VS Code صراحة بمكان العثور على خرائط المصدر. للقيام بذلك ، أضف ملف خارج الملفات السمة في ملف تكوين الإطلاق الخاص بك وأشرها إلى الموقع الدقيق لخرائط المصدر الخاصة بك:
{
"إصدار": "0.2.0",
"التكوينات": [ {
"يكتب": "العقدة",
"طلب": "يطلق",
"اسم": "برنامج الإطلاق",
"skipFiles": [ "/**" ],
"برنامج": "$ {workspaceFolder} \\ index.js",
"outFiles": "$ {workspaceFolder} \\ index.js",
}
]
}
إذا كنت تستخدم ts- عقدة لتشغيل مشروعك بدون خطوة إنشاء ، استخدم هذا بدلاً من التكوين أعلاه:
{
"إصدار": "0.2.0",
"التكوينات": [ {
"يكتب": "عقدة pwa",
"طلب": "يطلق",
"اسم": "تشغيل الخادم",
"skipFiles": [ "/**" ],
"runtimeArgs": [ "-r", "ts-node / Register" ],
"أرجس": [ "$ {workspaceFolder} /src/server.ts" ]
}]
}
نظرًا لعدم وجود سمة البرنامج ، وقت التشغيل أرجس السجلات ts- عقدة كمعالج لملفات TypeScript. الحجة الأولى ل أرجس هو ملف الدخول للبرنامج. الآن يمكنك بدء جلسة التصحيح الخاصة بك. إذا كنت تقوم بالتطوير باستخدام Vanilla JavaScript أو إطار عمل للواجهة الأمامية ، فيمكنك أيضًا تصحيح كود JavaScript في المتصفح.
ميزات أخرى في Visual Studio Code
Visual Studio Code هو محرر شفرة مصدر قوي ومليء بالميزات المذهلة. قمنا بتغطية أداة مصحح الأخطاء المدمجة في VS Code. لقد أوضحنا أيضًا كيف يمكنك استخدامه لتصحيح أخطاء تطبيق Node.js الخاص بك.
ولكن هناك الكثير من الميزات المفيدة الأخرى في VS Code. بينما قد تكون معتادًا على بعضها ، قد يكون بعضها جديدًا تمامًا بالنسبة لك. في هذه الحالة ، قد يثير اهتمامك التعرف على هذه الميزات وكيفية استخدامها.