कंसोल से JavaScript डीबग कैसे करें

हर JavaScript डेवलपर, पहले हफ़्ते से दसवें साल तक, एक ही सवाल पूछने में बहुत समय लगाता है: मेरा कोड वह क्यों नहीं कर रहा जो मुझे लगता है कि वह कर रहा है? इसका जवाब पाने का सबसे तेज़ तरीक़ा शायद ही कभी कोड को और ग़ौर से घूरना होता है। तरीक़ा है कोड से यह बुलवाना कि वह क्या कर रहा है, और कंसोल ही वह ज़रिया है जिससे वह बोलता है।

यह गाइड बताती है कि JavaScript के एरर मैसेज कैसे पढ़ें, वैल्यू ऐसे कैसे लॉग करें जो सच में मदद करे, और उन गिने-चुने बग को कैसे पहचानें जो ज़्यादातर समस्याओं की जड़ हैं। हर उदाहरण JavaScript Compiler में पेस्ट करके Ctrl+Enter से चलाया जा सकता है।

पहले एरर मैसेज पढ़ें

जब JavaScript फ़ेल होता है, तो आम तौर पर एक लाइन में बता देता है कि क्यों। उस लाइन को पढ़ना सीखना डीबगिंग का सबसे बड़ा हुनर है। एरर के तीन काम के हिस्से होते हैं: type, मैसेज और जगह (location)।

जगह वह बताती है जहाँ JavaScript ने समस्या पकड़ी, जो हमेशा वहाँ नहीं होती जहाँ ग़लती है। "Cannot read properties of undefined" वहाँ बताया जाता है जहाँ आपने property पढ़ी, लेकिन असली बग वहाँ है जहाँ वैल्यू सेट होनी चाहिए थी।

वैल्यू ऐसे लॉग करें जो मदद करे

console.log डीबगिंग का सबसे आसान औज़ार है और अब भी सबसे अच्छे औज़ारों में से एक। कुछ आदतें इसे कहीं ज़्यादा काम का बना देती हैं:

अपने लॉग पर लेबल लगाएँ। कंसोल में अकेला नंबर दस लॉग बाद बेमानी हो जाता है।

const total = 3 * 19.99;
console.log('total', total);
console.log({ total }); // the variable name becomes the label

स्ट्रिंग नहीं, ऑब्जेक्ट लॉग करें। ऑब्जेक्ट लॉग करने से उसका पूरा ढाँचा दिखता है। JavaScript Compiler ऑब्जेक्ट और array को फ़ॉर्मेट किए JSON के रूप में प्रिंट करता है, इसलिए nested डेटा पढ़ना आसान होता है।

const order = { id: 42, items: [{ sku: 'A1', qty: 2 }], paid: false };
console.log('order', order);

अहमियत के लिए warn और error इस्तेमाल करें। console.warn और console.error आउटपुट में अलग दिखते हैं, जो तब मदद करता है जब आप वह एक लाइन ढूँढ रहे हों जो मायने रखती है।

पहले और बाद में लॉग करें। जब कोई वैल्यू अचानक बदलती है, तो उसे छूने वाले हर क़दम से पहले और बाद में लॉग करें। जिस क़दम पर वह बदलती है, वहीं आपका बग है।

ज़्यादातर समस्याओं के पीछे के बग

Undefined वैल्यू

ज़्यादातर "cannot read properties of undefined" एरर ऐसे डेटा से आते हैं जो अभी मौजूद नहीं है या वहाँ नहीं है जहाँ आप सोचते हैं:

const users = [{ name: 'Asha' }, { name: 'Ravi' }];
const user = users.find(u => u.name === 'Arjun');
console.log(user); // undefined: no match
console.log(user?.name ?? 'Not found'); // safe access with a fallback

Optional chaining (?.) और nullish coalescing operator (??) क्रैश रोकते हैं, लेकिन यह भी पूछें कि वैल्यू ग़ायब क्यों है।

Equality के चौंकाने वाले नतीजे

JavaScript की ढीली equality (==) तुलना से पहले types बदल देती है, जिसके नतीजे चौंकाने वाले होते हैं:

console.log(0 == '');        // true
console.log('1' == 1);       // true
console.log(null == undefined); // true
console.log('1' === 1);      // false

डिफ़ॉल्ट रूप से सख़्त equality (===) इस्तेमाल करें। यह वैल्यू और type दोनों की तुलना करती है।

Asynchronous क्रम

