JavaScript:
डीबगर का उपयोग करना
कैसे करें:
यहाँ एक जावास्क्रिप्ट कोड का थोड़ा भाग है जो अपेक्षा के अनुसार व्यवहार नहीं कर रहा है:
function buggyMultiply(a, b) {
return a + b; // ओहो! यह गुणा होना चाहिए था, जोड़ नहीं।
}
let result = buggyMultiply(5, 3);
console.log('परिणाम:', result);आउटपुट गलत है:
परिणाम: 8चलो Chrome DevTools में डिबग करें:
- इस जेएस को एक ब्राउज़र में खोलें।
- राइट क्लिक करें और “Inspect” चुनें ताकि DevTools खुल सके।
- “Sources” टैब पर क्लिक करें।
- अपने कोड स्निपेट या पेज को ढूँढें और
returnस्टेटमेंट के बगल में लाइन नंबर पर क्लिक करके एक ब्रेकपॉइंट डालें। - ब्रेकपॉइंट को ट्रिगर करने के लिए पेज को रीफ्रेश करें।
- स्थानीय चर
aऔरbको देखने के लिए “Scope” पैनल की जाँच करें। - “Step over next function call” बटन के साथ आगे बढ़ें।
returnस्टेटमेंट में बग को ढूँढें।- कोड को ठीक करें:
function buggyMultiply(a, b) {
return a * b; // ठीक कर दिया!
}
let result = buggyMultiply(5, 3);
console.log('परिणाम:', result);सही किया गया आउटपुट:
परिणाम: 15गहराई से जानना
डीबगिंग की अवधारणा कंप्यूटिंग के शुरुआती दिनों से चली आ रही है—कहानी है कि यह तब शुरू हुआ जब 1940 में एक कंप्यूटर में एक मोथ मिली थी! आज, जावास्क्रिप्ट डीबगर्स जैसे कि ब्राउज़र में निर्मित उपकरण (Chrome DevTools, Firefox Developer Tools) या IDE इंटीग्रेटेड डीबगर्स (Visual Studio Code, WebStorm) बहुत सारी सुविधाएँ प्रदान करते हैं।
इन-बिल्ट डीबगर्स के विकल्प में तीसरे पक्ष के उपकरण जैसे WebStorm शामिल हैं या चर स्थितियों को आउटपुट करने के लिए अच्छे पुराने console.log का इस्तेमाल करना। लेकिन ये डीबगर्स द्वारा प्रदान की गई वास्तविक समय बातचीत और विस्तृत निरीक्षण की पेशकश नहीं करते।
कार्यान्वयन विवरण के संबंध में, अधिकांश डीबगर्स इसी तरह काम करते हैं: वे आपको ब्रेकपॉइंट्स सेट करने की अनुमति देते हैं जो निष्पादन को विराम देते हैं, कोड के माध्यम से कदम-ब�े-कदम आगे बढ़ते हैं, वर्तमान चर स्थितियों का निरीक्षण करते हैं, व्यक्त अभिव्यक्तियों को देखते हैं, और विभिन्न परिदृश्यों की परीक्षा करने के लिए मौके पर मानों को भी बदल सकते हैं।