𝗛𝗼𝘄 𝘁𝗼 𝗗𝗲𝗯𝘂𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗟𝗶𝗸𝗲 𝗮 𝗦𝗲𝗻𝗶𝗼𝗿 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿
ਹਰ ਚੀਜ਼ ਲਈ console.log ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਬੰਦ ਕਰੋ। ਤੁਸੀਂ ਹਰ ਹਫ਼ਤੇ ਕਈ ਘੰਟੇ ਬਰਬਾਦ ਕਰਦੇ ਹੋ।
ਮੈਂ 8 ਸਾਲ ਪ੍ਰੋਡਕਸ਼ਨ (production) ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਸੁਲਝਾਉਣ ਵਿੱਚ ਬਿਤਾਏ ਹਨ। ਇਹ ਵਰਕਫਲੋ (workflow) ਡਿਬੱਗਿੰਗ ਦੇ ਸਮੇਂ ਨੂੰ 60% ਤੱਕ ਘਟਾ ਦਿੰਦਾ ਹੈ।
| ਟੂਲ (Tool) | ਵਰਤੋਂ ਦਾ ਮਕਸਦ (Use Case) | ਬਚਾਇਆ ਗਿਆ ਸਮਾਂ (Time Saved) |
|---|---|---|
| Chrome DevTools Sources | ਸਟੈਪ-ਥਰੂ ਡਿਬੱਗਿੰਗ (Step-through debugging) | 40% |
| Conditional Breakpoints | ਲੂਪਸ (loops) ਵਿੱਚ ਬੱਗਾਂ ਨੂੰ ਲੱਭਣਾ | 25% |
| Performance Panel | ਰੈਂਡਰਿੰਗ (rendering) ਦੀਆਂ ਰੁਕਾਵਟਾਂ ਲੱਭਣਾ | 35% |
| Network Panel | API ਟਾਈਮਿੰਗ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ | 30% |
| Console.assert | ਲੌਜਿਕ (logic) ਦੀਆਂ ਗਲਤੀਆਂ ਨੂੰ ਜਲਦੀ ਫੜਨਾ | 15% |
ਹਰ ਜਗ੍ਹਾ ਲੌਗਸ (logs) ਖਿਲਾਰਨਾ ਬੰਦ ਕਰੋ। ਇਸ ਦੀ ਬਜਾਏ ਇਹਨਾਂ ਤਰੀਕਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕੰਡੀਸ਼ਨਲ ਬ੍ਰੇਕਪੁਆਇੰਟਸ (Conditional Breakpoints) ਦੀ ਵਰਤੋਂ ਕਰੋ DevTools Sources ਖੋਲ੍ਹੋ। ਬ੍ਰੇਕਪੁਆਇੰਟ ਸੈੱਟ ਕਰਨ ਲਈ ਕਿਸੇ ਲਾਈਨ ਨੰਬਰ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਇਸ 'ਤੇ ਰਾਈਟ-ਕਲਿੱਕ ਕਰੋ ਅਤੇ Edit breakpoint ਚੁਣੋ। ਇੱਕ ਕੰਡੀਸ਼ਨ (condition) ਜੋੜੋ। ਡਿਬੱਗਰ ਉਦੋਂ ਹੀ ਰੁਕਦਾ ਹੈ ਜਦੋਂ ਤੁਹਾਡੀ ਕੰਡੀਸ਼ਨ ਸਹੀ (true) ਹੁੰਦੀ ਹੈ। ਇਹ ਵੱਡੇ ਲੂਪਸ (loops) 'ਤੇ ਕਈ ਘੰਟੇ ਬਚਾਉਂਦਾ ਹੈ।
ਕਾਲ ਸਟੈਕ (Call Stack) ਦਾ ਅਧਿਐਨ ਕਰੋ ਜਦੋਂ ਡਿਬੱਗਰ ਰੁਕਦਾ ਹੈ, ਤਾਂ Call Stack ਪੈਨਲ ਨੂੰ ਦੇਖੋ। ਇਹ ਉਸ ਰਸਤੇ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ ਜੋ ਬੱਗ (bug) ਤੱਕ ਲੈ ਕੇ ਗਿਆ ਸੀ। ਕਿਸੇ ਫਰੇਮ 'ਤੇ ਰਾਈਟ-ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਸੇਵ ਕਰਨ ਲਈ Copy stack trace ਚੁਣੋ।
ਲੌਗ ਪੁਆਇੰਟਸ (Log Points) ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੇਕਰ ਤੁਸੀਂ ਕੋਡ ਨੂੰ ਰੋਕੇ ਬਿਨਾਂ ਆਉਟਪੁੱਟ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ Log points ਦੀ ਵਰਤੋਂ ਕਰੋ। ਕਿਸੇ ਲਾਈਨ ਨੰਬਰ 'ਤੇ ਰਾਈਟ-ਕਲਿੱਕ ਕਰੋ ਅਤੇ Add log point ਚੁਣੋ। ਇਹ ਤੁਹਾਡੇ ਸੋਰਸ ਕੋਡ (source code) ਨੂੰ ਨਹੀਂ ਬਦਲਦਾ। DevTools ਬੰਦ ਕਰਨ 'ਤੇ ਇਹ ਗਾਇਬ ਹੋ ਜਾਂਦਾ ਹੈ।
Performance Panel ਨਾਲ ਹੌਲੀ ਐਪਸ ਨੂੰ ਠੀਕ ਕਰੋ Performance ਟੈਬ ਖੋਲ੍ਹੋ। Record 'ਤੇ ਕਲਿੱਕ ਕਰੋ। 5 ਸੈਕਿੰਡ ਲਈ ਆਪਣੇ ਪੇਜ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਰਿਕਾਰਡਿੰਗ ਬੰਦ ਕਰੋ। Main thread ਵਿੱਚ 50ms ਤੋਂ ਵੱਧ ਦੇ ਲੰਬੇ ਟਾਸਕਾਂ (tasks) ਦੀ ਭਾਲ ਕਰੋ। ਇਹ ਲੇਆਉਟ (layout) ਅਤੇ ਪੇਂਟਿੰਗ (painting) ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਸਾਹਮਣੇ ਲਿਆਉਂਦਾ ਹੈ।
Network Panel ਦੀ ਜਾਂਚ ਕਰੋ Waterfall view ਚੈੱਕ ਕਰੋ। ਲਾਲ ਜਾਂ ਜਾਮਣੀ ਬਾਰਾਂ (bars) ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਰਿਕਵੈਸਟਾਂ (requests) ਰੁਕੀਆਂ ਹੋਈਆਂ ਹਨ। ਵੱਡੇ ਅੰਤਰ (gaps) ਦਾ ਮਤਲਬ ਹੈ ਕਿ JavaScript ਮੇਨ ਥ੍ਰੈਡ (main thread) ਨੂੰ ਰੋਕ ਰਹੀ ਹੈ। ਕਿਸੇ ਰਿਕਵੈਸਟ 'ਤੇ ਰਾਈਟ-ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਆਪਣੇ ਟਰਮੀਨਲ (terminal) ਵਿੱਚ API ਸਮੱਸਿਆਵਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ Copy as cURL ਚੁਣੋ।
ਤੁਹਾਡੀ ਡਿਬੱਗਿੰਗ ਚੈੱਕਲਿਸਟ:
- ਇੱਕ ਕੰਡੀਸ਼ਨਲ ਬ੍ਰੇਕਪੁਆਇੰਟ ਸੈੱਟ ਕਰੋ
- ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਪਾਥ (execution path) ਲਈ Call Stack ਚੈੱਕ ਕਰੋ
- ਲੋਕਲ ਵੇਰੀਏਬਲਜ਼ (local variables) ਲਈ Scope ਪੈਨਲ ਦੀ ਵਰਤੋਂ ਕਰੋ
- ਵੈਲਯੂਜ਼ (values) ਦੀ ਨਿਗਰਾਨੀ ਲਈ ਇੱਕ ਲੌਗ ਪੁਆਇੰਟ ਜੋੜੋ
- ਟਾਈਮਿੰਗ ਸਮੱਸਿਆਵਾਂ ਲਈ Performance ਪ੍ਰੋਫਾਈਲ ਰਿਕਾਰਡ ਕਰੋ
- API ਸਮੱਸਿਆਵਾਂ ਲਈ Network ਪੈਨਲ ਚੈੱਕ ਕਰੋ
ਇਸ ਵਰਕਫਲੋ ਵਿੱਚ ਮਾਹਰ ਹੋਣ ਲਈ ਦੋ ਹਫ਼ਤੇ ਲੱਗਦੇ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਕਰੀਅਰ ਲਈ ਉਤਪਾਦਕਤਾ (productivity) ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਅਪਗ੍ਰੇਡ ਹੈ। ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਪਹਿਲਾਂ ਹੀ ਇਹ ਟੂਲ ਹਨ। ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਸਰੋਤ (Source): https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p