फ्रंट एंड और बैक एंड डिबगिंग

मूल लेख - " क्रोम में जावास्क्रिप्ट को कैसे डीबग करें त्वरित और आसान ।"

अवलोकन

इस लेख में, आप सीखेंगे कि Chrome DevTools और VS कोड का उपयोग करके जावास्क्रिप्ट कोड को फ्रंट एंड बैक एंड पर डिबग कैसे करें।

लक्ष्य

1. दृश्यपटल और कोणीय को डीबग करना सीखें
2. विश्लेषण करें कि Node.js को कैसे डीबग करें

फ्रंट-एंड डिबगिंग (जावास्क्रिप्ट, कोणीय)

वर्तमान में, Chrome DevTools और Firefox Developer Tools जैसे बहुत सारे उपकरण फ्रंट-एंड डिबगिंग का समर्थन करते हैं। जबकि ये दो सबसे लोकप्रिय हैं, अन्य ब्राउज़रों के पास अपने स्वयं के उपकरण भी हैं। आइए हमारे बग-एलिमेंटिंग एडवेंचर के लिए Chrome DevTools पर विचार करें।

जावास्क्रिप्ट डिबगिंग

चलो ईमानदार हो, डिबगिंग कभी-कभी वास्तव में समय लेने वाली हो सकती है। विशेष रूप से, यदि सरल कमांड जैसे कंसोल.लॉग () या विंडो.अलर्ट ()।

आपको अतिरिक्त कोड लिखना और फिर निकालना होगा, कभी-कभी, आप ऐसे कोड भी शामिल कर सकते हैं जिनमें ये विधियाँ शामिल हैं (भले ही आपको लगा हो कि आपने उन्हें हटा दिया था)। लेकिन अगर कोई लिंटर सेट किया गया है, तो कोड में कंसोल या अलर्ट के तरीकों पर प्रकाश डाला जाएगा।

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

चलो जावास्क्रिप्ट विधि getData () के साथ एक सरल वेब पेज बनाते हैं जो केवल नाम इनपुट फ़ील्ड से डेटा एकत्र करता है, डेटास्पैन आईडी के साथ एक डोम नोड बनाता है, और फिर उस DOM तत्व में इनपुट फ़ील्ड मान जोड़ता है।

यहां बताया गया है कि हमारा पृष्ठ कैसा दिखेगा:

HTML में:



जावास्क्रिप्ट में:



आइए इसे app.j s नाम के तहत सेव करें।

यह पेज ब्राउज़र में कैसे दिखाई देगा:



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



हालांकि, यह सबसे आदिम दृष्टिकोण है।

इसलिए, इसके बजाय, हम Chrome DevTools का उपयोग करेंगे और यह सत्यापित करेंगे कि हम ब्रेकपॉइंट्स का उपयोग करते हुए योजना के अनुसार काम करते हैं।

ब्रेकपॉइंट केवल कोड की एक पंक्ति है जिस पर हम यह जांचने के लिए कोड चलाना बंद करना चाहते हैं कि यह कैसे काम करता है (या ठीक से काम नहीं करता है)।

वापस ट्रैक पर, Google Chrome में पेज लॉन्च करें और:

1. ब्राउज़र के ऊपरी-दाएं कोने में Chrome डेवलप टूल को खोलने के लिए, Google Chrome मेनू को कस्टमाइज़ और नियंत्रित करने के लिए क्लिक करें।
2. मेनू से, और टूल चुनें, और फिर डेवलपर टूल चुनें।

वैकल्पिक रूप से, हम Ctrl + Shift + I कीबोर्ड शॉर्टकट का उपयोग कर सकते हैं (हम इस दृष्टिकोण को पसंद करते हैं, लेकिन यह आपके ऊपर है)।



हम अंदर आने के बाद, कोड को ब्रेकपॉइंट पर रोकते हैं:

1. Chrome DevTools लॉन्च होने के साथ, स्रोत टैब चुनें।
2. स्रोत पृष्ठ से, पृष्ठ दृश्य में, app.js (पहले हमने बनाई गई जावास्क्रिप्ट फ़ाइल) का चयन करें।
3. संपादक फलक में, लेट डेटा के बाईं ओर = document.getElementById ('नाम')। मान; लाइन ऑफ कोड, लाइन नंबर 3 पर क्लिक करें।

इसके स्थान पर, हम एक लाइन-ऑफ़-कोड ब्रेकपॉइंट सेट करेंगे, जिसे नीले रंग में हाइलाइट किया गया है, इसलिए हम ठीक से देख सकते हैं कि इसे कहाँ बनाया गया है। यह भी ध्यान रखें कि जावास्क्रिप्ट डिबगिंग फलक में चयनित चर का नाम स्वचालित रूप से ब्रेकपॉइंट्स> स्थानीय अनुभाग में जुड़ जाता है।

