एक डेवलपर के रूप में आप अक्सर कोड डिबग करना चाहेंगे। आपने शायद कुछ चुनौतियों में console.log का उपयोग किया होगा, जो डिबग करने का सबसे सरल तरीका है।
इस लेख में हम आपको कुछ सबसे अच्छे ट्रिक्स बताएंगे, ब्राउज़र के नेटिव डिबग टूल्स का उपयोग करके डिबग करने के लिए।
FreeCodeCamp कोड एडिटर में एक संक्षिप्त अंतर्दृष्टि:
डिबगिंग में कूदने से पहले आइए FCC में उस भयानक कोड चेकिंग इंजन के बारे में कुछ गुप्त तथ्य लीक करते हैं।
हम कोड एडिटर के रूप में एक कस्टमाइज्ड CodeMirror का उपयोग करते हैं। एडिटर से स्ट्रिंग के रूप में दर्शाए गए JavaScript कोड का मूल्यांकन करने के लिए एक eval() फंक्शन का उपयोग किया जाता है। जब eval() कहा जाता है, तो ब्राउज़र आपके कोड को मूल रूप से निष्पादित करेंगे। हम बाद के अनुभागों में सीखेंगे कि यह रहस्य क्यों महत्वपूर्ण है।
अब ट्रिक्स पर चलते हैं:
Google Chrome सबसे लोकप्रिय ब्राउज़रों में से एक है जिसमें V8 नामक एक बिल्ट-इन JavaScript इंजन है, और डेवलपर्स के लिए Chrome DevTools नामक एक बेहतरीन टूलसेट प्रदान करता है। उनके पूर्ण JavaScript डिबगिंग गाइड पर जाना अत्यधिक अनुशंसित है।
1: DevTools की मूल बातें
Chrome DevTools लॉन्च करना
F12 दबाएं।
वैकल्पिक रूप से आप दबा सकते हैं
Windows और Linux पर Ctrl + Shift + I
या
Mac पर Cmd + Shift + I
या यदि आप सिर्फ अपने माउस से प्यार करते हैं तो Menu > More Tools > Developer Tools पर जाएं।
Sources और console टैब को जानना।
ये दो टैब शायद डिबगिंग करते समय आपके सबसे अच्छे दोस्त होने जा रहे हैं। Sources टैब का उपयोग उस वेबपेज पर मौजूद सभी स्क्रिप्ट्स को विज़ुअलाइज़ करने के लिए किया जा सकता है जिसे आप देख रहे हैं। इस टैब में कोड विंडो, फाइल ट्री, कॉल स्टैक और वॉच विंडोज आदि के लिए सेक्शन हैं।
console टैब वह जगह है जहां सभी लॉग आउटपुट जाता है। इसके अलावा आप कंसोल टैब के प्रॉम्प्ट का उपयोग JavaScript कोड निष्पादित करने के लिए कर सकते हैं। यह Windows पर कमांड प्रॉम्प्ट या Linux पर टर्मिनल का पर्याय है।
टिप: DevTools में कभी भी Esc कुंजी का उपयोग करके कंसोल टॉगल करें।
2: सामान्य शॉर्टकट्स और सुविधाएं
जब आप शॉर्टकट्स की पूरी सूची देख सकते हैं, तो नीचे कुछ सबसे अधिक उपयोग किए जाने वाले हैं:
| फीचर | Windows, Linux | Mac |
|---|---|---|
| कीवर्ड खोजें, रेगएक्स समर्थित है। | 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 के Sources टैब में विज़ुअलाइज़ किया जा सकता है। Sources टैब में सभी JavaScript सोर्स फ़ाइलें हैं। लेकिन कोड एडिटर से कोड को एक कंटेनर में eval() के माध्यम से निष्पादित किया जाता है जिसे ब्राउज़र प्रक्रिया के भीतर एक वर्चुअल मशीन (VM) कहा जाता है।
जैसा कि आप अब तक अनुमान लगा चुके होंगे कि हमारा कोड वास्तव में एक स्क्रिप्ट है जिसका कोई फ़ाइल नाम नहीं है। इसलिए हम उसे Sources टैब में नहीं देखते।
यहाँ हैक आता है!
हमें अपने एडिटर से JavaScript को नाम असाइन करने के लिए Source Maps का लाभ उठाना होगा। यह काफी सरल है:
मान लीजिए हम Factorialize चैलेंज पर हैं, और हमारा कोड ऐसा दिखता है:
function factorialize(num) { if(num <= 1){ ... } factorialize(5);
हमें बस //# sourceURL=factorialize.js को कोड के शीर्ष पर जोड़ना है, यानी पहली लाइन:
//# sourceURL=factorialize.js function factorialize(num) { if(num <= 1){ ...
और यूरेका बस इतना ही!
अब DevTools खोलें और फ़ाइल नाम खोजें। ब्रेकपॉइंट्स जोड़ें, डिबग करें और आनंद लें!
डिबगिंग पर अधिक जानकारी:
- बग स्क्वैशिंग के लिए शुरुआती गाइड
- शुरुआती के लिए डिबगिंग टिप्स और ट्रिक्स
- अपने ब्राउज़र के डिबगिंग कंसोल का अधिकतम लाभ कैसे उठाएं
