तुमचे कन्सोल तुम्हाला खोटे सांगत आहे

डीबगिंग दरम्यान तुमचे ब्राउझर DevTools तुम्हाला दिशाभूल करू शकतात. ते खराब झालेले नाहीये. ते अचूकतेपेक्षा वेगासाठी ऑप्टिमाइझ केलेले आहे.

म्हणूनच तुम्ही नेहमी console.log वर विश्वास ठेवू शकत नाही, याची ही काही कारणे आहेत.

• Lazy Evaluation जेव्हा तुम्ही एखादा ऑब्जेक्ट लॉग करता, तेव्हा ब्राउझर त्याची त्वरित कॉपी करत नाही. तो त्याचा एक 'लाईव्ह रेफरन्स' (live reference) साठवून ठेवतो. जेव्हा तुम्ही तो विस्तारण्यासाठी (expand करण्यासाठी) बाणावर क्लिक करता, तेव्हाच ब्राउझर त्यातील प्रॉपर्टीज वाचतो. जर तुम्ही क्लिक करण्यापूर्वी तुमच्या कोडने तो ऑब्जेक्ट बदलला असेल, तर तुम्हाला जुनी व्हॅल्यू न दिसता नवीन व्हॅल्यू दिसेल.

• The Heisenbug Effect console.log जोडल्यामुळे प्रत्यक्षात बग्स लपले जाऊ शकतात. लॉगिंगसाठी वेळ आणि संसाधने लागतात. वेगवान कोडमध्ये, या सूक्ष्म विलंबामुळे (delay) तुमच्या ॲप्लिकेशनचे टायमिंग बदलू शकते. यामुळे तुम्ही पाहताना 'race conditions' घडणे थांबवू शकते, ज्यामुळे तो बग गायब झाल्यासारखा वाटतो.

• React State Traps setCount कॉल केल्याच्या लगेच नंतर स्टेट लॉग केल्यास जुनी व्हॅल्यू दिसते. हे closures आणि React अपडेट्स कसे शेड्यूल करते, या कारणांमुळे घडते. तुम्ही जो व्हॅल्यू लॉग करता तो सध्याच्या रेंडरचा (current render) असतो, पुढच्या रेंडरचा नाही.

• Source Map Errors प्रोडक्शनमध्ये, तुमचा कोड minified आणि bundled केलेला असतो. जर तुमचे source maps जुने किंवा चुकीचे असतील, तर कन्सोल चुकीच्या कोड लाईनकडे निर्देश करेल. एरर खरी असते, पण त्याचे स्थान चुकीचे असते.

अधिक चांगल्या प्रकारे डीबग कसे करावे:

• स्नॅपशॉट्स घेण्यासाठी structuredClone वापरा जर तुम्हाला एखादा ऑब्जेक्ट तो सध्या जसा आहे तसाच पाहायचा असेल, तर वापरा: const snap = structuredClone(obj) console.log(snap)

• मोठ्या ऑब्जेक्ट्सऐवजी primitives लॉग करा IDs, timestamps, किंवा status strings लॉग करा. यामुळे lazy evaluationचा धोका आणि परफॉर्मन्सवर होणारा परिणाम कमी होतो.

• debugger वापरा एक्झिक्युशन थांबवण्यासाठी breakpoints वापरा. यामुळे तुमच्या कोडचे टायमिंग न बदलता तुम्ही प्रत्यक्ष state आणि call stack तपासू शकता.

• Framework DevTools वापरा जर तुम्ही React किंवा Vue वापरत असाल, तर त्यांचे विशिष्ट DevTools वापरा. ते logs पेक्षा lifecycle आणि render phases अधिक अचूकपणे दाखवतात.

कन्सोल हे जलद संशोधनासाठी एक उत्तम साधन आहे. त्याचा वापर सत्याचा अंतिम स्रोत (final source of truth) म्हणून करू नका.

Source: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc