உங்கள் Console உங்களுக்குப் பொய் சொல்கிறது

உங்கள் பிரவுசர் DevTools பிழைத்திருத்தத்தின் (debugging) போது உங்களை தவறாக வழிநடத்தலாம். அது பழுதாகிவிடவில்லை. அது துல்லியத்திற்காக அல்லாமல், வேகத்திற்காக மேம்படுத்தப்பட்டுள்ளது (optimized).

ஏன் நீங்கள் எப்போதும் console.log-ஐ நம்ப முடியாது என்பதற்கான காரணங்கள் இதோ.

• Lazy Evaluation நீங்கள் ஒரு பொருளை (object) லாக் செய்யும்போது, பிரவுசர் அதை உடனடியாக நகலெடுக்காது. அது ஒரு நேரடி குறிப்பை (live reference) மட்டுமே சேமித்து வைக்கும். நீங்கள் அதை விரிவுபடுத்த அம்புக்குறியைக் கிளிக் செய்யும்போது மட்டுமே பிரவுசர் அதன் பண்புகளை (properties) வாசிக்கும். நீங்கள் கிளிக் செய்வதற்கு முன்பே உங்கள் குறியீடு அந்தப் பொருளை மாற்றினால், நீங்கள் பழைய மதிப்பைத் தெரியாமல் புதிய மதிப்பையே காண்பீர்கள்.

• The Heisenbug Effect ஒரு console.log-ஐச் சேர்ப்பது உண்மையில் பிழைகளை மறைக்கக்கூடும். லாகிங் செய்வதற்கு நேரமும் வளங்களும் (resources) தேவைப்படுகின்றன. வேகமான குறியீட்டில், இந்தச் சிறிய தாமதம் உங்கள் பயன்பாட்டின் நேரத்தைச் (timing) சற்றே மாற்றக்கூடும். நீங்கள் கவனிக்கும்போது இது race conditions ஏற்படுவதைத் தடுத்து, பிழை மறைந்து போவது போன்ற தோற்றத்தை ஏற்படுத்தும்.

• React State Traps setCount அழைப்பிற்குப் பிறகு உடனடியாக state-ஐ லாக் செய்தால் பழைய மதிப்பையே காட்டும். இது closures மற்றும் React எவ்வாறு updates-களைத் திட்டமிடுகிறது (schedules updates) என்பதன் காரணமாக நிகழ்கிறது. நீங்கள் லாக் செய்யும் மதிப்பு தற்போதைய render-க்கு உரியதே தவிர, அடுத்த render-க்கு உரியதல்ல.

• Source Map Errors Production நிலையில், உங்கள் குறியீடு minified மற்றும் bundled செய்யப்படுகிறது. உங்கள் source maps பழையதாகவோ அல்லது தவறாகவோ இருந்தால், console தவறான குறியீட்டு வரியைக் காட்டும். பிழை உண்மையானதுதான், ஆனால் அதன் இடம் தவறானது.

சிறந்த முறையில் பிழைத்திருத்தம் செய்வது எப்படி:

• ஸ்னாப்ஷாட்டுகளை (snapshots) எடுக்க structuredClone-ஐப் பயன்படுத்தவும் ஒரு பொருளை அது இப்போது இருக்கும் அதே நிலையில் பார்க்க வேண்டுமென்றால், இதைப் பயன்படுத்தவும்: const snap = structuredClone(obj) console.log(snap)

• பெரிய பொருள்களுக்குப் பதிலாக primitives-களை லாக் செய்யவும் IDs, timestamps அல்லது status strings-களை லாக் செய்யவும். இது lazy evaluation மற்றும் செயல்திறன் பாதிப்பு (performance hits) ஆகியவற்றின் அபாயத்தைக் குறைக்கிறது.

• debugger-ஐப் பயன்படுத்தவும் செயல்பாட்டை நிறுத்த breakpoints-களைப் பயன்படுத்தவும். இது உங்கள் குறியீட்டின் நேரத்தை மாற்றாமல், உண்மையான state மற்றும் call stack-ஐ ஆய்வு செய்ய அனுமதிக்கிறது.

• framework DevTools-களைப் பயன்படுத்தவும் நீங்கள் React அல்லது Vue பயன்படுத்தினால், அவற்றின் பிரத்யேக DevTools-களைப் பயன்படுத்தவும். அவை logs-களை விட lifecycle மற்றும் render நிலைகளைத் துல்லியமாகக் காட்டுகின்றன.

விரைவான ஆய்வுக்கு console ஒரு சிறந்த கருவி. ஆனால் அதை உங்கள் இறுதித் truth (உண்மைத் தரவு) என்று எடுத்துக்கொள்ளாதீர்கள்.

மூலம்: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc