Featured Articles

12 JavaScript Debugging Techniques Every Developer Overlooks but Needs to Master for Flawless Code

12 JavaScript Debugging Techniques Every Developer Overlooks but Needs to Master for Flawless Code

12 تکنیک دیباگ جاوااسکریپت که هر توسعه‌دهنده باید بلد باشد

1. استفاده از console.table برای مشاهده‌ی داده‌ها

اکثر توسعه‌دهندگان با console.log آشنا هستند، اما استفاده از console.table می‌تواند داده‌ها را به صورت جدولی و منظم نمایش دهد. این باعث می‌شود که اشیاء و آرایه‌های پیچیده را بهتر و سریع‌تر بررسی کنید.

به عنوان مثال، اگر لیستی از کاربران داشته باشید، نمایش آن به صورت جدول، فهم ساختار و مقادیر هر کدام را ساده‌تر می‌کند. این تکنیک مخصوصاً در زمان کار با داده‌های API بسیار کاربردی است.

مستندات رسمی MDN نیز استفاده از console.table را برای دیباگ توصیه کرده است (MDN Web Docs, 2023).

2. استفاده از Debugger Statement

یکی از روش‌های مستقیم و تأثیرگذار برای متوقف کردن اجرای کد در نقطه‌ی مورد نظر خود، استفاده از دستور debugger; در کد است. هنگام اجرای این دستور، مرورگر به صورت اتوماتیک اجرا را متوقف کرده و اجازه می‌دهد بررسی دقیقی انجام دهید.

این روش نسبت به اضافه کردن چندین console.log دقیق‌تر و به‌صرفه‌تر است به‌خصوص در پروژه‌های بزرگ که دنبال ایرادهای پیچیده هستید.

اغلب ادیتورهای مدرن مانند VSCode و مرورگرهای کروم و فایرفاکس از این دستور پشتیبانی کامل دارند.

3. استفاده از Breakpoints در DevTools

استفاده از Breakpoint یکی از قدرتمندترین امکانات دیباگ است که معمولاً نادیده گرفته می‌شود. با تنظیم Breakpoint در کد می‌توانید اجرای برنامه را در یک خط خاص متوقف کرده و متغیرها و وضعیت برنامه را با دقت بالا بررسی کنید.

این ویژگی مخصوصا برای خطاهای غیر قابل پیش‌بینی که باعث کرش شدن برنامه می‌شوند بسیار مفید است زیرا به شما اجازه می‌دهد به صورت مرحله به مرحله کد را اجرا و بررسی کنید.

کنسول DevTools مرورگر کروم یکی از شناخته‌شده‌ترین ابزارهایی است که از Breakpoint به‌خوبی پشتیبانی می‌کند.

4. بررسی خطاها با Stack Trace

هرگاه خطایی در جاوااسکریپت رخ می‌دهد، مرورگر یک Stack Trace تولید می‌کند که مسیر اجرای کد تا لحظه خطا را نشان می‌دهد. بررسی دقیق این مسیر به شما کمک می‌کند منبع دقیق خطا را بیابید.

متأسفانه بسیاری از توسعه‌دهندگان فقط به پیام ساده خطا اکتفا می‌کنند و این جزئیات کلیدی را نادیده می‌گیرند.

مطالعه و درک ساختار Stack Trace باعث می‌شود روند رفع خطاهای پیچیده سرعت گیرد و دانش شما در عیب‌یابی افزایش یابد.

5. استفاده از Conditional Breakpoints

در پروژه‌های بزرگ، ممکن است نخواهید هر بار اجرای کد متوقف شود، بلکه فقط وقتی شرایط خاصی برقرار است. اینجا است که Conditional Breakpoints به کمک می‌آیند.

می‌توانید شرط مورد نظر خود را برای اجرای Breakpoint تعیین کنید، مثلا وقتی یک متغیر خاص مقدار مشخصی دارد. این روش زمان و انرژی شما را به شکل چشمگیری ذخیره می‌کند.

برای مثال، در Chrome DevTools با راست کلیک روی Breakpoint و انتخاب Edit breakpoint می‌توانید شرط بنویسید.

6. استفاده از Network Panel برای بررسی درخواست‌ها

خطاهای مرتبط با شبکه در جاوااسکریپت بسیار متداول هستند؛ مثل زمان پاسخ‌دهی طولانی یا خطاهای API. Network Panel در ابزارهای توسعه‌ی مرورگر، تمام درخواست‌های HTTP را به شما نشان می‌دهد.

با بررسی این پنل می‌توانید ببینید چه داده‌هایی ارسال و دریافت شده‌اند و آیا خطایی از سمت سرور رخ داده است یا خیر.

این تکنیک مخصوصاً برای دیباگ برنامه‌های SPA (Single Page Application) که بیشتر با API کار می‌کنند، حیاتی است.

7. استفاده از Performance Panel برای یافتن مشکلات

گاهی اوقات مشکل فقط خطا نیست بلکه کاهش سرعت اجرای برنامه است. Performance Panel در DevTools به شما اجازه می‌دهد عملکرد کد را ثبت و تجزیه و تحلیل کنید.

با پایش این بخش می‌توانید نقاط گلوگاهی یا کدهایی که بیش از حد CPU را مصرف می‌کنند را شناسایی کنید و بهینه‌سازی کنید.

این روش به خصوص هنگام کار روی پروژه‌های پیچیده که بار زیادی به مرورگر تحمیل می‌کنند توصیه می‌شود.

8. استفاده از Source Maps برای دیباگ کدهای Transpiled

امروزه بسیاری از پروژه‌ها به جای استفاده مستقیم از جاوااسکریپت، Code را با TypeScript یا Babel تبدیل می‌کنند. در این حالت خطاها و اجرای کد در فایل‌های کامپایل شده اتفاق می‌افتد.

استفاده از Source Maps به شما امکان می‌دهد در DevTools خطاها را در فایل‌های اصلی و قابل فهم مشاهده کنید و نه در کد تبدیل شده.

فعال کردن صحیح Source Maps از ضروریات دیباگ حرفه‌ای در پروژه‌های مدرن است.

9. استفاده از try/catch برای مدیریت هوشمندانه خطاها

قرار دادن کد در بلوک‌های try/catch به شما امکان می‌دهد خطاها را به صورت کنترل شده مدیریت کنید و اطلاعات دقیق‌تری برای دیباگ فراهم نمایید.

همچنین می‌توانید در catch پیام‌های خاصی را لاگ کنید یا کارهای بازیابی انجام دهید که در هنگام خطا برنامه کاملاً سقوط نکند.

این روش باعث بالا رفتن کیفیت و پایداری نرم‌افزار و راحت‌تر شدن فرایند عیب‌یابی می‌شود.

10. استفاده از Linting Tools برای پیشگیری از خطاها

استفاده از ابزارهای لینتینگ مانند ESLint به شما کمک می‌کند خطاهای احتمالی کد را پیش از اجرا پیدا کنید. این ابزارها کد شما را بر اساس قواعد مشخص تحلیل می‌کنند و هشدار می‌دهند.

استفاده از این ابزارها به صورت مکرر و به خصوص در پروژه‌های بزرگ باعث کاهش قابل توجه باگ‌ها و دیباگ زمان اجرا می‌شود.

استفاده از این تکنیک در ترکیب با سایر تکنیک‌های دیباگ مثمر ثمرتر واقع خواهد شد.

Related Articles