ایک سینئر ڈویلپر کی طرح JavaScript کو ڈیبگ کیسے کریں
ہر چیز کے لیے console.log کا استعمال بند کریں۔ آپ ہر ہفتے گھنٹوں ضائع کرتے ہیں۔
میں نے پروڈکشن کے مسائل حل کرنے میں 8 سال گزارے ہیں۔ یہ ورک فلو ڈیبگنگ کے وقت کو 60% تک کم کر دیتا ہے۔
| ٹول | استعمال کا طریقہ | بچایا گیا وقت |
|---|---|---|
| Chrome DevTools Sources | Step-through debugging | 40% |
| Conditional Breakpoints | لوپس (loops) میں بگ کو محدود کرنا | 25% |
| Performance Panel | رینڈرنگ کی رکاوٹوں (rendering bottlenecks) کو تلاش کرنا | 35% |
| Network Panel | API ٹائمنگ کے مسائل | 30% |
| Console.assert | منطقی غلطیوں (logic errors) کو جلد پکڑنا | 15% |
ہر جگہ لاگز (logs) بکھیرنا بند کریں۔ اس کے بجائے یہ طریقے استعمال کریں۔
Conditional Breakpoints کا استعمال کریں DevTools Sources کھولیں۔ بریک پوائنٹ سیٹ کرنے کے لیے لائن نمبر پر کلک کریں۔ اس پر رائٹ کلک کریں اور
Edit breakpointمنتخب کریں۔ ایک شرط (condition) شامل کریں۔ ڈیبگر صرف تب رکتا ہے جب آپ کی شرط درست ہو۔ یہ بڑے لوپس پر گھنٹوں بچاتا ہے۔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 ویو چیک کریں۔ سرخ یا جامنی بارز کا مطلب ہے کہ درخواستیں (requests) بلاک ہو گئی ہیں۔ بڑے وقفے کا مطلب ہے کہ JavaScript مین تھریڈ کو بلاک کر رہی ہے۔ کسی بھی ریکویسٹ پر رائٹ کلک کریں اور اپنے ٹرمینل میں API کے مسائل کو ٹیسٹ کرنے کے لیے
Copy as cURLمنتخب کریں۔
آپ کی ڈیبگنگ چیک لسٹ:
- ایک conditional breakpoint سیٹ کریں
- ایگزیکیوشن پاتھ کے لیے Call Stack چیک کریں
- لوکل ویری ایبلز کے لیے Scope پینل استعمال کریں
- ویلیوز مانیٹر کرنے کے لیے log point شامل کریں
- ٹائمنگ کے مسائل کے لیے Performance پروفائل ریکارڈ کریں
- API کے مسائل کے لیے Network پینل چیک کریں
اس ورک فلو میں مہارت حاصل کرنے میں دو ہفتے لگتے ہیں۔ یہ آپ کے کیریئر کے لیے پروڈکٹیوٹی (productivity) کا بہترین اپ گریڈ ہے۔ آپ کے براؤزر میں یہ ٹولز پہلے سے موجود ہیں۔ انہیں استعمال کریں۔
ماخذ: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p