ਤੁਹਾਡਾ Console ਤੁਹਾਨੂੰ ਝੂਠ ਬੋਲ ਰਿਹਾ ਹੈ
ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ DevTools ਡੀਬੱਗਿੰਗ (debugging) ਦੌਰਾਨ ਤੁਹਾਨੂੰ ਗੁਮਰਾਹ ਕਰ ਸਕਦੇ ਹਨ। ਇਹ ਖਰਾਬ ਨਹੀਂ ਹੈ। ਇਹ ਸਹੀ ਸ਼ੁੱਧਤਾ (accuracy) ਦੀ ਬਜਾਏ ਰਫ਼ਤਾਰ ਲਈ ਅਨੁਕੂਲਿਤ (optimized) ਕੀਤਾ ਗਿਆ ਹੈ।
ਇੱਥੇ ਕਾਰਨ ਦੱਸੇ ਗਏ ਹਨ ਕਿ ਤੁਸੀਂ ਹਮੇਸ਼ਾ console.log 'ਤੇ ਭਰੋਸਾ ਕਿਉਂ ਨਹੀਂ ਕਰ ਸਕਦੇ।
• Lazy Evaluation ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ object ਨੂੰ log ਕਰਦੇ ਹੋ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਇਸਦੀ ਤੁਰੰਤ ਕਾਪੀ ਨਹੀਂ ਬਣਾਉਂਦਾ। ਇਹ ਇੱਕ live reference ਸਟੋਰ ਕਰਦਾ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (properties) ਨੂੰ ਉਦੋਂ ਹੀ ਪੜ੍ਹਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਵਧਾਉਣ (expand) ਲਈ ਤੀਰ (arrow) 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ। ਜੇਕਰ ਤੁਹਾਡਾ ਕੋਡ ਕਲਿੱਕ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਉਸ object ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਨਵੀਂ ਕੀਮਤ ਦਿਖਾਈ ਦੇਵੇਗੀ, ਪੁਰਾਣੀ ਨਹੀਂ।
• The Heisenbug Effect console.log ਜੋੜਨ ਨਾਲ ਅਸਲ ਵਿੱਚ ਬੱਗ (bugs) ਲੁਕ ਸਕਦੇ ਹਨ। Logging ਵਿੱਚ ਸਮਾਂ ਅਤੇ ਸਰੋਤ (resources) ਲੱਗਦੇ ਹਨ। ਤੇਜ਼ ਕੋਡ ਵਿੱਚ, ਇਹ ਛੋਟੀ ਜਿਹੀ ਦੇਰੀ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਟਾਈਮਿੰਗ ਨੂੰ ਬਦਲ ਸਕਦੀ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਦੇਖਣ ਦੌਰਾਨ race conditions ਨੂੰ ਹੋਣ ਤੋਂ ਰੋਕ ਸਕਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਬੱਗ ਗਾਇਬ ਹੋ ਜਾਂਦਾ ਹੈ।
• React State Traps setCount ਕਾਲ ਤੋਂ ਤੁਰੰਤ ਬਾਅਦ state ਨੂੰ log ਕਰਨ ਨਾਲ ਪੁਰਾਣੀ ਕੀਮਤ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ। ਇਹ closures ਅਤੇ React ਦੇ ਅਪਡੇਟ ਸ਼ੈਡਿਊਲ ਕਰਨ ਦੇ ਤਰੀਕੇ ਕਾਰਨ ਹੁੰਦਾ ਹੈ। ਜੋ ਕੀਮਤ ਤੁਸੀਂ log ਕਰਦੇ ਹੋ ਉਹ ਮੌਜੂਦਾ render ਦੀ ਹੁੰਦੀ ਹੈ, ਅਗਲੇ ਦੀ ਨਹੀਂ।
• Source Map Errors Production ਵਿੱਚ, ਤੁਹਾਡਾ ਕੋਡ minified ਅਤੇ bundled ਹੁੰਦਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਡੇ source maps ਪੁਰਾਣੇ ਜਾਂ ਗਲਤ ਹਨ, ਤਾਂ console ਕੋਡ ਦੀ ਗਲਤ ਲਾਈਨ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰੇਗਾ। ਗਲਤੀ ਅਸਲ ਹੈ, ਪਰ ਸਥਾਨ (location) ਗਲਤ ਹੈ।
ਬਿਹਤਰ ਡੀਬੱਗ (debug) ਕਿਵੇਂ ਕਰੀਏ:
Snapshots ਲੈਣ ਲਈ structuredClone ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੇਕਰ ਤੁਹਾਨੂੰ ਕਿਸੇ object ਨੂੰ ਬਿਲਕੁਲ ਉਸੇ ਤਰ੍ਹਾਂ ਦੇਖਣ ਦੀ ਲੋੜ ਹੈ ਜਿਵੇਂ ਉਹ ਇਸ ਸਮੇਂ ਹੈ, ਤਾਂ ਵਰਤੋ:
const snap = structuredClone(obj)console.log(snap)ਵੱਡੇ objects ਦੀ ਬਜਾਏ primitives ਨੂੰ log ਕਰੋ IDs, timestamps, ਜਾਂ status strings ਨੂੰ log ਕਰੋ। ਇਹ lazy evaluation ਅਤੇ performance ਦੇ ਪ੍ਰਭਾਵਾਂ ਦੇ ਜੋਖਮ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ।
Debugger ਦੀ ਵਰਤੋਂ ਕਰੋ Execution ਨੂੰ ਰੋਕਣ ਲਈ breakpoints ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡ ਦੀ ਟਾਈਮਿੰਗ ਬਦਲੇ ਬਿਨਾਂ ਅਸਲ state ਅਤੇ call stack ਦੀ ਜਾਂਚ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
Framework DevTools ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੇਕਰ ਤੁਸੀਂ React ਜਾਂ Vue ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਉਹਨਾਂ ਦੇ ਵਿਸ਼ੇਸ਼ DevTools ਦੀ ਵਰਤੋਂ ਕਰੋ। ਉਹ logs ਦੀ ਤੁਲਨਾ ਵਿੱਚ ਤੁਹਾਨੂੰ lifecycle ਅਤੇ render phases ਵਧੇਰੇ ਸ਼ੁੱਧਤਾ ਨਾਲ ਦਿਖਾਉਂਦੇ ਹਨ।
Console ਤੇਜ਼ ਖੋਜ (exploration) ਲਈ ਇੱਕ ਵਧੀਆ ਟੂਲ ਹੈ। ਇਸਨੂੰ ਸੱਚਾਈ ਦੇ ਆਪਣੇ ਅੰਤਿਮ ਸਰੋਤ (final source of truth) ਵਜੋਂ ਵਰਤੋ ਨਾ।
Source: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc