विज़ुअल स्टूडियो कोड में Node.js एप्लिकेशन को डीबग कैसे करें

विजुअल स्टूडियो कोड में अपने Node.js एप्लिकेशन को डिबग करना संभव और सीधा है। वीएस कोड संपादक एक अंतर्निहित डीबगर के साथ आता है जो नोड.जेएस रनटाइम को लक्षित करने वाले किसी भी एप्लिकेशन को डीबग करने में सक्षम है। इसका मतलब है कि आप जावास्क्रिप्ट या किसी अन्य भाषा को डिबग कर सकते हैं जो इसे संकलित करती है (जैसे टाइपस्क्रिप्ट)।

यह लेख आपको VS कोड में आपके Node.js ऐप्लिकेशन को डीबग करने के चरणों के बारे में बताएगा। आप सीखेंगे कि डिबग सत्र कैसे शुरू करें, ब्रेकप्वाइंट डालें, बाहरी प्रक्रिया संलग्न करें और स्रोत मानचित्रों का उपयोग करके टाइपस्क्रिप्ट कोड डीबग करें।

आरंभ करने के लिए आपको क्या चाहिए

प्रारंभ करने से पहले, अपने स्थानीय मशीन पर Node.js और VS कोड दोनों को स्थापित करें। Node.js का नवीनतम संस्करण पर उपलब्ध है नोड.जेएस आधिकारिक वेबसाइट। इसी तरह, विज़ुअल स्टूडियो कोड के लिए, नवीनतम संस्करण को वीएस कोड वेबसाइट। निर्देश के लिए विंडोज पर वीएस कोड कैसे सेट करें, हमारी सेटअप मार्गदर्शिका पढ़ें।

आपको Node.js प्रोजेक्ट की भी आवश्यकता है। आप शुरू से ही एक साधारण Node.js एप्लिकेशन बना सकते हैं या किसी मौजूदा एप्लिकेशन का उपयोग करें।

वीएस कोड में डिबगिंग प्रक्रिया

वीएस कोड संपादक में डिबग सत्र शुरू करना बहुत सीधा है। फ़ाइल को VS कोड के साथ खोलें और क्लिक करें चलाएँ और डिबग करें साइडबार में आइकन (या दबाएं CTRL+SHIFT+D आपके कीबोर्ड पर)। अगला, क्लिक करें चलाएँ और डिबग करें प्रक्रिया शुरू करने के लिए बटन।

डिफ़ॉल्ट रूप से, Node.js आपके प्रोजेक्ट के डिबग वातावरण का पता लगाने की कोशिश करेगा। लेकिन अगर ऑटो-डिटेक्शन असफल होता है, तो यह आपको सही वातावरण चुनने के लिए प्रेरित करता है। इस ट्यूटोरियल के लिए, वह वातावरण Node.js है।

आपके द्वारा पर्यावरण का चयन करने के बाद, वीएस कोड डीबगर को सक्रिय करता है और इसे प्रक्रिया से जोड़ता है। में अपना आउटपुट देख सकते हैं डिबग कंसोल. शीर्ष पर डिबग टूलबार का उपयोग करके, आप कोड के माध्यम से पुनरावृति कर सकते हैं, निष्पादन रोक सकते हैं या सत्र समाप्त कर सकते हैं।

आपके पास कॉन्फ़िगरेशन फ़ाइल बनाने का विकल्प भी है। लॉन्च.जेसन फ़ाइल आपको डिबग विवरण को कॉन्फ़िगर और सेट करने देती है। यदि आपकी स्क्रिप्ट को एक तर्क की आवश्यकता है, तो इन तर्कों की आपूर्ति करें लॉन्च.जेसन फ़ाइल। प्रत्येक कॉन्फ़िगरेशन पर एकाधिक विकल्प सेट किए जा सकते हैं:

{ 
"संस्करण": "0.2.0", 
"विन्यास": [ 
 { "प्रकार": "नोड", 
"अनुरोध": "शुरू करना", 
"नाम": "लॉन्च प्रोग्राम", 
"छोड़ें फ़ाइलें": [ "/**" ], 
"कार्यक्रम": "${workspaceFolder}\\index.js"
 } 
 ]
}

