دیباگ کدهای جاوا اسکریپت با Chrome DevTools — به زبان ساده

به عنوان یک توسعه‌دهنده تازه‌کار یافتن و اصلاح باگ‌ها ممکن است کار دشواری به نظر بیاید. ممکن است وسوسه شوید که به صورت تصادفی از ()console.log برای اصلاح وضعیت اجرای کد استفاده کنید؛ اما نباید دیگر چنین کاری انجام دهید. در این مقاله در خصوص روش صحیح دیباگ کردن صحبت خواهیم کرد. بدین ترتیب با روش صحیح استفاده از ابزارهای توسعه‌دهنده کروم یا Chrome DevTools برای راه‌اندازی نقاط توقف و تنظیم آن در سراسر کد آشنا می‌شوید. گردش کاری این وضعیت عموماً روشی بسیار کارآمدتر برای یافتن و اصلاح باگ‌ها در کد به حساب می‌آید.

گام اول: بازتولید باگ

بازتولید کردن باگ همواره نخستین گام برای دیباگ کردن است. منظور از بازتولید باگ یافتن یک سری از اقداماتی است که به صورت مداوم منجر به بروز باگ می‌شوند. شما باید دفعات زیادی باگ را بازتولید کنید تا بتوانید هرگونه مراحل غیرضروری را حذف کنید.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

با پیگیری دستورالعمل‌های زیر می‌توانید اقدام به بازتولید باگی بکنید که قرار است در این راهنما رفع بکنیم.

• صفحه وبی که قرار است در این راهنما دیباگ بکنیم در این آدرس (+) قرار دارد. این صفحه را در یک برگه جدید مرورگر باز کنید.
• در این صفحه وب دمو عدد 5 را به عنوان Number 1 وارد کنید.
• مقدار 1 را برای Number 2 وارد کنید.
• روی گزینه Add Number 1 and Number 2 کلیک کنید.
• اگر به برچسب زیر ورودی‌ها و دکمه توجه کنید، می‌بینید که عبارت 5 + 1 = 51 را نمایش می‌دهد.

همان طور که می‌بینید نتیجه محاسبه نادرست است. نتیجه باید برابر با 6 باشد. این همان باگی است که قرار است رفع بکنیم.

گام دوم: مکث در اجرای کد با استفاده از Breakpoint

DevTools امکان مکث در اجرای کد را در میانه اجرای آن به ما می‌دهد و بدین ترتیب می‌توانیم به بررسی مقادیر همه متغیرها در هر لحظه بپردازیم. این ابزار برای ایجاد مکث در کد به نام «نقطه توقف» (Breakpoint) شناخته می‌شود. روش استفاده از آن به شرح زیر است:

• به برگه دمو بروید و با زدن دکمه Ctrl+Shift+I (در ویندوز) یا Cmd+Option+I (در مک) بخش DevTools مرورگر کروم را باز کنید.
• روی برگه Source کلیک کنید.
• روی Event Listener Breakpoint کلیک کنید تا این بخش باز شود. DevTools لیستی از دسته‌بندی‌های رویدادهای قابل باز شدن مانند Animation یا Clipboard را نمایش می‌دهد.
• در کنار دسته رویدادهای Mouse روی Expand کلیک کنید.
• در نهایت روی کادر انتخاب click کلیک کنید.

به صفحه دمو بازگردید و دوباره روی دکمه Add Number 1 and Number 2 کلیک کنید. این بار DevTools خطی از کد را که در پنل Source قرار دارد هایلایت می‌کند. در واقع DevTools خط کد زیر را هایلایت خواهد کرد:

