نحوه دیباگ کردن کدهای JavaScript در پروژه

خطایابی در کدهای javascript

برای دیباگ کردن و پیدا کردن خطاها در جاوااسکریپت چندین راه وجود داره.

• استفاده از دستور console.log

یکی از پرکاربردترین روش ها استفاده از دستور console.log می باشد. شما می تونید مقدار هر متغیر، لیست، آرایه یا تابعی را با استفاده از دستور console.log نمایش بدید. برای نمایش خروجی این دستور کافیه در مرورگر دکمه f12 رو بزنید و در سربرگ console خروجی رو مشاهده کنید. در ادامه یک مثال از این دستور رو مشاهده می کنید.

<script>
   function Sum()
   {
      a = 5;
      b = 6;
      c = a + b;
      console.log(c);
   }
</script>

در تصویر زیر نمونه خروجی این دستور را مشاهده می کنید:

• استفاده از کلمه کلیدی debugger

اگر در کدهای جاوااسکریپت خودتون کلمه debugger رو قرار بدید به محض اینکه به این دستور برسیم اجرا بقیه کدها متوقف میشه و دقیقا مثل کدهای سی شارپ می تونید خط به خط با استفاده از دکمه f10 کدها رو اجرا کنید و مقادیر رو مشاهده کنید. این دستور مشابه با breakpoint عمل می کنه. در ادامه یک نمونه استفاده از این دستور رو مشاهده می کنید:

<script>
   funtion myFunc()
   {
      let x = 15 * 5;
      debugger;
      document.getElementById("demo").innerHTML = x;
   }
</script>

دقت کنید برای نمایش خروجی این دستور و Trace کردن کدها باید دکمه f12 رو بزنید تا Inspect مرورگر باز بشه و به سربرگ Source برید. تصویر زیر رو مشاهده کنید.

خود مرورگرها هم امکاناتی برای دیباگ کردن کدهای جاوااسکریپت دارن ولی بهترین راه حل ها همین دو موردی بود که عرض کردم خدمتتون.