JavaScript Debugging — Bug ढूँढना और ठीक करना
5 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
हर programmer bug लिखता है — beginner भी और expert भी। Debugging असफलता का संकेत नहीं है; यही असली काम है। अटके हुए beginner और काम करने वाले developer में फ़र्क यह नहीं है कि किसके bug कम हैं, बल्कि यह है कि किसके पास उन्हें ढूँढने का तरीका है। यह पाठ आपको वही तरीका देता है: एक टॉर्च, तीन आम errors का नक्शा, और एक सुनहरा नियम — एक बार में एक चीज़ ठीक कीजिए।
console.log — टॉर्च
let price = "20";
let quantity = 5;
console.log("price:", price, "quantity:", quantity);
console.log("total:", price * quantity);
जब पेज कुछ गलत करता है, तो आपका पहला काम यह देखना है कि code असल में क्या देख रहा है — न कि आप क्या समझ रहे हैं कि वह देख रहा है। console.log browser के console में values छापता है (F12 से खोलिए)। Calculation से पहले inputs छापिए और उसके बाद नतीजा छापिए। दस में से नौ बार छपी हुई value आपको चौंका देगी — और वही चौंकाने वाली बात ही bug है। ऊपर वाले उदाहरण में price string "20" है, number 20 नहीं — और quotes का वह एक जोड़ा सब कुछ बदल देता है।
console.log आपके लिए है, developer के लिए — visitor कभी console नहीं खोलता। अपने logs हटा भी सकते हैं या रख भी सकते हैं, लेकिन visitor को कोई ज़रूरी चीज़ दिखाने के लिए कभी console.log इस्तेमाल मत कीजिए; उसके लिए पेज खुद (textContent) इस्तेमाल कीजिए।Error message पढ़ना
जब JavaScript आपका code चला नहीं पाता, तो वह console में ठीक-ठीक बता देता है कि क्या गलत है — साथ में line number भी। तीन messages पढ़ना सीख लीजिए:
- ReferenceError: x is not defined — आपने ऐसा नाम इस्तेमाल किया जो है ही नहीं, आमतौर पर टाइपिंग की गलती: total की जगह totl, या ऐसा variable जो declare होने से पहले इस्तेमाल हो गया।
- TypeError: Cannot set properties of null —
getElementByIdनेnullदिया क्योंकि उस id वाला कोई element है ही नहीं, और फिर code ने उसे इस्तेमाल करने की कोशिश की। HTML वाली id और script वाली id अक्षर-दर-अक्षर एक जैसी होनी चाहिए। - SyntaxError: Unexpected token — code खुद टूटा हुआ है: कोई bracket गुम है, कोई quote गुम है, कोई extra comma है। Code पढ़ा ही नहीं जा सका, इसलिए कुछ भी चला ही नहीं।
Message problem का नाम और line बताता है। Console में line number पर click कीजिए और browser आपको ठीक वही जगह दिखा देगा। ज़्यादातर beginners message को नज़रअंदाज़ करके अंदाज़ा लगाते हैं; professionals पहले message पढ़ते हैं, क्योंकि वह अक्सर सीधे bug की तरफ़ इशारा कर रहा होता है।
Debugger की सोच — एक बार में एक चीज़
जब पेज गलत व्यवहार करे, तो जासूस की तरह काम कीजिए: (1) उसे दोहराइए — bug को जानबूझकर फिर से पैदा कीजिए। (2) उसे अलग कीजिए — टुकड़े हटाते जाइए जब तक सिर्फ टूटा हुआ हिस्सा न बच जाए। (3) एक कारण का अंदाज़ा लगाइए, और उसे console.log से परखिए। (4) उसे ठीक कीजिए, फिर देखिए कि पेज चल रहा है या नहीं। नीचे वाले उदाहरण में सच में एक बार bug था: total वाले paragraph की id HTML में "totl" थी लेकिन script में "total", इसलिए getElementById ने null दिया और button ने कुछ नहीं किया। Console ने कहा "Cannot set properties of null", line number ने textContent वाली line की तरफ़ इशारा किया, और एक अक्षर ठीक करने से — totl से total — सब कुछ ठीक हो गया।
console.log बताता है क्या, और एक बार में एक चीज़ ठीक करना बताता है कि आपका अंदाज़ा सही था या नहीं। एक साथ पाँच चीज़ें बदल दीं तो कभी पता नहीं चलेगा कि कौन सी काम आई।आम गलतियाँ
- Console को नज़रअंदाज़ करना — error message अब तक का सबसे तेज़ सुराग है।
- एक साथ पाँच चीज़ें बदलना — एक ठीक कीजिए, परखिए, फिर आगे बढ़िए।
- छापने के बजाय अंदाज़ा लगाना — असली values
console.logसे छापिए; bug आमतौर पर उसी बात में है जो आपने मान ली थी। - id में टाइपिंग की गलती छोड़ देना — HTML वाली id और script वाली id बिल्कुल एक जैसी होनी चाहिए, capital अक्षरों समेत।
- String को number समझना — "20" + 5 मतलब "205" है; maths करने से पहले
Number()से बदलिए।
याद रखें
console.logआपकी टॉर्च है: inputs और नतीजे छापिए ताकि देख सकें कि code असल में क्या देख रहा है।- ReferenceError का मतलब है कोई नाम मौजूद नहीं है; TypeError का मतलब अक्सर वहाँ
nullहै जहाँ element की उम्मीद थी; SyntaxError का मतलब है code खुद टूटा हुआ है। - Console का message problem और line number देता है — पहले उसे पढ़िए।
- दोहराइए, अलग कीजिए, एक कारण का अंदाज़ा लगाइए, ठीक कीजिए, परखिए।
- message पढ़िए, values छापिए, एक चीज़ ठीक कीजिए।
उदाहरण समझिए
let price = Number(document.getElementById("price").value);— input की value string होती है, इसलिए maths से पहलेNumber()उसे बदल देता है। असली bug में string को सीधे इस्तेमाल किया गया था।document.getElementById("total")— यह id paragraph की id से अक्षर-दर-अक्षर मिलती है। असली bug में यहाँ "totl" था, जोnullदेता था।console.log("price:", price, "quantity:", quantity);— टॉर्च: यह असली values छापता है ताकि आप console में उन्हें जाँच सकें।let total = price * quantity;— दोनों values number होने पर 20 गुणा 5 मतलब 100 है, "205" नहीं।document.getElementById("total").textContent = "Total: Rs " + total;— ठीक किया गया नतीजा पेज पर हरे रंग में दिखता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Price Calculator — Debugged</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 360px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
input { width: 120px; padding: 6px; margin: 4px 0; }
#total { font-weight: bold; }
</style>
</head>
<body>
<h1>Price Calculator</h1>
<div class="card">
<p>Price (Rs): <input id="price" type="text" value="20"></p>
<p>Quantity: <input id="quantity" type="text" value="5"></p>
<p><button onclick="showTotal()">Show total</button></p>
<p id="total">Total will appear here.</p>
<p>This page once had a bug: the script looked for an element with id "totl", but the paragraph's id is "total". The console said "Cannot set properties of null" — one letter fixed it. Open the console (F12) and watch the torch print the values.</p>
</div>
<script>
function showTotal() {
let price = Number(document.getElementById("price").value);
let quantity = Number(document.getElementById("quantity").value);
console.log("price:", price, "quantity:", quantity);
let total = price * quantity;
console.log("total:", total);
let out = document.getElementById("total");
out.textContent = "Total: Rs " + total;
out.style.color = "green";
}
</script>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. पेज गलत व्यवहार करे तो पहला कदम क्या होना चाहिए?
console.log से देखें कि कोड सच में क्या देख रहा है — दस में से नौ बार छपी वैल्यू चौंकाती है, और वही चौंकाने वाली बात बग होती है।
2. ReferenceError: x is not defined का मतलब क्या है?
आपने ऐसा नाम इस्तेमाल किया जो मौजूद ही नहीं है — अक्सर टाइपो, जैसे total की जगह totl, या declare से पहले इस्तेमाल।
3. Debugging का सुनहरा नियम क्या है?
एक बार में एक ही चीज़ ठीक करें — एक बदलाव करें, चलाएँ, और देखें कि बग हिला या नहीं।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
