Debugging

Debugging به فرآیند پیدا کردن و اصلاح خطاها (Bugs) در کد گفته می‌شود.
در جاوااسکریپت، ابزارها و روش‌های متعددی برای دیباگ کردن کدها وجود دارد.

🔹 1. استفاده از console

console.log()

  • رایج‌ترین روش برای نمایش مقدار متغیرها و وضعیت کد است.

let x = 5;
console.log("Value of x:", x);

سایر متدهای console

  • console.error() → نمایش خطا

  • console.warn() → هشدار

  • console.table() → نمایش آرایه یا آبجکت به صورت جدول

  • console.time() و console.timeEnd() → اندازه‌گیری زمان اجرای کد

console.time("Loop");
for(let i = 0; i < 1000; i++){}
console.timeEnd("Loop"); // Loop: 1.23ms

🔹 2. استفاده از debugger

  • با قرار دادن debugger; در کد، اجرای برنامه در DevTools متوقف می‌شود و می‌توان کد را مرحله به مرحله بررسی کرد.

function add(a, b) {
  debugger;
  return a + b;
}

console.log(add(5, 3));

🔹 3. ابزارهای مرورگر (Browser DevTools)

  • Breakpoints → توقف اجرای کد در خط مورد نظر

  • Watch Expressions → مشاهده مقادیر متغیرها در طول اجرای برنامه

  • Call Stack → مشاهده توابعی که فراخوانی شده‌اند

  • Network Tab → بررسی درخواست‌های AJAX و منابع شبکه

🔹 4. خطاهای رایج و بررسی آن‌ها

  1. Syntax Error → خطای نگارشی

    • معمولا در کنسول مشخص می‌شود و شامل شماره خط است.

  2. Reference Error → استفاده از متغیر تعریف نشده

console.log(x); // ReferenceError: x is not defined

  1. Type Error → استفاده نادرست از نوع داده

let num = 5;
num.toUpperCase(); // TypeError: num.toUpperCase is not a function

🔹 5. نکات حرفه‌ای

  • از console.log زیاد استفاده نکنید، چون باعث شلوغ شدن کنسول می‌شود.

  • بهتر است از Breakpoints و Watch در DevTools استفاده کنید.

  • برای پروژه‌های بزرگ، استفاده از Debugger + Unit Tests بسیار مفید است.

✅ خلاصه

  • Debugging برای پیدا کردن و رفع خطاهای کد است.

  • ابزارهای اصلی: console, debugger, Browser DevTools

  • بررسی خطاها: Syntax, Reference, Type Errors

  • روش‌های حرفه‌ای: Breakpoints، Watch، Call Stack