समारोह में वृद्धि हुई है जिस पर प्रबंध बढ़ाना

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

जावास्क्रिप्ट डिबगिंग फलक के ऊपरी-बाएँ मूल ब्रेकपॉइंट रन कमांड हैं:



कोड को समाप्त करने या अगले ब्रेकपॉइंट तक पहला, रिज्यूम स्क्रिप्ट निष्पादन बटन कोड निष्पादन जारी रखेगा।

हमारे नाम क्षेत्र में हैलो दुनिया दर्ज करें। डेटा = "हैलो वर्ल्ड" के साथ लाइन का विस्तार होगा। अब चलिए नेक्स्ट फंक्शन कॉल बटन पर क्लिक करें।



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

यदि आप पृष्ठ को ताज़ा करते हैं, तो आउट चर का मूल्य DOM तत्व में अपडेट किया जाएगा। चर के बाईं ओर, आप इसके मूल्य को देखने के लिए विस्तार () आइकन पर क्लिक कर सकते हैं। यदि आप अगले फ़ंक्शन कॉल पर क्लिक करते हैं, तो ब्राउज़र में, "हेल्लो वर्ल्ड" टेक्स्ट को डेटा पैन में फिर से जोड़ा जाएगा।

अधिक जटिल डिबगिंग

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



इस उद्देश्य के लिए, हम ऊपर दिए गए स्क्रीनशॉट की तरह दिखने के लिए अपने app.js को संशोधित करेंगे। आइए पृष्ठ को ताज़ा करें और कुछ डीबगिंग करें:

1. 3, एक ब्रेकपॉइंट सेट करने के लिए, let डेटा की लाइन संख्या = document.getElementById ('नाम') मान;;
2. ब्राउज़र में, इनपुट क्षेत्र में 23 24 ई दर्ज करें। यहाँ हम जानबूझकर दोनों संख्याओं और एक अक्षर को जोड़ते हैं जिससे त्रुटि हो सकती है - इन्हें जोड़ा या गुणा नहीं किया जा सकता है।
3. अगले फ़ंक्शन कॉल पर चरण पर क्लिक करें।

स्क्रीनशॉट पर, हम देख सकते हैं कि योग और उत्पाद दोनों का NaN (संख्या नहीं) मान है। यह इंगित करता है कि हमें अपना कोड अभी ठीक करना है।

ब्रेकपॉइंट सेट करने का दूसरा तरीका

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

इस उद्देश्य के लिए, DevTools ब्राउज़र के साथ बातचीत करते समय होने वाली घटनाओं पर ब्रेकप्वाइंट सेट करने के लिए उत्कृष्ट उपकरण प्रदान करता है। जावास्क्रिप्ट डीबगिंग फलक पर, ईवेंट श्रोता ब्रेकपॉइंट को इवेंट श्रेणियों के साथ विस्तारित करने के लिए क्लिक करें।



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



अगले फ़ंक्शन कॉल पर चरण क्लिक करने से क्रमिक रूप से हमें क्लिक एक्शन को संसाधित करने के लिए उपयोग किए गए कोड के माध्यम से ले जाया जाएगा।

ईवेंट इवेंट श्रोता ब्रेकपॉइंट्स, आप कीबोर्ड, टच और एक्सएचआर जैसे कई प्रकार के इवेंट्स में ब्रेकप्वाइंट सेट कर सकते हैं।

"डीबगर" कीवर्ड

जब आप डिबगर कीवर्ड को अपने कोड में कहीं भी टाइप करते हैं, तो Chrome DevTools उस लाइन पर निष्पादन को रोक देगा और इसे ब्रेकपॉइंट्स के समान ही हाइलाइट करेगा। आप Chrome या अन्य ब्राउज़र में जावास्क्रिप्ट को डीबग करने के लिए इस उपकरण का उपयोग कर सकते हैं। जब आप काम कर लें तो कोड से शब्द हटाना न भूलें।



ऊपर दिए गए स्क्रीनशॉट के कोड को उस लाइन पर रोक दिया जाएगा जिसमें डीबगर शब्द है और Chrome DevTools लॉन्च करेगा। यह कोड की उस विशिष्ट लाइन पर एक ब्रेकपॉइंट स्थापित करने के बराबर है। आप अगले फ़ंक्शन कॉल में चरण और अगले फ़ंक्शन कॉल बटन पर चरण का उपयोग करके कोड निष्पादन का प्रबंधन भी कर सकते हैं जैसा कि हमने पहले किया था।

इसे योग करने के लिए

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

जैसे-जैसे कोड बढ़ता है, क्रोम डेवलपर टूल्स किसी भी बग को पकड़ने और सामान्य रूप से प्रदर्शन का मूल्यांकन करने के लिए बहुत अधिक कुशल हो सकते हैं।

