𝗛𝗼𝘄 𝘁𝗼 𝗗𝗲𝗯𝘂𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗟𝗶𝗸𝗲 𝗮 𝗦𝗲𝗻𝗶𝗼𝗿 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿
ಎಲ್ಲದಕ್ಕೂ console.log ಬಳಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ನೀವು ಪ್ರತಿ ವಾರ ಗಂಟೆಗಟ್ಟಲೆ ಸಮಯ ವ್ಯರ್ಥ ಮಾಡುತ್ತಿದ್ದೀರಿ.
ನಾನು 8 ವರ್ಷಗಳ ಕಾಲ ಪ್ರೊಡಕ್ಷನ್ ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸುವುದರಲ್ಲಿ ಕಳೆದಿದ್ದೇನೆ. ಈ ವರ್ಕ್ಫ್ಲೋ (workflow) ಡೀಬಗ್ ಮಾಡುವ ಸಮಯವನ್ನು 60% ರಷ್ಟು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
| ಪರಿಕರ (Tool) | ಬಳಕೆ (Use Case) | ಉಳಿತಾಯವಾದ ಸಮಯ (Time Saved) |
|---|---|---|
| Chrome DevTools Sources | Step-through debugging | 40% |
| Conditional Breakpoints | Loops ನಲ್ಲಿ ಬಗ್ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುವುದು | 25% |
| Performance Panel | Rendering bottlenecks ಪತ್ತೆಹಚ್ಚುವುದು | 35% |
| Network Panel | API timing ಸಮಸ್ಯೆಗಳು | 30% |
| Console.assert | Logic errors ಅನ್ನು ಮೊದಲೇ ಪತ್ತೆಹಚ್ಚುವುದು | 15% |
ಎಲ್ಲೆಡೆ ಲಾಗ್ಗಳನ್ನು (logs) ಚದುರಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಬದಲಾಗಿ ಈ ವಿಧಾನಗಳನ್ನು ಬಳಸಿ.
Conditional Breakpoints ಬಳಸಿ DevTools Sources ಅನ್ನು ತೆರೆಯಿರಿ. ಬ್ರೇಕ್ಪಾಯಿಂಟ್ (breakpoint) ಅನ್ನು ಸೆಟ್ ಮಾಡಲು ಒಂದು ಲೈನ್ ಸಂಖ್ಯೆಯನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ. ಅದರ ಮೇಲೆ ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು 'Edit breakpoint' ಆಯ್ಕೆಮಾಡಿ. ಒಂದು ಕಂಡೀಶನ್ (condition) ಅನ್ನು ಸೇರಿಸಿ. ನಿಮ್ಮ ಕಂಡೀಶನ್ ನಿಜವಾದಾಗ ಮಾತ್ರ ಡೀಬಗರ್ ನಿಲ್ಲುತ್ತದೆ. ಇದು ದೊಡ್ಡ ಲೂಪ್ಗಳಲ್ಲಿ (loops) ಗಂಟೆಗಟ್ಟಲೆ ಸಮಯವನ್ನು ಉಳಿಸುತ್ತದೆ.
Call Stack ಅನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ ಡೀಬಗರ್ ಸ್ಥಗಿತಗೊಂಡಾಗ, Call Stack ಪ್ಯಾನಲ್ ಅನ್ನು ಗಮನಿಸಿ. ಇದು ಬಗ್ಗೆ ಕಾರಣವಾದ ಹಾದಿಯನ್ನು ತೋರಿಸುತ್ತದೆ. ಒಂದು ಫ್ರೇಮ್ ಮೇಲೆ ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಅದನ್ನು ಉಳಿಸಲು 'Copy stack trace' ಆಯ್ಕೆಮಾಡಿ.
Log Points ಬಳಸಿ ಕೋಡ್ ಅನ್ನು ನಿಲ್ಲಿಸದೆ ಔಟ್ಪುಟ್ ಬೇಕೆಂದರೆ, Log points ಬಳಸಿ. ಲೈನ್ ಸಂಖ್ಯೆಯ ಮೇಲೆ ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು 'Add log point' ಆಯ್ಕೆಮಾಡಿ. ಇದು ನಿಮ್ಮ ಸೋರ್ಸ್ ಕೋಡ್ ಅನ್ನು ಬದಲಾಯಿಸುವುದಿಲ್ಲ. ನೀವು DevTools ಅನ್ನು ಮುಚ್ಚಿದಾಗ ಇದು ಮಾಯವಾಗುತ್ತದೆ.
Performance Panel ಮೂಲಕ ನಿಧಾನಗತಿಯ ಆಪ್ಗಳನ್ನು ಸರಿಪಡಿಸಿ Performance ಟ್ಯಾಬ್ ಅನ್ನು ತೆರೆಯಿರಿ. 'Record' ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ. ನಿಮ್ಮ ಪೇಜ್ ಅನ್ನು 5 ಸೆಕೆಂಡುಗಳ ಕಾಲ ಬಳಸಿ. ರೆಕಾರ್ಡಿಂಗ್ ನಿಲ್ಲಿಸಿ. Main thread ನಲ್ಲಿ 50ms ಗಿಂತ ಹೆಚ್ಚಿನ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ದೀರ್ಘ ಕಾರ್ಯಗಳನ್ನು (long tasks) ಹುಡುಕಿ. ಇದು ಲೇಔಟ್ (layout) ಮತ್ತು ಪೇಂಟಿಂಗ್ (painting) ಸಮಸ್ಯೆಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.
Network Panel ಅನ್ನು ಪರೀಕ್ಷಿಸಿ Waterfall ವೀಕ್ಷಣೆಯನ್ನು (view) ಪರಿಶೀಲಿಸಿ. ಕೆಂಪು ಅಥವಾ ನೇರಳೆ ಬಾರ್ಗಳು ಅಂದರೆ ರಿಕ್ವೆಸ್ಟ್ಗಳು ಬ್ಲಾಕ್ ಆಗಿವೆ ಎಂದರ್ಥ. ದೊಡ್ಡ ಅಂತರಗಳು ಅಂದರೆ JavaScript ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು (main thread) ಬ್ಲಾಕ್ ಮಾಡುತ್ತಿದೆ ಎಂದರ್ಥ. ಒಂದು ರಿಕ್ವೆಸ್ಟ್ ಮೇಲೆ ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ನಿಮ್ಮ ಟರ್ಮಿನಲ್ನಲ್ಲಿ API ಸಮಸ್ಯೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು 'Copy as cURL' ಆಯ್ಕೆಮಾಡಿ.
ನಿಮ್ಮ ಡೀಬಗ್ಗಿಂಗ್ ಚೆಕ್ಲಿಸ್ಟ್:
- ಕಂಡೀಷನಲ್ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ ಸೆಟ್ ಮಾಡಿ
- ಎಕ್ಸಿಕ್ಯೂಷನ್ ಪಾತ್ (execution path) ಗಾಗಿ Call Stack ಅನ್ನು ಪರಿಶೀಲಿಸಿ
- ಲೋಕಲ್ ವೇರಿಯೇಬಲ್ಗಳಿಗಾಗಿ (local variables) Scope ಪ್ಯಾನಲ್ ಬಳಸಿ
- ಮೌಲ್ಯಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಲಾಗ್ ಪಾಯಿಂಟ್ ಸೇರಿಸಿ
- ಟೈಮಿಂಗ್ ಸಮಸ್ಯೆಗಳಿಗಾಗಿ Performance ಪ್ರೊಫೈಲ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿ
- API ಸಮಸ್ಯೆಗಳಿಗಾಗಿ Network ಪ್ಯಾನಲ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ
ಈ ವರ್ಕ್ಫ್ಲೋ ಅನ್ನು ಕಲಿಯಲು ಎರಡು ವಾರಗಳು ಬೇಕಾಗಬಹುದು. ಇದು ನಿಮ್ಮ ವೃತ್ತಿಜೀವನಕ್ಕೆ ಅತ್ಯುತ್ತಮ ಉತ್ಪಾದಕತೆಯ ಅಪ್ಗ್ರೇಡ್ ಆಗಿದೆ. ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ಈಗಾಗಲೇ ಈ ಪರಿಕರಗಳಿವೆ. ಅವುಗಳನ್ನು ಬಳಸಿ.
Source: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p