आपको संपादक के बाईं ओर पांच पैनल भी दिखाई देंगे। ये पैनल हैं चर, घड़ी, कॉल स्टैक, लोडेड स्क्रिप्ट्स, और विराम बिंदु:

जब आप कॉन्फ़िगरेशन सेट करना समाप्त कर लें, तो कॉन्फ़िगरेशन मेनू के माध्यम से प्रोग्राम का चयन करें और निष्पादित करें।

एक बाहरी प्रक्रिया संलग्न करें

Node.js डिबगिंग सत्र की स्थापना के लिए एक अन्य विधि बाहरी प्रक्रिया को संलग्न करना है। निम्न आदेश के साथ प्रोग्राम प्रारंभ करें:

नोड --inspect index.js

प्रवेश कराएं -brk के बाद झंडा --निरीक्षण यदि आप इसे प्रोग्राम चलाने से पहले संलग्न करना चाहते हैं।

अगला, वीएस कोड में प्रोसेस पिकर खोलें। यह Node.js वातावरण में उपलब्ध सभी प्रक्रियाओं को सूचीबद्ध करता है। पिकर खोलने के लिए, दबाएं CTRL + SHIFT + P और खोजो डीबग: Node.js कमांड से अटैच करें.

कमांड पर क्लिक करें और डिबग प्रक्रिया शुरू करने के लिए सही विकल्प चुनें।

ब्रेकप्वाइंट बनाना

यदि आप कोड का निरीक्षण करने के लिए अपने प्रोग्राम में विशिष्ट बिंदुओं पर रुकना चाहते हैं, तो वहां ब्रेकप्वाइंट सेट करें। आप अपने कोड में लगभग कहीं भी ब्रेकप्वाइंट सेट कर सकते हैं। इसमें वेरिएबल्स डिक्लेरेशन, एक्सप्रेशंस और कमेंट्स शामिल हैं। लेकिन आप फ़ंक्शन घोषणाओं में ब्रेकप्वाइंट सेट नहीं कर सकते।

ब्रेकप्वाइंट बनाना बहुत सीधा है। जैसे ही आप अपने माउस को पंक्ति संख्या के बाईं ओर ले जाते हैं, प्रत्येक पंक्ति पर एक लाल वृत्त दिखाई देता है। अपने कोड में लाइन नंबर की पहचान करें जहां आप ब्रेकपॉइंट डालना चाहते हैं। फिर ब्रेकपॉइंट जोड़ने के लिए उस लाइन पर क्लिक करें:

में विराम बिंदु फलक में, आपको अपने प्रोजेक्ट में सक्षम किए गए सभी ब्रेकप्वाइंट मिलेंगे। यह वह जगह है जहां आप ब्रेकप्वाइंट प्रबंधित, संपादित और अक्षम करेंगे। जब कोई अपवाद फेंकता है या बिना किसी अपवाद के मामले में आप कोड को रोक सकते हैं। यह प्रक्रिया से बाहर निकलने से पहले आपको समस्या का निरीक्षण करने की अनुमति देता है।

आइए कार्रवाई में ब्रेकप्वाइंट देखें। क्लिक करें शुरू करना डिबगिंग सत्र प्रारंभ करने के लिए आइकन। कार्यक्रम पहले ब्रेकप्वाइंट पर रुकेगा और निरीक्षण के लिए मूल्य देगा:

आप क्लिक कर सकते हैं जारी रखना आइकन (या F5 दबाएं) प्रोग्राम को अगले ब्रेकपॉइंट पर ले जाने के लिए। यह तब तक जारी रहेगा जब तक आप कार्यक्रम के अंत में नहीं पहुंच जाते।

स्रोत मैप्स के साथ डिबगिंग टाइपस्क्रिप्ट

