మీ కన్సోల్ మీకు అబద్ధం చెబుతోంది

డీబగ్గింగ్ చేసేటప్పుడు మీ బ్రౌజర్ DevTools మిమ్మల్ని తప్పుదారి పట్టించవచ్చు. అది పాడైపోయిందని కాదు. అది ఖచ్చితత్వం కోసం కాకుండా, వేగం కోసం ఆప్టిమైజ్ చేయబడింది.

మీరు ఎల్లప్పుడూ console.log ని ఎందుకు నమ్మలేరో ఇక్కడ చూడండి.

• Lazy Evaluation మీరు ఒక ఆబ్జెక్ట్‌ను లాగ్ చేసినప్పుడు, బ్రౌజర్ దానిని వెంటనే కాపీ చేయదు. అది ఒక లైవ్ రిఫరెన్స్‌ను స్టోర్ చేస్తుంది. మీరు దానిని విస్తరించడానికి (expand) బాణం గుర్తుపై క్లిక్ చేసినప్పుడు మాత్రమే బ్రౌజర్ ఆ ప్రాపర్టీలను చదువుతుంది. మీరు క్లిక్ చేయడానికి ముందే మీ కోడ్ ఆ ఆబ్జెక్ట్‌ను మారిస్తే, మీరు పాత విలువను కాకుండా కొత్త విలువను చూస్తారు.

• The Heisenbug Effect console.log ని జోడించడం వల్ల నిజానికి బగ్స్ దాగిపోవచ్చు. లాగింగ్ చేయడానికి సమయం మరియు వనరులు అవసరమవుతాయి. వేగవంతమైన కోడ్‌లో, ఈ చిన్న ఆలస్యం మీ అప్లికేషన్ యొక్క టైమింగ్‌ను మార్చవచ్చు. మీరు గమనిస్తున్నప్పుడు ఇది రేస్ కండిషన్స్ (race conditions) జరగకుండా ఆపివేసి, బగ్ కనిపించకుండా చేయవచ్చు.

• React State Traps setCount కాల్ చేసిన వెంటనే స్టేట్‌ను లాగ్ చేస్తే పాత విలువ కనిపిస్తుంది. ఇది క్లోజర్స్ (closures) మరియు React అప్‌డేట్‌లను ఎలా షెడ్యూల్ చేస్తుంది అనే దాని వల్ల జరుగుతుంది. మీరు లాగ్ చేసే విలువ ప్రస్తుత రెండర్‌కు సంబంధించింది, తదుపరి రెండర్‌కు కాదు.

• Source Map Errors ప్రొడక్షన్‌లో, మీ కోడ్ మినీఫై (minified) మరియు బండిల్ (bundled) చేయబడుతుంది. మీ సోర్స్ మ్యాప్‌లు పాతవి లేదా తప్పుగా ఉంటే, కన్సోల్ తప్పు కోడ్ లైన్‌ను చూపిస్తుంది. ఎర్రర్ నిజమే కావచ్చు, కానీ అది ఉన్న ప్రదేశం తప్పు.

మెరుగ్గా డీబగ్ చేయడం ఎలా:

  • స్నాప్‌షాట్‌లను తీసుకోవడానికి structuredClone ఉపయోగించండి ఒక ఆబ్జెక్ట్‌ను అది ప్రస్తుతం ఎలా ఉందో అలాగే చూడాలనుకుంటే, దీన్ని ఉపయోగించండి: const snap = structuredClone(obj) console.log(snap)

  • పెద్ద ఆబ్జెక్ట్‌లకు బదులుగా ప్రిమిటివ్స్ (primitives) లాగ్ చేయండి IDs, టైమ్‌స్టాంప్‌లు (timestamps) లేదా స్టేటస్ స్ట్రింగ్స్‌ను లాగ్ చేయండి. ఇది లేజీ ఎవాల్యుయేషన్ మరియు పెర్ఫార్మెన్స్ సమస్యల ప్రమాదాన్ని తగ్గిస్తుంది.

  • debugger ఉపయోగించండి ఎగ్జిక్యూషన్‌ను ఆపడానికి బ్రేక్‌పాయింట్స్ (breakpoints) ఉపయోగించండి. ఇది మీ కోడ్ టైమింగ్‌ను మార్చకుండానే అసలైన స్టేట్ మరియు కాల్ స్టాక్ (call stack)ను తనిఖీ చేయడానికి అనుమతిస్తుంది.

  • ఫ్రేమ్‌వర్క్ DevTools ఉపయోగించండి మీరు React లేదా Vue ఉపయోగిస్తుంటే, వాటి ప్రత్యేక DevTools ఉపయోగించండి. అవి లాగ్‌ల కంటే లైఫ్‌సైకిల్ (lifecycle) మరియు రెండర్ దశలను మరింత ఖచ్చితంగా చూపుతాయి.

కన్సోల్ వేగవంతమైన పరిశీలన కోసం ఒక గొప్ప సాధనం. దానిని మీ అంతిమ ఆధారంగా (final source of truth) ఉపయోగించకండి.

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