1function onClick() {

علت چیست؟

زمانی که بخش click را انتخاب می‌کنید در واقع یک نقطه توقف مبتنی بر رویداد برای فراخوانی همه رویدادهای click ایجاد می‌کنید. از این پس هر زمان که روی یک گره در صفحه کلیک کنید DevTools به کمک دستگیره click آن گره در نخستین خط از کد مربوط به کلیک شدن آن متوقف می‌شود.

گام سوم: اجرای ادامه کد

یکی از دلایل متداول بروز باگ در مواردی است که اسکریپت‌ها با ترتیب نادرستی اجرا شوند. بدین ترتیب اجرای خط به خط کد (Step through) امکان پیگیری فرایند اجرای کد را به صورت خط به خط در اختیار شما قرار می‌دهد و می‌توانید دریابید که دقیقاً کدام اسکریپت‌ها با ترتیب نادرست و برخلاف انتظار شما اجرا می‌شوند. بدین منظور باید مراحل زیر را طی کنید:

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

در پنل Source در DevTools روی گزینه به شکل زیر کلیک کنید:

این دکمه امکان اجرای خط به خط کد تابع onClick() را به شما می‌دهد. زمانی که DevTools خط کد زیر را هایلایت کرد متوقف شوید:

1if (inputsAreEmpty()) {

در ادامه روی دکمه Step over next function call با شکل زیر کلیک کنید:

این دکمه به DevTools اعلام می‌کند که ()inputsAreEmpty را بدون متوقف شدن روی آن اجرا کند. دقت کنید که بدین ترتیب DevTools چندین خط کد را رد می‌کند. دلیل این امر آن است که ()inputsAreEmpty نادرست تلقی می‌شود و از این رو بلوک گزاره if کد اجرا نخواهد شد.

این ایده پایه‌ای اجرای خط به خط کد است. اگر به کد get-started.js نگاه کنید، می‌بینید که باگ احتمالاً جایی در تابع ()updateLabel قرار دارد. به جای اجرای خط به خط کد می‌توانید از نوع دیگری از نقطه توقف نیز استفاده کنید که اجرای کد را در جایی نزدیک‌تر به مکان باگ متوقف می‌کند.

گام چهارم: تعیین نقطه توقف دیگر

نقاط توقف Line-of-code رایج‌ترین نوع از breakpoint محسوب می‌شوند. هنگامی که به خط خاصی از کد می‌رسید که می‌خواهید روی آن مکث کنید، از نقطه توقف Line-of-code استفاده کنید. استفاده از آن به صورت زیر ممکن است:
به خط آخر کد در ()updateLabel که به صورت زیر است نگاه کنید:

1label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

در سمت چپ این کد می‌بینید که شماره خط این خط خاص از کد به صورت 32 است. روی عدد 32 کلیک کنید تا DevTools آیکون آبی رنگی را روی آن قرار دهد. این بدان معنی است که یک نقطه توقف Line-of-code روی این خط وجود دارد. Line-of-code اینک همواره پیش از اجرای این خط از کد متوقف می‌شود.

روی دکمه Resume script execution کلیک کنید:

اسکریپت به اجرای خود ادامه می‌دهد، تا این که به آن خط از کد برسد که breakpoint را روی آن قرار داده‌اید. به خطوطی از کد در ()updateLabel توجه کنید که قبلاً اجرا شده‌اند. DevTools مقادیر addend1 ، addend2 و sum را نمایش می‌دهد.

مقدار sum مشکوک به نظر می‌رسد. به نظر می‌رسد که به صورت یک رشته ارزیابی شده است، در حالی که باید یک عدد باشد. در واقع علت اصلی بروز باگ نیز همین مسئله است.

گام پنجم: بررسی مقادیر متغیر

یکی دیگر از دلایل شایع بروز باگ در مواردی است که متغیر یا تابع مقداری متفاوت از آن چیزی که مورد انتظار است تولید می‌کند. بسیاری از توسعه‌دهندگان از ()console.log برای مشاهده چگونگی تغییر این مقادیر در طی زمان استفاده می‌کنند؛ اما ()console.log می‌تواند به دو دلیل در این زمینه سنگین و ناکارآمد باشد. دلیل اول آن است که باید به صورت دستی کد خود را ویرایش کنید و فراخوانی‌های زیادی به ()console.log داشته باشید. دلیل دوم نیز آن است که ممکن است ندانید کدام متغیر دقیقاً با باگ مرتبط است بدین ترتیب باید متغیرهای بسیار زیادی را لاگ کنید.

یک جایگزین DevTools برای ()console.log بخشی به نام Watch Expressions است. از Watch Expressions برای نظارت بر مقدار متغیرها در طی زمان استفاده می‌شود. همان طور که نام آن مشخص می‌سازد، Watch Expressions تنها محدود به متغیرها نیست. شما می‌توانید هر عبارت معتبر جاوا اسکریپت را در یک Watch Expression قرار دهید. استفاده از آن به صورت زیر است:

• در پنل Source مربوط به DevTools روی Watch کلیک کنید تا این بخش باز شود.
• روی Add Expression با شکل زیر کلیک کنید:

• عبارت typeof sum را وارد کنید.
• دکمه Enter را بزنید. DevTools در ادامه مقدار "typeof sum: "string را نمایش می‌دهد. مقدار سمت راست دونقطه (:) نتیجه Watch Expression شما است.

همان طور که انتظار می‌رفت، sum به صورت یک رشته ارزیابی شده است در حالی که باید یک عدد باشد. دلیل اصلی بروز باگ در دمو نیز همین مسئله است.

روش جایگزین دوم DevTools برای ()console.log ابزاری به نام Console است. از کنسول می‌توان برای ارزیابی گزاره‌های دلخواه جاوا اسکریپت استفاده کرد. توسعه‌دهندگان به طور متداول از کنسول برای بازنویسی مقادیر متغیرها در هنگام دیباگ کردن استفاده می‌کنند. در مثال مورد بررسی کنسول می‌تواند به تست کردن اصلاحیه‌های بالقوه برای باگ‌هایی که پیدا می‌شوند استفاده شود. استفاده از آن به شرح زیر است:

• اگر بخش Console را باز نکرده‌اید، با زدن دکمه Esc می‌توانید آن را باز کنید. این بخش در انتهای پنجره DevTools باز خواهد شد.
• در کنسول عبارت (parseInt(addend1) + parseInt(addend2 را وارد کنید.
• دکمه Enter را بزنید تا گزاره ارزیابی شود و مقدار 6 نمایش یابد که نتیجه مورد انتظار ما از اجرای کد دمو است.

گام ششم: اعمال اصلاحیه

اینک که یک اصلاحیه بالقوه برای باگ خود یافته‌ایم، تنها کاری که باقی مانده این است که این اصلاحیه را از طریق ویرایش کردن کد و اجرای مجدد دمو بررسی کنیم. لازم نیست که اعمال این اصلاحیه را بر عهده DevTools بگذاریم. می‌توانید کد جاوا اسکریپت را مستقیماً درون رابط کاربری DevTools ویرایش کنید. روش کار به صورت زیر است:

1. در ویرایشگر کد در پنل Source مربوط به DevTools این عبارت را:

    var sum = addend1 + addend2

   با عبارت زیر:

    var sum = parseInt(addend1) + parseInt(addend2);

   عوض کنید. این همان خطی است که در حال حاضر کد در آن متوقف شده است.

2. دکمه‌های Ctrl+S (در ویندوز) و یا Cmd+S (در مک) را بزنید تا تغییرات مورد نظر ذخیره شوند. پس‌زمینه تغییرات کد به رنگ قرمز درمی‌آید تا مشخص شود که اسکریپت درون DevTools تغییر یافته است.
3. روی Deactivate breakpoints با آیکون زیر کلیک کنید.

این آیکون به رنگ آبی درمی‌آید تا مشخص شود که فعال شده است. زمانی که این دکمه فعال شود DevTools همه نقاط توقفی که اعمال شده باشند را نادیده می‌گیرد.

روی Resume script execution یا آیکون زیر کلیک کنید:

دمو را با مقادیر مختلف بررسی کنید. اینک دمو باید همه مجموع‌ها را به صورت صحیحی محاسبه کند. بدن ترتیب به پایان این راهنما در خصوص دیباگ کدهای جاوا اسکریپت در بخش DevTools مرورگر کروم می‌رسیم.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های جاوا اسکریپت
• آموزش JavaScript ES6 (جاوااسکریپت)
• مجموعه آموزش‌های برنامه‌نویسی
• جاوا اسکریپت چیست؟ — به زبان ساده
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس
• تابع های جاوا اسکریپت — راهنمای جامع

==