जैसे-जैसे टाइपस्क्रिप्ट अधिक लोकप्रिय होता जा रहा है, टाइपस्क्रिप्ट में लिखी गई Node.js परियोजनाओं की मात्रा में वृद्धि होना तय है। सौभाग्य से, आप वीएस कोड के साथ टाइपस्क्रिप्ट-आधारित परियोजनाओं को भी डिबग कर सकते हैं।

सबसे पहले, एक बनाएँ tsconfig.json अपने प्रोजेक्ट की रूट डायरेक्टरी में फ़ाइल करें (यदि यह पहले से नहीं बनाई गई है) और स्रोत मानचित्र सक्षम करें:

{ "संकलक विकल्प": { "स्रोत मानचित्र": सत्य }}

अगला, चल रही प्रक्रिया को संलग्न करें और अपनी टाइपस्क्रिप्ट फ़ाइल में ब्रेकप्वाइंट सेट करें। विज़ुअल स्टूडियो कोड स्रोत मानचित्रों को खोजेगा और उनका उपयोग करेगा।

आप वीएस कोड को स्पष्ट रूप से बता सकते हैं कि स्रोत मानचित्र कहां खोजें। ऐसा करने के लिए, एक जोड़ें outFiles अपनी लॉन्च कॉन्फ़िगरेशन फ़ाइल में विशेषता और इसे अपने स्रोत मानचित्रों के सटीक स्थान पर इंगित करें:

{ 
"संस्करण": "0.2.0", 
"विन्यास": [ { 
"प्रकार": "नोड", 
"अनुरोध": "शुरू करना", 
"नाम": "लॉन्च प्रोग्राम", 
"छोड़ें फ़ाइलें": [ "/**" ], 
"कार्यक्रम": "${workspaceFolder}\\index.js", 
"आउटफाइल्स": "${workspaceFolder}\\index.js", 
 } 
 ]
}

यदि आप प्रयोग कर रहे हैं टीएस-नोड अपने प्रोजेक्ट को बिना बिल्ड चरण के चलाने के लिए, उपरोक्त कॉन्फ़िगरेशन के बजाय इसका उपयोग करें:

{ 
"संस्करण": "0.2.0", 
"विन्यास": [ { 
"प्रकार": "प्वा-नोड", 
"अनुरोध": "शुरू करना", 
"नाम": "लॉन्च सर्वर", 
"छोड़ें फ़ाइलें": [ "/**" ], 
"रनटाइमअर्ग": [ "-आर", "टीएस-नोड/रजिस्टर" ], 
"तर्क": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

चूंकि कोई प्रोग्राम विशेषता नहीं है, रनटाइम तर्क रजिस्टर टीएस-नोड टाइपस्क्रिप्ट फ़ाइलों के लिए हैंडलर के रूप में। के लिए पहला तर्क तर्क कार्यक्रम के लिए प्रविष्टि फ़ाइल है। अब आप अपना डिबगिंग सत्र शुरू कर सकते हैं। यदि आप वैनिला जावास्क्रिप्ट या फ्रंट-एंड फ्रेमवर्क के साथ विकास कर रहे हैं, तो आप भी कर सकते हैं ब्राउज़र में जावास्क्रिप्ट कोड डीबग करें।

विजुअल स्टूडियो कोड में अन्य विशेषताएं

विज़ुअल स्टूडियो कोड एक शक्तिशाली स्रोत कोड संपादक है जो अद्भुत विशेषताओं से भरा हुआ है। हमने वीएस कोड के अंतर्निर्मित डीबगर टूल को कवर किया। हमने यह भी प्रदर्शित किया कि आप अपने Node.js एप्लिकेशन को डीबग करने के लिए इसका उपयोग कैसे कर सकते हैं।

लेकिन वीएस कोड में कई अन्य उपयोगी विशेषताएं हैं। जबकि आप उनमें से कुछ से परिचित हो सकते हैं, कुछ आपके लिए बिल्कुल नए हो सकते हैं। उस स्थिति में, आपको इन सुविधाओं के बारे में जानने और उनका उपयोग करने के तरीके के बारे में जानने में रुचि हो सकती है।