डिबगिंग कोणीय

दृश्य स्टूडियो कोड (वीएस कोड) के माध्यम से कोणीय कोड को डीबग करने का सबसे आसान तरीका। डिबगिंग शुरू करने के लिए, आपको अपने क्रोम ब्राउज़र में डीबगर एक्सटेंशन इंस्टॉल करना होगा:

1. अपने वर्तमान प्रोजेक्ट के साथ VS कोड लॉन्च करें, एक्सटेंशन टैब खोलें। या अपने कीबोर्ड पर Ctrl + Shift + X दबाएं।
2. खोज क्षेत्र में Chrome दर्ज करें।
3. खोज परिणामों से, क्रोम के लिए डीबगर का चयन करें और इंस्टॉल पर क्लिक करें।
4. एक्सटेंशन इंस्‍टॉल करने के बाद, Reload बटन दिखाई देगा। स्थापना को पूरा करने के लिए इसे क्लिक करें और ब्राउज़र में डीबगर को सक्रिय करें।

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

वास्तव में जैसा कि हमने पहले किया था, app.component.ts में, पंक्ति के बाईं ओर स्थित पंक्ति संख्या पर क्लिक करें। सेट ब्रेकपॉइंट को लाल सर्कल आइकन के साथ चिह्नित किया जाएगा।

डिबगर कॉन्फ़िगरेशन

सबसे पहले, हमें डिबगर को कॉन्फ़िगर करने की आवश्यकता होगी:

1. फ़ाइल एक्सप्लोरर से, डीबग दृश्य पर नेविगेट करें। आप Ctrl + Shift + D शॉर्टकट का भी उपयोग कर सकते हैं।
2. लॉन्च करने के लिए सेटिंग्स आइकन बटन पर क्लिक करें। json। वह विन्यास फाइल है जिसका हम उपयोग करेंगे।
3. पर्यावरण ड्रॉप-डाउन का चयन करें से, क्रोम का चयन करें। यह आपके प्रोजेक्ट में लॉन्च। Json फ़ाइल के साथ एक नया .vscode फोल्डर बनाएगा।
4. फ़ाइल लॉन्च करें।
5. हमारे उद्देश्य के लिए फ़ाइल को फिट करने के लिए, url विधि में, लोकलहोस्ट पोर्ट को 8080 से 4200 में बदलें।
6. परिवर्तन सहेजें। आपकी फ़ाइल निम्नानुसार दिखाई देगी:
   
   
7. कीबोर्ड पर F5 दबाएँ या डीबगर लॉन्च करने के लिए डीबगिंग बटन पर क्लिक करें।
8. क्रोम लॉन्च करें।
9. सेट ब्रेकपॉइंट पर कोड को रोकने के लिए पेज को रिफ्रेश करें।

आप क्रमिक रूप से F10 बटन का उपयोग करके कोड के माध्यम से ब्राउज़ कर सकते हैं चर और उनके परिवर्तन का निरीक्षण।

README

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

डिबगिंग बैक एंड (Node.js)

यहां आपको पता चलेगा कि Node.js कोड को कैसे डीबग करें। यहाँ सबसे आम दृष्टिकोण हैं:

• क्रोम DevTools का उपयोग करना। खैर, यह हमारे पसंदीदा है।
• विजुअल स्टूडियो कोड, विजुअल स्टूडियो, वेबस्टॉर्म इत्यादि जैसे आईडीई का उपयोग करना।

हम चित्रण के लिए VS कोड और क्रोम DevTools का उपयोग करेंगे।

Chrome और Node.js एक ही जावास्क्रिप्ट इंजन, Google V8 का उपयोग करते हैं, जिसका अर्थ है कि हम उन उपकरणों का उपयोग कर सकते हैं जो हमने फ्रंट एंड डिबगिंग के लिए उपयोग किए थे।

ऐसा करने के लिए:

1. VS कोड में अपना प्रोजेक्ट लॉन्च करें।
2. कंसोल टैब पर नेविगेट करें।
3. Npm start --inspect कमांड डालें या एंटर करें और एंटर दबाएँ।
4. सुझाए गए "क्रोम-डिवॉल्ट्स: // ..." URL को अनदेखा करें (एक बेहतर तरीका है)।
   
5. Chrome लॉन्च करें और "के बारे में: निरीक्षण करें" दर्ज करें या पेस्ट करें। यह आपको DevTools के डिवाइसेस पेज पर रीडायरेक्ट करेगा।
6. नोड हाइपरलिंक के लिए ओपन समर्पित DevTools पर क्लिक करें।

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

पढ़ने के लिए धन्यवाद और आशा है कि आपको यह लेख अच्छा लगा। हमारे अपडेट के लिए सदस्यता लें, हमारे पास हमारी आस्तीन में बहुत अधिक शांत सामान हैं :)