आपका कंसोल आपसे झूठ बोल रहा है
डिबगिंग के दौरान आपके ब्राउज़र DevTools आपको गुमराह कर सकते हैं। यह खराब नहीं है। इसे सटीक होने के बजाय गति (speed) के लिए ऑप्टिमाइज़ किया गया है।
यहाँ बताया गया है कि आप हमेशा console.log पर भरोसा क्यों नहीं कर सकते।
• Lazy Evaluation जब आप किसी ऑब्जेक्ट को लॉग करते हैं, तो ब्राउज़र उसे तुरंत कॉपी नहीं करता है। यह एक लाइव रेफरेंस (live reference) स्टोर करता है। ब्राउज़र प्रॉपर्टीज़ को तभी पढ़ता है जब आप उसे विस्तार से देखने के लिए तीर (arrow) पर क्लिक करते हैं। यदि आपके क्लिक करने से पहले आपका कोड उस ऑब्जेक्ट को बदल देता है, तो आपको पुराना मान नहीं, बल्कि नया मान दिखाई देता है।
• The Heisenbug Effect console.log जोड़ने से वास्तव में बग छिप सकते हैं। लॉगिंग में समय और संसाधन लगते हैं। तेज़ कोड में, यह मामूली देरी आपके एप्लिकेशन की टाइमिंग को बदल सकती है। इससे आपके देखते समय race conditions होने से रुक सकते हैं, जिससे बग गायब हो जाता है।
• React State Traps setCount कॉल के तुरंत बाद स्टेट को लॉग करने पर पुराना मान दिखाई देता है। ऐसा closures और React द्वारा अपडेट शेड्यूल करने के तरीके के कारण होता है। आप जो मान लॉग करते हैं वह वर्तमान रेंडर का होता है, अगले रेंडर का नहीं।
• Source Map Errors प्रोडक्शन में, आपका कोड minified और bundled होता है। यदि आपके source maps पुराने या गलत हैं, तो कंसोल कोड की गलत लाइन की ओर इशारा करेगा। एरर वास्तविक है, लेकिन उसका स्थान गलत है।
बेहतर डिबगिंग कैसे करें:
स्नैपशॉट लेने के लिए structuredClone का उपयोग करें यदि आपको किसी ऑब्जेक्ट को ठीक वैसा ही देखना है जैसा वह अभी है, तो इसका उपयोग करें:
const snap = structuredClone(obj)console.log(snap)बड़े ऑब्जेक्ट्स के बजाय primitives लॉग करें ID, टाइमस्टैम्प, या स्टेटस स्ट्रिंग्स लॉग करें। इससे lazy evaluation और परफॉरमेंस पर पड़ने वाले प्रभाव का जोखिम कम हो जाता है।
debugger का उपयोग करें एक्जीक्यूशन को रोकने के लिए breakpoints का उपयोग करें। यह आपको अपने कोड की टाइमिंग बदले बिना वास्तविक स्टेट और call stack का निरीक्षण करने की अनुमति देता है।
framework DevTools का उपयोग करें यदि आप React या Vue का उपयोग करते हैं, तो उनके विशिष्ट DevTools का उपयोग करें। वे लॉग की तुलना में lifecycle और render चरणों को अधिक सटीक रूप से दिखाते हैं।
कंसोल त्वरित अन्वेषण के लिए एक बेहतरीन टूल है। इसे सत्य के अंतिम स्रोत (final source of truth) के रूप में उपयोग न करें।
Source: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc