നിങ്ങളുടെ കൺസോൾ നിങ്ങളെ കബളിപ്പിക്കുന്നു

ഡീബഗ്ഗിംഗ് സമയത്ത് നിങ്ങളുടെ ബ്രൗസർ DevTools നിങ്ങളെ തെറ്റിദ്ധരിപ്പിച്ചേക്കാം. അത് തകരാറിലായതല്ല. അത് വേഗതയ്ക്കായി ഒപ്റ്റിമൈസ് ചെയ്തതാണ്, കൃത്യതയ്ക്കായിട്ടല്ല.

എന്തുകൊണ്ടാണ് നിങ്ങൾക്ക് എപ്പോഴും console.log-നെ വിശ്വസിക്കാൻ കഴിയാത്തത് എന്ന് താഴെ പറയുന്നവയാണ് അതിന്റെ കാരണങ്ങൾ.

• Lazy Evaluation നിങ്ങൾ ഒരു ഒബ്‌ജക്റ്റ് ലോഗ് ചെയ്യുമ്പോൾ, ബ്രൗസർ അത് ഉടൻ തന്നെ കോപ്പി ചെയ്യുന്നില്ല. പകരം അത് ഒരു ലൈവ് റഫറൻസ് (live reference) ആയി സൂക്ഷിക്കുന്നു. നിങ്ങൾ അത് വികസിപ്പിക്കാനായി (expand) അമ്പടയാളത്തിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ മാത്രമാണ് ബ്രൗസർ അതിന്റെ പ്രോപ്പർട്ടികൾ വായിക്കുന്നത്. നിങ്ങൾ ക്ലിക്ക് ചെയ്യുന്നതിന് മുമ്പ് നിങ്ങളുടെ കോഡ് ആ ഒബ്‌ജക്റ്റിൽ മാറ്റം വരുത്തിയാൽ, നിങ്ങൾക്ക് പഴയ മൂല്യത്തിന് പകരം പുതിയ മൂല്യമായിരിക്കും കാണാൻ കഴിയുക.

• The Heisenbug Effect ഒരു console.log ചേർക്കുന്നത് യഥാർത്ഥത്തിൽ ബഗുകളെ മറച്ചുവെച്ചേക്കാം. ലോഗ് ചെയ്യുന്നത് സമയവും വിഭവങ്ങളും (resources) ആവശ്യപ്പെടുന്നു. വേഗതയേറിയ കോഡുകളിൽ, ഈ ചെറിയ കാലതാമസം നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ടൈമിംഗിൽ മാറ്റം വരുത്തിയേക്കാം. നിങ്ങൾ നിരീക്ഷിക്കുമ്പോൾ ഇത് race conditions സംഭവിക്കുന്നത് തടഞ്ഞേക്കാം, അങ്ങനെ ബഗ് അപ്രത്യക്ഷമാകും.

• React State Traps ഒരു setCount കോളിന് തൊട്ടുപിന്നാലെ സ്റ്റേറ്റ് ലോഗ് ചെയ്താൽ പഴയ മൂല്യമായിരിക്കും കാണിക്കുന്നത്. Closures, React അപ്‌ഡേറ്റുകൾ ഷെഡ്യൂൾ ചെയ്യുന്ന രീതി എന്നിവ കാരണമാണ് ഇത് സംഭവിക്കുന്നത്. നിങ്ങൾ ലോഗ് ചെയ്യുന്ന മൂല്യം നിലവിലെ render-ന്റേതാണ്, അടുത്തതിന്റേതല്ല.

• Source Map Errors Production-ൽ, നിങ്ങളുടെ കോഡ് minified ചെയ്യപ്പെടുകയും bundle ചെയ്യപ്പെടുകയും ചെയ്യുന്നു. നിങ്ങളുടെ source maps പഴയതോ തെറ്റോ ആണെങ്കിൽ, കൺസോൾ തെറ്റായ കോഡ് ലൈനിലേക്ക് വിരൽ ചൂണ്ടിയേക്കാം. പിശക് യഥാർത്ഥമാണ്, പക്ഷേ അതിന്റെ സ്ഥാനം തെറ്റാണ്.

എങ്ങനെ മികച്ച രീതിയിൽ ഡീബഗ് ചെയ്യാം:

• സ്നാപ്‌ഷോട്ടുകൾ എടുക്കാൻ structuredClone ഉപയോഗിക്കുക ഒരു ഒബ്‌ജക്റ്റ് ഇപ്പോൾ ഏത് അവസ്ഥയിലാണോ അത് കൃത്യമായി കാണണമെന്നുണ്ടെങ്കിൽ, ഇത് ഉപയോഗിക്കുക: const snap = structuredClone(obj) console.log(snap)

• വലിയ ഒബ്‌ജക്റ്റുകൾക്ക് പകരം primitives ലോഗ് ചെയ്യുക IDs, timestamps, അല്ലെങ്കിൽ status strings എന്നിവ ലോഗ് ചെയ്യുക. ഇത് lazy evaluation-ന്റെയും പെർഫോമൻസ് പ്രശ്നങ്ങളുടെയും സാധ്യത കുറയ്ക്കുന്നു.

• ഡീബഗ്ഗർ ഉപയോഗിക്കുക Execution താൽക്കാലികമായി നിർത്താൻ breakpoints ഉപയോഗിക്കുക. ഇത് നിങ്ങളുടെ കോഡിന്റെ ടൈമിംഗിൽ മാറ്റം വരുത്താതെ തന്നെ യഥാർത്ഥ state-ഉം call stack-ഉം പരിശോധിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

• ഫ്രെയിംവർക്ക് DevTools ഉപയോഗിക്കുക നിങ്ങൾ React അല്ലെങ്കിൽ Vue ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, അവയുടെ പ്രത്യേക DevTools ഉപയോഗിക്കുക. അവ ലോഗുകളേക്കാൾ കൃത്യമായി lifecycle-ഉം render ഘട്ടങ്ങളും കാണിച്ചുതരുന്നു.

വേഗത്തിലുള്ള പരിശോധനകൾക്ക് കൺസോൾ ഒരു മികച്ച ഉപകരണമാണ്. എന്നാൽ അതിനെ നിങ്ങളുടെ അന്തിമ സത്യമായി (final source of truth) കണക്കാക്കരുത്.

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