जो कोड किसी चीज़ का इंतज़ार करता है (टाइमर, नेटवर्क रिक्वेस्ट, promise), वह बाद में चलता है, लिखे गए क्रम में नहीं:

console.log('1: start');
setTimeout(() => console.log('3: timer'), 0);
Promise.resolve().then(() => console.log('2: promise'));
console.log('1b: end of script');

इसे चलाएँ और क्रम होगा start, end of script, promise, timer। अगर लॉग करते समय कोई वैल्यू undefined है, तो जाँचें कि उसे सेट करने वाला कोड असल में अभी चला भी है या नहीं। async functions में, नतीजा इस्तेमाल करने से पहले उसे await करें।

Scope और closures

let और const से declare किए variable सिर्फ़ उसी block के अंदर मौजूद होते हैं जहाँ वे declare हुए। var इस्तेमाल करने, या variable declare करना ही भूल जाने से वैल्यू अनचाहे ढंग से बाहर रिसती या साझा होती हैं, जो loops में बग का एक क्लासिक स्रोत है। const को प्राथमिकता दें, और जब वैल्यू बदलनी हो तो let।

बग को अलग करके दोहराएँ

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

पेज बनाने या बदलने वाले कोड के लिए Live HTML Viewer इस्तेमाल करें, जो रेंडर हुआ पेज उसके कंसोल के साथ दिखाता है। HTML, CSS और JavaScript ऑनलाइन टेस्ट करने की हमारी गाइड वह तरीक़ा बताती है।

डीबगिंग का एक रूटीन जो काम करता है

1. एरर मैसेज पढ़ें और type, मैसेज और लाइन नोट करें।
2. समस्या को भरोसेमंद ढंग से दोहराएँ, बेहतर हो कि एक छोटे स्निपेट में।
3. वजह का एक अंदाज़ा बनाएँ।
4. अंदाज़ा परखने के लिए लॉग करें: अंदर जाने वाली वैल्यू, बाहर आने वाली वैल्यू।
5. एक चीज़ बदलें और फिर से चलाएँ।
6. बग ठीक होने पर अपने डीबग लॉग हटाएँ, या उन्हें सही error handling में बदल दें।

एक साथ कई चीज़ें बदलना किसी बग को बिना समझे "ठीक" करने का सबसे आम तरीक़ा है, और उसे बाद में वापस ले आने का भी।

किन बातों का ध्यान रखें

• अनंत loops किसी भी माहौल में ब्राउज़र टैब को जमा देते हैं। प्रयोग करते समय एक काउंटर जोड़ें जो तय संख्या के बाद loop रोक दे।
• ब्राउज़र वर्शन के हिसाब से फ़ीचर बदलते हैं। अगर कुछ आपके लिए चलता है लेकिन किसी यूज़र के लिए नहीं, तो ब्राउज़र की तुलना करें; What Is My Browser सटीक वर्शन दिखाता है।
• जो कोड आप नहीं समझते, उसे पेस्ट न करें उन साइटों के कंसोल में जहाँ आप लॉग इन हैं। JavaScript Compiler कोड को एक अलग सैंडबॉक्स में चलाता है जो इस साइट की कुकीज़ या स्टोरेज नहीं पढ़ सकता, लेकिन दूसरे कंसोल शायद सुरक्षित न हों।

अक्सर पूछे जाने वाले सवाल

क्या JavaScript Compiler में async/await इस्तेमाल कर सकते हैं?

हाँ। asynchronous कोड के लॉग तब दिखते हैं जब वे चलते हैं।

मेरा DOM कोड कुछ क्यों नहीं दिखाता?

कंपाइलर के सैंडबॉक्स में एक ख़ाली पेज होता है। पेज बनाने वाले कोड के लिए Live HTML Viewer इस्तेमाल करें।

क्या npm पैकेज import कर सकते हैं?

सीधे नहीं; यह सादी ब्राउज़र JavaScript चलाता है।

एरर का लाइन नंबर ग़लत क्यों लगता है?

कोड एक छोटे wrapper के अंदर चलता है, इसलिए uncaught एरर में लाइन नंबर अनुमानित हो सकते हैं। लेबल वाले लॉग से दायरा छोटा करें।

डीबगिंग एक हुनर है, क़िस्मत नहीं। एरर पढ़ें, लेबल के साथ लॉग करें, अलग करके दोहराएँ और एक बार में एक चीज़ बदलें। ऊपर के उदाहरण JavaScript Compiler में पेस्ट करें और कंसोल को आपका कोड आपको समझाते हुए देखें।