<पी> एक डेवलपर के रूप में आप अक्सर कोड डीबग करना चाहेंगे। हो सकता है कि आपने पहले ही console.log का उपयोग कर लिया हो कुछ चुनौतियों में, जो डिबग करने का सबसे सरल तरीका है। <पी> इस लेख में हम आपको ब्राउज़र के मूल डिबग-टूल्स का उपयोग करके डिबग करने के लिए कुछ बेहतरीन तरकीबें बताएंगे। FreeCodeCamp कोड संपादक में एक संक्षिप्त जानकारी:
<पी> डिबगिंग में कूदने से पहले आइए उस भयानक कोड चेकिंग इंजन के बारे में कुछ गुप्त तथ्य बताएं एफसीसी पर। <पी> हम कोड संपादक के रूप में एक अनुकूलित कोडमिरर का उपयोग करते हैं। एeval() फ़ंक्शन का उपयोग संपादक से स्ट्रिंग के रूप में दर्शाए गए जावास्क्रिप्ट कोड का मूल्यांकन करने के लिए किया जाता है। जब eval() कहा जाता है, ब्राउज़र आपके कोड को मूल रूप से निष्पादित करेगा। हम इस लेख के बाद के अनुभागों में और जानेंगे कि यह रहस्य क्यों महत्वपूर्ण है। अब तरकीबों की ओर बढ़ते हैं:
<पी> Google Chrome V8 नामक अंतर्निहित जावास्क्रिप्ट इंजन के साथ सबसे लोकप्रिय ब्राउज़रों में से एक है, और डेवलपर्स के लिए Chrome DevTools नामक एक बेहतरीन टूलसेट प्रदान करता है। उनके संपूर्ण जावास्क्रिप्ट डिबगिंग गाइड को देखने की अत्यधिक अनुशंसा की जाती है।1 :DevTools की मूल बातें
Chrome DevTools लॉन्च करना
<पी>F12 दबाएं <पी> . वैकल्पिक रूप से आप दबा सकते हैं <पी> Ctrl + Shift + I <पी> विंडोज़ और लिनक्स पर या <पी> Cmd + Shift + I <पी> मैक पर, या यदि आपको अपना माउस पसंद है तो Menu > More Tools > Developer Tools पर जाएं . Sources को जानना और console टैब
<पी> डिबगिंग के दौरान ये दो टैब शायद आपके सबसे अच्छे दोस्त साबित होंगे। Sources टैब का उपयोग आपके द्वारा देखे जा रहे वेबपेज पर मौजूद सभी स्क्रिप्ट्स को देखने के लिए किया जा सकता है। इस टैब में कोड विंडो, फ़ाइल ट्री, कॉल स्टैक और वॉच विंडो आदि के लिए अनुभाग हैं। <पी> console टैब वह जगह है जहां सभी लॉग आउटपुट जाते हैं। इसके अतिरिक्त आप जावास्क्रिप्ट कोड को निष्पादित करने के लिए कंसोल टैब के प्रॉम्प्ट का उपयोग कर सकते हैं। यह विंडोज़ पर कमांड प्रॉम्प्ट, या लिनक्स पर टर्मिनल का पर्याय है। <पी> टिप:Esc का उपयोग करके किसी भी समय DevTools में कंसोल को टॉगल करें कुंजी. 2 :सामान्य शॉर्टकट और सुविधाएं
<पी> हालाँकि आप शॉर्टकट की पूरी सूची देख सकते हैं, नीचे कुछ ऐसे शॉर्टकट दिए गए हैं जिनका सबसे अधिक उपयोग किया जाता है: <पी> फ़ीचर विंडोज़, लिनक्स मैककोई कीवर्ड खोजें, रेगेक्स समर्थित है।
Ctrl +F``Cmd +F एक फ़ाइल खोजें और खोलें
Ctrl +P``Cmd +P लाइन
Ctrl पर जाएं +G +:line_no``Cmd +G +:line_no एक ब्रेकप्वाइंट
Ctrl जोड़ें +B , या लाइन नंबरCmd पर क्लिक करें +B , या लाइन नंबर पर क्लिक करें। स्क्रिप्ट निष्पादन को रोकें/फिर से शुरू करें
F8 F8 अगले फ़ंक्शन कॉल
F10 पर कदम रखें F10 अगले फ़ंक्शन कॉल
F11 पर कदम रखें F11 3:हमारे कोड के लिए स्रोत मानचित्र का उपयोग करना
<पी> सबसे बेहतरीन सुविधाओं में से एक जो आपको पसंद आएगी, वह है सोर्स मैप्स के माध्यम से तुरंत डायनामिक स्क्रिप्ट को डिबग करना। <पी> प्रत्येक स्क्रिप्ट को DevTools के सोर्स टैब में देखा जा सकता है। स्रोत टैब में सभी जावास्क्रिप्ट स्रोत फ़ाइलें हैं। लेकिन कोड संपादक से कोडeval() के माध्यम से निष्पादित किया जाता है ब्राउज़र प्रक्रिया के अंतर्गत एक कंटेनर में जिसे वर्चुअल मशीन (VM) कहा जाता है। <पी> जैसा कि आप अब तक अनुमान लगा चुके होंगे कि हमारा कोड वास्तव में एक स्क्रिप्ट है जिसमें कोई फ़ाइल नाम नहीं है। इसलिए हम उसे स्रोत टैब में नहीं देखते हैं। <पी> Source Maps का लाभ उठाना चाहिए हमारे संपादक से जावास्क्रिप्ट को एक नाम निर्दिष्ट करने के लिए। यह बहुत आसान है: <पी> मान लें कि हम Factorialize चुनौती पर हैं, और हमारा कोड इस तरह दिखता है: function factorialize(num) {
if(num <= 1){
...
}
factorialize(5);
//# sourceURL=factorialize.js जोड़ना है कोड के शीर्ष पर, यानी पहली पंक्ति: //# sourceURL=factorialize.js
function factorialize(num) {
if(num <= 1){
...
डीबगिंग पर अधिक जानकारी:
- बग स्क्वैशिंग के लिए शुरुआती मार्गदर्शिका
- शुरुआती लोगों के लिए डिबगिंग युक्तियाँ और युक्तियाँ
- अपने ब्राउज़र के डिबगिंग कंसोल से अधिकतम लाभ कैसे प्राप्त करें
