JavaScript Debugging

خطایابی کد در جاوا اسکریپت

در نوشتن کد یک برنامه ممکن است خطاهایی مانند خطاهای نوشتاری یا منطقی روی دهند. شناسایی بسیاری از این خطاها دشوار است. اغلب هنگامی که کد یک برنامه شامل خطاهایی است، چیزی اتفاق نمی‌افتد. هیچ پیام خطایی وجود ندارد و شما هیچ گونه سرنخی ندارید که کجا باید دنبال خطا باشید.

جستجو برای خطاها و درست کردن آن‌ها را در اصطلاح برنامه‌نویسی خطایابی یا debugging می‌گویند.

خطایاب‌های جاوا اسکریپت

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

به وسیله یک خطایاب می‌توانید breakpoints (جاهایی که اجرای برنامه متوقف می‌شود) را تعیین کنید و متغیرها را در حالی که برنامه اجرا می‌شود بررسی کنید.

تابع شیء ()console.log

از این تابع شیء می‌توانید برای نمایش مقادیر جاوا اسکریپت در پنجره خطایاب مرورگر استفاده کنید. برای دسترسی به خطایاب در بیشتر مروگرها مانند Chrome, Edge,... کافی است که بعد از باز کردن مروگر راست کلیک کرده و گزینه Inspect را انتخاب کنید. همچنین می‌توانید از ترکیب کلیدهای ctrl + shift + I و یا ساده‌تر آنکه تنها با فشردن کلید F12 برای باز کردن آن استفاده کنید. بعد از باز شدن، تب console را انتخاب کنید.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> My First Web Page </h2>
    <p> Activate debugging in your browser (Chrome, IE, Firefox) 
      with F12, and select "Console" in the debugger menu. 
    </p>
    <script>
      a = 5;
      b = 6;
      c = a + b;
      console.log(c);
    </script>
  </body>
</html>

خروجی:

قرار دادن breakpoint

در پنجره خطایاب می‌توانید breakpointها را قرار دهید. در هر یک از این نقاط جاوا اسکریپت اجرای برنامه را متوقف می‌کند و به شما این امکان را می‌دهد که مقادیر جاوا اسکریپت را مورد بررسی قرار دهید. بعد از بررسی مقادیر می‌توانید اجرای برنامه را ادامه دهید (معمولاً توسط کلید play)

کلید واژه debugger

کلید واژه debugger اجرای جاوا اسکریپت را متوقف می‌کند و تابع debugging (اگر امکان آن وجود داشته باشد) را فرا می‌خواند. به عبارت دیگر همان اثری را دارد که قرار دادن breakpoint دارد. اگر debugging در دسترس نباشد، اتفاقی رخ نخواهد داد. در مثال زیر قبل از خط سوم اجرای کد متوقف خواهد شد.


        let x = 15 * 5; 

        debugger; 

        document.getElementById("demo").innerHTML = x;

<< مبحث قبلی مبحث بعدی >>