ನಿಮ್ಮ ಕನ್ಸೋಲ್ ನಿಮಗೆ ಸುಳ್ಳು ಹೇಳುತ್ತಿದೆ

ಡೀಬಗ್ ಮಾಡುವಾಗ ನಿಮ್ಮ ಬ್ರೌಸರ್ DevTools ನಿಮ್ಮನ್ನು ದಾರಿ ತಪ್ಪಿಸಬಹುದು. ಅದು ಕೆಟ್ಟದಾಗಿಲ್ಲ. ಅದು ವೇಗಕ್ಕಾಗಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲ್ಪಟ್ಟಿದೆ, ಪರಿಪೂರ್ಣ ನಿಖರತೆಗಾಗಿ ಅಲ್ಲ.

ನೀವು ಯಾವಾಗಲೂ console.log ಅನ್ನು ಏಕೆ ನಂಬಲು ಸಾಧ್ಯವಿಲ್ಲ ಎಂಬ ಕಾರಣಗಳು ಇಲ್ಲಿವೆ.

• Lazy Evaluation ನೀವು ಒಂದು ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಲಾಗ್ ಮಾಡಿದಾಗ, ಬ್ರೌಸರ್ ಅದನ್ನು ತಕ್ಷಣವೇ ಕಾಪಿ ಮಾಡುವುದಿಲ್ಲ. ಅದು ಲೈವ್ ರೆಫರೆನ್ಸ್ ಅನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ. ನೀವು ಅದನ್ನು ವಿಸ್ತರಿಸಲು (expand) ಬಾಣದ ಗುರುತನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಬ್ರೌಸರ್ ಅದರ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಓದುತ್ತದೆ. ನೀವು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೊದಲು ನಿಮ್ಮ ಕೋಡ್ ಆ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಬದಲಾಯಿಸಿದರೆ, ನೀವು ಹಳೆಯ ಮೌಲ್ಯದ ಬದಲಿಗೆ ಹೊಸ ಮೌಲ್ಯವನ್ನು ನೋಡುತ್ತೀರಿ.

• The Heisenbug Effect console.log ಅನ್ನು ಸೇರಿಸುವುದು ವಾಸ್ತವವಾಗಿ ಬಗ್‌ಗಳನ್ನು (bugs) ಮರೆಮಾಡಬಹುದು. ಲಾಗಿಂಗ್ ಮಾಡಲು ಸಮಯ ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳು ಬೇಕಾಗುತ್ತವೆ. ವೇಗವಾದ ಕೋಡ್‌ನಲ್ಲಿ, ಈ ಸಣ್ಣ ವಿಳಂಬವು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸಮಯದ ಕ್ರಮವನ್ನು (timing) ಬದಲಾಯಿಸಬಹುದು. ನೀವು ಗಮನಿಸುತ್ತಿರುವಾಗ ಇದು race conditions ಸಂಭವಿಸದಂತೆ ತಡೆಯಬಹುದು, ಇದರಿಂದ ಬಗ್ ಮಾಯವಾದಂತೆ ಕಾಣುತ್ತದೆ.

• React State Traps setCount ಕಾಲ್ ಮಾಡಿದ ತಕ್ಷಣವೇ ಸ್ಟೇಟ್ ಅನ್ನು ಲಾಗ್ ಮಾಡಿದರೆ ಹಳೆಯ ಮೌಲ್ಯವೇ ಕಾಣಿಸುತ್ತದೆ. ಇದು closures ಮತ್ತು React ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಹೇಗೆ ಶೆಡ್ಯೂಲ್ ಮಾಡುತ್ತದೆ ಎಂಬ ಕಾರಣದಿಂದ ಸಂಭವಿಸುತ್ತದೆ. ನೀವು ಲಾಗ್ ಮಾಡುವ ಮೌಲ್ಯವು ಪ್ರಸ್ತುತ ರೆಂಡರ್ (current render) ಗೆ ಸೇರಿದ್ದೇ ಹೊರತು ಮುಂದಿನದಕ್ಕಲ್ಲ.

• Source Map ದೋಷಗಳು ಪ್ರೊಡಕ್ಷನ್‌ನಲ್ಲಿ (production), ನಿಮ್ಮ ಕೋಡ್ ಮಿನಿಫೈ (minified) ಮತ್ತು ಬಂಡಲ್ ಮಾಡಲ್ಪಟ್ಟಿರುತ್ತದೆ. ನಿಮ್ಮ source maps ಹಳೆಯದಾಗಿದ್ದರೆ ಅಥವಾ ತಪ್ಪಾಗಿದ್ದರೆ, ಕನ್ಸೋಲ್ ತಪ್ಪಾದ ಕೋಡ್ ಸಾಲನ್ನು ತೋರಿಸುತ್ತದೆ. ದೋಷವು ನಿಜವಾಗಿರುತ್ತದೆ, ಆದರೆ ಅದರ ಸ್ಥಳ ತಪ್ಪಾಗಿರುತ್ತದೆ.

ಉತ್ತಮವಾಗಿ ಡೀಬಗ್ ಮಾಡುವುದು ಹೇಗೆ:

  • ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು structuredClone ಬಳಸಿ ಒಂದು ಆಬ್ಜೆಕ್ಟ್ ಈಗ ಹೇಗಿದೆಯೋ ಹಾಗೆಯೇ ನೋಡಬೇಕೆಂದಿದ್ದರೆ, ಇದನ್ನು ಬಳಸಿ: const snap = structuredClone(obj) console.log(snap)

  • ದೊಡ್ಡ ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಬದಲಿಗೆ primitives ಲಾಗ್ ಮಾಡಿ IDಗಳು, ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್‌ಗಳು ಅಥವಾ ಸ್ಟೇಟಸ್ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಲಾಗ್ ಮಾಡಿ. ಇದು lazy evaluation ಮತ್ತು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಕುಸಿತದ ಅಪಾಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

  • debugger ಬಳಸಿ ಎಕ್ಸಿಕ್ಯೂಷನ್ ಅನ್ನು ನಿಲ್ಲಿಸಲು breakpoints ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಕೋಡ್‌ನ ಸಮಯದ ಕ್ರಮವನ್ನು ಬದಲಾಯಿಸದೆ, ನಿಜವಾದ ಸ್ಟೇಟ್ ಮತ್ತು call stack ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

  • ಫ್ರೇಮ್‌ವರ್ಕ್ DevTools ಬಳಸಿ ನೀವು React ಅಥವಾ Vue ಬಳಸುತ್ತಿದ್ದರೆ, ಅವುಗಳ ನಿರ್ದಿಷ್ಟ DevTools ಬಳಸಿ. ಅವು ಲಾಗ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚು ನಿಖರವಾಗಿ lifecycle ಮತ್ತು render ಹಂತಗಳನ್ನು ತೋರಿಸುತ್ತವೆ.

ಕನ್ಸೋಲ್ ವೇಗವಾದ ಅನ್ವೇಷಣೆಗೆ ಉತ್ತಮ ಸಾಧನವಾಗಿದೆ. ಅದನ್ನು ನಿಮ್ಮ ಅಂತಿಮ ಸತ್ಯದ ಮೂಲವಾಗಿ (final source of truth) ಬಳಸಬೇಡಿ.

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