एक सीनियर डेवलपर की तरह JavaScript को कैसे डिबग करें
हर चीज़ के लिए console.log का उपयोग करना बंद करें। आप हर हफ्ते घंटों बर्बाद करते हैं।
मैंने प्रोडक्शन इश्यूज (production issues) को ठीक करने में 8 साल बिताए हैं। यह वर्कफ़्लो डिबगिंग के समय को 60% तक कम कर देता है।
| टूल | उपयोग का मामला | बचाया गया समय |
|---|---|---|
| Chrome DevTools Sources | स्टेप-थ्रू डिबगिंग | 40% |
| Conditional Breakpoints | लूप्स में बग्स को सीमित करना | 25% |
| Performance Panel | रेंडरिंग बॉटलनेक्स का पता लगाना | 35% |
| Network Panel | API टाइमिंग इश्यूज | 30% |
| Console.assert | लॉजिक एरर्स को जल्दी पकड़ना | 15% |
हर जगह लॉग्स (logs) बिखेरना बंद करें। इसके बजाय इन तरीकों का उपयोग करें।
Conditional Breakpoints का उपयोग करें DevTools Sources खोलें। ब्रेकपॉइंट सेट करने के लिए एक लाइन नंबर पर क्लिक करें। उस पर राइट-क्लिक करें और Edit breakpoint चुनें। एक कंडीशन जोड़ें। डिबगर केवल तभी रुकता है जब आपकी कंडीशन सही (true) होती है। यह बड़े लूप्स पर घंटों बचाता है।
Call Stack का अध्ययन करें जब डिबगर रुकता है, तो Call Stack पैनल को देखें। यह उस रास्ते (path) को दिखाता है जो बग तक ले गया। इसे सेव करने के लिए किसी फ्रेम पर राइट-क्लिक करें और Copy stack trace चुनें।
Log Points का उपयोग करें यदि आप कोड को रोके बिना आउटपुट चाहते हैं, तो Log points का उपयोग करें। लाइन नंबर पर राइट-क्लिक करें और Add log point चुनें। यह आपके सोर्स कोड को नहीं बदलता है। DevTools बंद करने पर यह गायब हो जाता है।
Performance Panel के साथ स्लो ऐप्स को ठीक करें Performance टैब खोलें। Record पर क्लिक करें। 5 सेकंड के लिए अपने पेज का उपयोग करें। रिकॉर्डिंग रोकें। Main thread में 50ms से अधिक के लंबे कार्यों (long tasks) को देखें। इससे लेआउट और पेंटिंग (layout and painting) की समस्याओं का पता चलता है।
Network Panel का निरीक्षण करें Waterfall view की जाँच करें। लाल या बैंगनी बार का मतलब है कि रिक्वेस्ट ब्लॉक हो गई है। बड़े गैप का मतलब है कि JavaScript मेन थ्रेड को ब्लॉक कर रहा है। अपने टर्मिनल में API इश्यूज को टेस्ट करने के लिए किसी रिक्वेस्ट पर राइट-क्लिक करें और Copy as cURL चुनें।
आपकी डिबगिंग चेकलिस्ट:
- एक कंडीशनल ब्रेकपॉइंट सेट करें
- एग्जीक्यूशन पाथ के लिए Call Stack की जाँच करें
- लोकल वेरिएबल्स के लिए Scope पैनल का उपयोग करें
- वैल्यूज़ की निगरानी के लिए एक लॉग पॉइंट जोड़ें
- टाइमिंग इश्यूज के लिए एक Performance प्रोफाइल रिकॉर्ड करें
- API इश्यूज के लिए Network पैनल की जाँच करें
इस वर्कफ़्लो में महारत हासिल करने में दो सप्ताह लगते हैं। यह आपके करियर के लिए सबसे अच्छा प्रोडक्टिविटी अपग्रेड है। आपके ब्राउज़र में ये टूल्स पहले से ही मौजूद हैं। इनका उपयोग करें।
स्रोत: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p