Visual Studio Code में जावास्क्रिप्ट को किस प्रकार डिबग करें

संपादित 3 सप्ताह पहले द्वारा ExtremeHow संपादकीय टीम

विजुअल स्टूडियो कोडडिबगिंगजावास्क्रिप्टएक्सटेंशन्सकॉन्फ़िगरेशनउपकरणब्रेकपॉइंट्सकंसोलएकीकरणसेटअपस्रोत कोडविकासवेब विकाससमस्या निवारणत्रुटियाँप्रोग्रामिंगNode.js नोड.जे.एसवर्कफ़्लोदक्षतापरीक्षण

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

अपने वातावरण की स्थापना

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

आवश्यक एक्सटेंशनों की स्थापना

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

• डिबगर फॉर क्रोम: यह एक्सटेंशन आपको गूगल क्रोम में चल रहे क्लाइंट-साइड जावास्क्रिप्ट को डिबग करने की अनुमति देता है।
• Node.js एक्सटेंशन पैक: यह एक्सटेंशन का बंडल आपके लिए उपयोगी है यदि आप Node.js एप्लिकेशन के साथ काम कर रहे हैं।

इन एक्सटेंशनों को स्थापित करने के लिए, वीएस कोड खोलें, खिड़की के साइड में एक्टिविटी बार पर एक्सटेंशन आइकन पर क्लिक करें, और प्रत्येक एक्सटेंशन का नाम खोजें।

डिबगिंग सत्र शुरू करना

एक बार आपका वातावरण सेट हो जाने के बाद, आप डिबगिंग सत्र शुरू कर सकते हैं। इन कदमों का पालन करें:

1. अपनी जावास्क्रिप्ट फाइल खोलें: वीएस कोड में, उस फोल्डर को खोलें जिसमें आपकी जावास्क्रिप्ट परियोजना है और उस फाइल का पता लगाएं जिसे आप डिबग करना चाहते हैं।
2. ब्रेकपॉइंट सेट करें: ब्रेकपॉइंट एक मार्कर है जो डिबगर को आपके कोड के एक विशिष्ट बिंदु पर निष्पादन को रोकने के लिए कहता है। एक ब्रेकपॉइंट सेट करने के लिए, एडिटर में लाइन नंबर के बाईं ओर मार्जिन पर क्लिक करें जहां आपकी जावास्क्रिप्ट कोड स्थित है। ब्रेकपॉइंट सेट हो जाने का संकेत देने के लिए एक लाल बिंदु दिखाई देगा।
3. डिबगिंग शुरू करें: खिड़की के साइड पर एक्टिविटी बार में डिबग आइकन पर क्लिक करें। हरा प्ले बटन क्लिक करें (या F5 दबाएं) डिबगिंग सत्र शुरू करने के लिए। यदि आपसे कोई वातावरण चुनने के लिए कहा जाता है, तो चुने "Node.js" या "क्रोम", यह निर्भर करता है कि आप अपने कोड को कहां चलाना चाहते हैं।

ब्रेकपॉइंट्स का उपयोग

ब्रेकपॉइंट्स डिबगिंग में शक्तिशाली उपकरण होते हैं जो आपको अपने कोड को रोककर इसकी स्थिति का निरीक्षण करने की अनुमति देते हैं। वेरिएबल्स और उनके मानों की जाँच करके, आप जान सकते हैं कि आपका कोड कैसे काम कर रहा है।

ब्रेकपॉइंट्स को प्रबंधित करने के लिए:

• ब्रेकपॉइंट्स को अक्षम/सक्षम करें: एक मौजूदा ब्रेकपॉइंट को दायां क्लिक करके अक्षम या सक्षम करें। एक ब्रेकपॉइंट को अक्षम करने का अर्थ है कि डिबगर इसे निष्पादन के दौरान अनदेखा करेगा।
• एक ब्रेकपॉइंट हटाएं: एडिटर में लाल बिंदु पर क्लिक करें ताकि ब्रेकपॉइंट हट जाए।
• शर्तीय ब्रेकपॉइंट: ब्रेकपॉइंट पर दायां क्लिक करें और "शर्तीय ब्रेकपॉइंट जोड़ें" चुनें। यह केवल निर्दिष्ट स्थिति पूरी होने पर कोड निष्पादन को रोकने की अनुमति देता है।

कोड के माध्यम से आगे बढ़ना

एक बार ब्रेकपॉइंट प्रभावित हो जाने के बाद, आपके पास अपने कोड में आगे बढ़ने के लिए कई विकल्प उपलब्ध होते हैं:

• जारी रखें >| : यह अगले ब्रेकपॉइंट के मिलने तक निष्पादन जारी रखता है।
• स्टेप ओवर >| : यह वर्तमान कार्य में अगली पंक्ति की ओर बढ़ता है, उस पंक्ति में पाए गए कार्यों या तरीकों में कदम रखे बिना।
• >> स्टेप इन: यह उस पंक्ति में उपयोग किए गए कार्यों या तरीकों के माध्यम से आपको ले जाता है और उस कार्य के अंदर पहले संभावित बिंदु पर रुकता है।
• स्टेप आउट |< : यदि आपने किसी कार्य में प्रवेश किया है और उसे पूरा करना चाहते हैं और मुख्य कॉलिंग कार्य में लौटना चाहते हैं, तो इस विकल्प का उपयोग करके वर्तमान कार्य से बाहर निकलें।

वेरिएबल्स का निरीक्षण

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

• वेरिएबल्स पैनल: डिबग करते समय, डिबग अनुभाग में वेरिएबल्स पैनल को देखें। यह सभी वर्तमान स्कोप में वेरिएबल्स और उनके मान दर्शाता है।
• वॉच विंडो: वेरिएबल्स को वॉच विंडो में जोड़ें ताकि उनके मानों की निरंतर निगरानी की जा सके। एक वेरिएबल जोड़ने के लिए, एडिटर में उस पर दायां क्लिक करें और "वॉच में जोड़ें" चुनें।
• होवर: अपने कोड में एक वेरिएबल पर होवर करें ताकि उसका वर्तमान मूल्य देख सकें।

कंसोल और डिबग कंसोल

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

मानक कंसोल अभी भी आपके नियमित उपयोग के लिए उपलब्ध है, जो आमतौर पर जावास्क्रिप्ट में console.log() वक्तव्यों के साथ एकीकृत होता है। यह निष्पादन के दौरान डेटा में परिवर्तन को ट्रैक करने का एक और सरल, लेकिन प्रभावी तरीका है।

उदाहरण

डिबगिंग प्रक्रिया को समझने के लिए एक सरल प्रोग्राम पर विचार करें:

function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } const result1 = add(10, 5); console.log('जोड़ का परिणाम: ', result1); const result2 = subtract(10, 5); console.log('घटाव का परिणाम: ', result2);

इस जावास्क्रिप्ट प्रोग्राम को डिबग करने के लिए:

• फाइल खोलें विजुअल स्टूडियो कोड में।
• ब्रेकपॉइंट्स सेट करें add() और subtract() कार्यों में।
• डिबगिंग शुरू करें वीएस कोड डिबगर का उपयोग करके F5 दबाएं।
• जैसे ही कोड निष्पादन आपके ब्रेकपॉइंट तक पहुंचता है, मूल्यों का निरीक्षण करें a और b के।

निष्कर्ष

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

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

  इस लेख को साझा करें

यदि आपको लेख की सामग्री में कुछ गलत लगता है, आप कर सकते हैं अपडेट का अनुरोध करें