آموزش جاوا اسکریپت – جلسه ۵ – خطایابی [debug]

در مقاله قبل یعنی فصل چهارم از آموزش جاوا اسکریپت، مبحث توابع را آموزش دادیم که شامل این سرفصل ها بود:

• تعریف تابع به دو روش Expression و Declaration و مقایسه این دو روش.
• توابع کال بک (Callback)
• توابع Arrow Function

در این مقاله می خواهیم نحوه خطایابی (Debugging) کدهای جاوا اسکریپت را در مرورگر گوگل کروم آموزش دهیم. پس با ما باشید.

نحوه خطایابی (دیباگ:Debug) کدهای جاوا اسکریپت در مرورگر کروم:

قبل از اینکه سراغ نوشتن کدهای پیچیده تر در javascript برویم می خواهیم مبحث خطایابی یا دیباگ کدها را بررسی دهیم.

تعریف فرآیند Debugging:

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

پنل Source در گوگل کروم:

ممکن است نسخه مرورگر کروم شما متفاوت باشد اما مراحل زیر را می توانید براحتی انجام دهید:

• فایل نمونه index.html را در کروم باز کنید.
• کلید F12 (در ویندوز) یا کلیدهای ترکیبی Cmd+Opt+I (در مک) را بزنید.
• وارد تب Source شوید.

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

در این مرحله فایل hello.js را باز کنید:

همانطور که در تصویر فوق مشاهده می کنید تب Source سه بخش کلی دارد (از چپ به راست):

•  File Navigator: این بخش شامل فایل های برنامه است. HTML-CSS-JS و سایر فرمت ها بعلاوه تصاویر (images)
•  Code Editor: نمایش دهنده سورس کد فایل انتخاب شده در بخش file navigator
•  Javascript Debugging: برای انجام خطایابی یا دیباگ کردن کدهای جاوا اسکریپت

پنل Console در کروم:

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

BreakPoints:

اکنون به تب Sources رفته و فایل hello.js را باز کنید. روی خطوط 8 و 4 یک breakpoint قرار دهید. مطابق تصویر زیر:

در سمت راست تصویر فوق نیز نقاط شکست یا breakpoints تعریف شده خود را می بینیم. دیباگر به محض رسیدن به دستوراتی که breakpoint دارند اجرای ادامه دستورات را متوقف (pause) می کند. در حین اینکه اجرای برنامه در خط 4 متوقف است می توانید مقدار متغیرها را چک کنید و بطور کلی دیباگ را انجام دهید.

در بخش سمت راست می توان با راست کلیک روی هر یک از breakpoint ها، آن را حذف کنید، تمام breakpoint ها را حذف کنید، محل آن را مشخص کنید و…

در بخش وسط یعنی code editor با راست کلیک روی هر خط دلخواه می توان مانند تصویر زیر یک نقطه شکست شرطی یا conditional breakpoint تعریف کرد:

این breakpoint تنها زمانی اجرا می شود که شرطی که تعریف می کنید true باشد.

دستور Debugger:

روش دیگر متوقف کردن اجرای برنامه در خط موردنظر، تعریف دستور debugger می باشد:

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- the debugger stops here

  say(phrase);
}

این روش زمانی کارایی دارد که شما در حال کدنویسی هستید و نمی خواهید برای تعریف breakpoint به مرورگر مراجعه کنید.

متوقف کردن اجرای برنامه و بررسی آن:

برای مشاهده نحوه کار کردن این break point ها فقط کافیست دکمه F5 (در ویندوز و لینوکس) و Cmd+R (در Mac) را بزنید. مطابق تصویر زیر، اجرای برنامه در خط چهار pause خواهد شد.

مطابق تصویر بالا، لیست های بازشوی watch و call stack و scope را باز کنید:

• Watch: برای نمایش مقدار فعلی در هر عبارت. می توانید با زدن دکمه پلاس کنار watch یک عبارت دلخواه وارد کنید. مثلا کلمه phrase
• Call stack: برای نمایش زنجیره فراخوانی های تو در تو (nested call chain). در حال حاضر، debugger در حال اجرای hello() می باشد. اگر روی آیتم hello در لیست call stack کلیک کنیم دیباگر ما را به خطی از برنامه که دستور hello تعریف شده می برد.
• Scope: برای نمایش متغیرهای جاری. در بخش Local می توان متغیرهای محلی یا لوکال را مشاهده کرد و در بخش Global نیز متغیرهای گلوبال.

پیمایش یا trace اجرای برنامه:

الان وقت trace کردن اسکریپت است. بدین منظور به بخش سمت راست و بالای پنل مراجعه کنید. دکمه های زیر را خواهید دید:

• Resume: ادامه اجرای اسکریپت. با زدن کلید F8. اگر Breakpoint دیگری تعریف نکرده باشیم، با زدن resume اجرای برنامه تا انتها انجام خواهد شد و کنترل از دست debugger خارج خواهد شد. در مثال فوق با اجرای resume دیباگر سراغ breakpoint بعدی (در لاین 8) می رود و آنجا متوقف می شود.
• Step: برای اجرای دستور بعدی که کلید میانبر آن F9 است. اگر در مثال بالا روی Step کلیک کنیم پیغام alert نمایش می یابد. با اجرای step ، دستورات برنامه خط به خط اجرا خواهند شد.
• Step over: برای اجرای دستور بعدی بکار می رود. (اما اگر دستور بعدی تابع باشد آن را اجرا نمی کند). کلید F10. Step over شبیه step عمل می کند با این تفاوت که پس از رسیدن به یک تابع، وارد آن نمی شود (فقط آن را بطور نامحسوس اجرا می کند). اما در step دیباگر وارد بدنه تابع نیز می شود.
• Step into: شبیه عملیات step است با این تفاوت که step into وارد توابع نامتقارن یا asynchronous می شود اما step وارد بدنه اینگونه توابع (setTimeout) نمی شود. کلید F11
• Step out: اجرای تابع جاری را تا انتهای آن ادامه می دهد. کلید ترکیبی Shift+F11 .
• Enable/Disable all breakpoints: برای فعال یا غیرفعال کردن تمام Breakpoint ها.
• Enable/Disable automatic pause in case of an error: اگر این قابلیت فعال باشد، در صورتی که اسکریپت به خطا برخورد کند اجرای آن متوقف می شود و دیباگر به محل بروز خطا می رود.

نمایش لاگ (Logging):

برای مشاهده یک خروجی در کنسول می توان از تابع console.log استفاده کرد. بعنوان مثال تابع زیر اعداد 0 تا 4 را در کنسول نمایش می دهد:

// open console to see
for (let i = 0; i < 5; i++) {
  console.log("value,", i);
}

در فصل بعد یعنی فصل ششم، قصد داریم روش صحیح و استاندارد کدنویسی javascript را آموزش دهیم. مانند استفاده درست از سمی کالن، تعریف دستورات در چند خط، کامنت گذاری صحیح و معرفی ابزارهای Linter . پس با ما باشید.