چطور مثل یک توسعهدهنده ارشد JavaScript را دیباگ کنیم
از استفاده از console.log برای همه چیز دست بردارید. شما هر هفته ساعتها وقت خود را تلف میکنید.
من ۸ سال را صرف رفع مشکلات محیط عملیاتی (production) کردم. این گردش کار (workflow) زمان دیباگ کردن را تا ۶۰٪ کاهش میدهد.
| ابزار | مورد استفاده | زمان ذخیره شده |
|---|---|---|
| Chrome DevTools Sources | دیباگ مرحلهبهمرحله (Step-through) | ۴۰٪ |
| Conditional Breakpoints | محدود کردن باگها در حلقهها | ۲۵٪ |
| Performance Panel | یافتن گلوگاههای رندرینگ | ۳۵٪ |
| Network Panel | مشکلات زمانبندی API | ۳۰٪ |
| Console.assert | شناسایی زودهنگام خطاهای منطقی | ۱۵٪ |
از پخش کردن لاگها در همه جا خودداری کنید. در عوض از این روشها استفاده کنید.
۱. از Conditional Breakpoints استفاده کنید بخش Sources در DevTools را باز کنید. روی شماره خط کلیک کنید تا یک breakpoint قرار دهید. روی آن راستکلیک کرده و Edit breakpoint را انتخاب کنید. یک شرط اضافه کنید. دیباگر تنها زمانی متوقف میشود که شرط شما برقرار باشد. این کار باعث صرفهجویی ساعتها زمان در حلقههای بزرگ میشود.
۲. Call Stack را بررسی کنید وقتی دیباگر متوقف میشود، به پنل Call Stack نگاه کنید. این پنل مسیری را که منجر به باگ شده است نشان میدهد. روی یک frame راستکلیک کرده و Copy stack trace را انتخاب کنید تا آن را ذخیره کنید.
۳. از Log Points استفاده کنید اگر میخواهید بدون متوقف کردن کد، خروجی داشته باشید، از Log points استفاده کنید. روی شماره خط راستکلیک کرده و Add log point را انتخاب کنید. این کار کد منبع شما را تغییر نمیدهد و با بستن DevTools از بین میرود.
۴. اپلیکیشنهای کند را با Performance Panel اصلاح کنید تب Performance را باز کنید. روی Record کلیک کنید. ۵ ثانیه با صفحه کار کنید. ضبط را متوقف کنید. در Main thread به دنبال تسکهای طولانی بیش از ۵۰ میلیثانیه بگردید. این کار مشکلات layout و painting را آشکار میکند.
۵. پنل Network را بررسی کنید نمای Waterfall را چک کنید. نوارهای قرمز یا بنفش به معنای درخواستهای مسدود شده (blocked) هستند. شکافهای بزرگ به این معنی است که JavaScript در حال مسدود کردن main thread است. روی یک درخواست راستکلیک کرده و Copy as cURL را انتخاب کنید تا مشکلات API را در ترمینال خود تست کنید.
چکلیست دیباگ شما:
- تنظیم یک conditional breakpoint
- بررسی Call Stack برای یافتن مسیر اجرا
- استفاده از پنل Scope برای متغیرهای محلی (local variables)
- افزودن یک log point برای نظارت بر مقادیر
- ضبط یک Performance profile برای مشکلات زمانبندی
- بررسی پنل Network برای مشکلات API
تسلط بر این گردش کار دو هفته زمان میبرد. این بهترین ارتقای بهرهوری برای مسیر شغلی شماست. مرورگر شما از قبل این ابزارها را دارد. از آنها استفاده کنید.
منبع: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p