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

پاسخ هوش مصنوعی

برای دیباگ کردن کدهای JavaScript و پیدا کردن خطاها، می توانید از ابزارهای توسعه دهنده (Developer Tools) مرورگرها استفاده کنید. در زیر مراحل دیباگ کردن کد جاوا اسکریپت آورده شده است:

1. مرورگر خود را باز کنید و به صفحه ای که کد جاوا اسکریپت در آن وجود دارد بروید.
2. با فشردن F12 یا راست کلیک بر روی صفحه و انتخاب Inspect، به ابزارهای توسعه دهنده دسترسی پیدا کنید.
3. به تب Sources بروید. در اینجا می توانید به فایل های جاوا اسکریپت دسترسی پیدا کنید.
4. فایل جاوا اسکریپت خود را پیدا کنید و بر روی شماره خط (جنبه نشانه گذاری) برای همان خطی که می خواهید دیباگ کنید کلیک کنید. این کار یک نقطه توقف (breakpoint) ایجاد می کند.
5. اکنون می توانید تابع خود را با استفاده از کنسول یا با تعامل با رابط کاربری اجرا کنید. وقتی اجرای کد به نقطه توقف می رسد، کد متوقف می شود.
6. شما می توانید می توانید متغیرها را مشاهده کنید و با استفاده از دکمه های Step over و Step into کد را خط به خط اجرا کنید.

با توجه به کدی که ارایه کرده اید، همچنین چند خطا در آن وجود دارد که می توانید اصلاح کنید:

function myFunc()
{
   let var1 = document.getElementById('div1');
   let var2 = var1.innerHTML; // اصلاح innerHtml به innerHTML

   var2 = parseInt(var2); // اصلاح parsInt به parseInt
   var2++;

   var1.innerHTML = var2; // اصلاح va2 به var2
}

با انجام این تغییرات و پیروی از مراحل دیباگ، می توانید به راحتی خطاهای کد خود را پیدا کنید و آنها را اصلاح کنید.

خطایابی در کدهای 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 برید. تصویر زیر رو مشاهده کنید.

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