اشکال زدایی جاوا اسکریپت

Kayce Basques

Sofia Emelianova

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

مرحله 1: اشکال را بازتولید کنید

یافتن یک سری اقدامات که به طور مداوم یک باگ را بازتولید می کند، همیشه اولین گام برای رفع اشکال است.

1. این دمو را در یک تب جدید باز کنید .
2. در کادر متن شماره 1 عدد 5 وارد کنید.
3. در کادر متن شماره 2 عدد 1 وارد کنید.
4. روی افزودن شماره 1 و شماره 2 کلیک کنید. برچسب زیر دکمه 5 + 1 = 51 می گوید. نتیجه باید 6 باشد. این اشکالی است که شما می خواهید برطرف کنید.

در این مثال، نتیجه 5 + 1 برابر با 51 است. باید 6 باشد.

مرحله 2: با رابط کاربری پنل Sources آشنا شوید

DevTools ابزارهای مختلف زیادی را برای کارهای مختلف، مانند تغییر CSS، پروفایل کردن عملکرد بارگذاری صفحه و نظارت بر درخواست های شبکه ارائه می دهد. پنل Sources جایی است که جاوا اسکریپت را اشکال زدایی می کنید.

1. DevTools را با فشار دادن Command+Option+J (Mac) یا Control+Shift+J (ویندوز، لینوکس) باز کنید. این میانبر پنل کنسول را باز می کند.

   

2. روی تب Sources کلیک کنید.

   

رابط کاربری پنل Sources دارای 3 بخش است:

1. پنجره File Navigator . هر فایلی که صفحه درخواست می کند در اینجا فهرست شده است.
2. صفحه ویرایشگر کد . پس از انتخاب یک فایل در قسمت File Navigator ، محتویات آن فایل در اینجا نمایش داده می شود.
3. صفحه اشکال زدایی جاوا اسکریپت . ابزارهای مختلف برای بازرسی جاوا اسکریپت صفحه. اگر پنجره DevTools شما گسترده باشد، این پنجره در سمت راست پنجره Code Editor نمایش داده می شود.

مرحله 3: کد را با نقطه شکست مکث کنید

یک روش متداول برای اشکال زدایی مشکلی مانند این، درج تعداد زیادی از دستورات console.log() در کد است، به منظور بررسی مقادیر در حین اجرای اسکریپت. مثلا:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

متد console.log() ممکن است کار را انجام دهد، اما نقاط شکست می توانند آن را سریعتر انجام دهند. نقطه شکست به شما امکان می دهد کد خود را در میانه اجرای آن مکث کنید و همه مقادیر را در آن لحظه در زمان بررسی کنید. نقاط شکست نسبت به متد console.log() چند مزیت دارند:

• با console.log() باید به صورت دستی کد منبع را باز کنید، کد مربوطه را پیدا کنید، عبارات console.log() را وارد کنید و سپس صفحه را مجدداً بارگیری کنید تا پیام‌های موجود در کنسول را ببینید. با نقاط شکست، می توانید روی کد مربوطه مکث کنید بدون اینکه بدانید ساختار کد چگونه است.
• در دستورات console.log() خود باید هر مقداری را که می خواهید بررسی کنید به صراحت مشخص کنید. با نقاط شکست، DevTools مقادیر همه متغیرها را در آن لحظه در زمان به شما نشان می دهد. گاهی اوقات متغیرهایی روی کد شما تأثیر می گذارند که شما حتی از آنها بی اطلاع هستید.

به طور خلاصه، نقاط شکست می‌توانند به شما کمک کنند تا باگ‌ها را سریع‌تر از متد console.log() پیدا و برطرف کنید.

اگر یک قدم به عقب برگردید و به نحوه عملکرد برنامه فکر کنید، می‌توانید حدس بزنید که مجموع نادرست ( 5 + 1 = 51 ) در شنونده رویداد click که به دکمه افزودن شماره 1 و شماره 2 مرتبط است محاسبه می‌شود. بنابراین، احتمالاً می خواهید کد را در زمانی که شنونده click اجرا می کند، متوقف کنید. نقاط شکست رویداد شنونده به شما امکان می دهد دقیقاً این کار را انجام دهید:

1. در پنجره اشکال زدایی جاوا اسکریپت ، روی نقاط شکست رویداد شنونده کلیک کنید تا بخش گسترش یابد. DevTools فهرستی از دسته‌های رویداد قابل ارتقا، مانند انیمیشن و کلیپ بورد را نشان می‌دهد.
2. در کنار دسته رویداد Mouse ، روی Expand کلیک کنید . DevTools فهرستی از رویدادهای ماوس را نشان می دهد، مانند کلیک کردن و پایین آوردن ماوس . هر رویداد یک کادر تأیید در کنار خود دارد.

3. چک باکس کلیک را علامت بزنید. DevTools اکنون به گونه‌ای تنظیم شده است که وقتی هر شنونده رویداد click اجرا می‌شود، به‌طور خودکار متوقف شود.

   

4. در نسخه ی نمایشی، دوباره روی Add Number 1 و Number 2 کلیک کنید. DevTools نسخه ی نمایشی را متوقف می کند و یک خط کد را در پانل Sources برجسته می کند. DevTools باید در این خط کد متوقف شود:

   function onClick() {
   

   اگر روی خط دیگری از کد متوقف شده‌اید، Resume Script Execution را فشار دهید تا زمانی که در خط صحیح مکث کنید.

نقاط شکست رویداد شنونده تنها یکی از انواع بسیاری از نقاط شکست موجود در DevTools است. ارزش حفظ تمام انواع مختلف را دارد، زیرا هر نوع در نهایت به شما کمک می کند تا سناریوهای مختلف را در سریع ترین زمان ممکن اشکال زدایی کنید. برای یادگیری زمان و نحوه استفاده از هر نوع، به Pause Your Code With Breakpoints مراجعه کنید.

مرحله 4: از طریق کد عبور کنید

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

1. در پنل Sources DevTools، روی Step into next function کلیک کنید برای گام برداشتن در اجرای تابع onClick() هر بار یک خط. DevTools خط کد زیر را برجسته می کند:

   if (inputsAreEmpty()) {
   

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

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

مرحله 5: نقطه شکست خط کد را تنظیم کنید

نقاط شکست خط کد رایج ترین نوع نقطه شکست هستند. وقتی خط خاصی از کد دارید که می‌خواهید روی آن مکث کنید، از نقطه شکست خط کد استفاده کنید:

1. به آخرین خط کد در updateLabel() نگاه کنید:

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

2. در سمت چپ کد می توانید شماره خط این خط کد خاص را ببینید که 32 است. روی 32 کلیک کنید. DevTools یک نماد آبی را در بالای 32 قرار می دهد. این به این معنی است که یک نقطه شکست خط کد در این خط وجود دارد. DevTools اکنون همیشه قبل از اجرای این خط کد مکث می کند.

3. روی Resume script execution کلیک کنید . اجرای اسکریپت تا رسیدن به خط 32 ادامه می یابد. در خطوط 29، 30 و 31، DevTools مقادیر addend1 ، addend2 و sum به صورت خطی در کنار اعلان های آنها نشان می دهد.

در این مثال، DevTools روی نقطه شکست خط کد در خط 32 مکث می کند.

مرحله 6: مقادیر متغیر را بررسی کنید

مقادیر addend1 ، addend2 و sum مشکوک به نظر می رسند. آنها در گیومه پیچیده شده اند، به این معنی که آنها رشته هستند. این یک فرضیه خوب برای توضیح علت اشکال است. اکنون زمان جمع آوری اطلاعات بیشتر است. DevTools ابزارهای زیادی برای بررسی مقادیر متغیر فراهم می کند.

روش 1: پنجره Scope

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

روش 2: عبارات تماشا

تب Watch Expressions به شما امکان می دهد مقادیر متغیرها را در طول زمان نظارت کنید. همانطور که از نام آن پیداست، Watch Expressions فقط به متغیرها محدود نمی شود. شما می توانید هر عبارت معتبر جاوا اسکریپت را در یک Watch Expression ذخیره کنید. الآن امتحانش کن:

1. روی تب Watch کلیک کنید.
2. روی Add Expression کلیک کنید .
3. نوع typeof sum
4. Enter را فشار دهید. DevTools typeof sum: "string" . مقدار سمت راست کولون نتیجه Watch Expression شماست.

اسکرین شات بالا، صفحه Watch Expression (پایین سمت راست) را پس از ایجاد typeof sum نشان می‌دهد. اگر پنجره DevTools شما بزرگ است، پنجره Watch Expression در سمت راست، بالای صفحه Event Liner Breakpoints قرار دارد.

همانطور که گمان می رود، sum به عنوان یک رشته ارزیابی می شود، در حالی که باید یک عدد باشد. شما اکنون تأیید کرده اید که علت این باگ است.

روش 3: کنسول

علاوه بر مشاهده پیام‌های console.log() ، می‌توانید از Console برای ارزیابی عبارات جاوا اسکریپت دلخواه نیز استفاده کنید. از نظر اشکال زدایی، می توانید از کنسول برای آزمایش رفع اشکالات احتمالی استفاده کنید. الآن امتحانش کن:

1. اگر کشوی کنسول را باز ندارید، Escape را فشار دهید تا باز شود. در پایین پنجره DevTools شما باز می شود.
2. در کنسول، parseInt(addend1) + parseInt(addend2) را تایپ کنید. این عبارت به این دلیل کار می کند که شما در یک خط کد که در آن addend1 و addend2 در محدوده هستند، مکث شده اید.
3. Enter را فشار دهید. DevTools عبارت را ارزیابی می‌کند و 6 را چاپ می‌کند، که نتیجه‌ای است که انتظار دارید نسخه نمایشی تولید کند.

تصویر بالا کشوی کنسول را پس از ارزیابی parseInt(addend1) + parseInt(addend2) نشان می دهد.

مرحله 7: یک راه حل را اعمال کنید

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

1. روی Resume script execution کلیک کنید .
2. در ویرایشگر کد ، خط 31، var sum = addend1 + addend2 با var sum = parseInt(addend1) + parseInt(addend2) جایگزین کنید.
3. برای ذخیره تغییرات خود ، Command + S (Mac) یا Control + S (ویندوز، لینوکس) را فشار دهید.
4. روی غیرفعال کردن نقاط شکست کلیک کنید . رنگ آن به آبی تغییر می کند تا نشان دهد که فعال است. در حالی که این تنظیم شده است، DevTools هر نقطه شکستی را که تنظیم کرده اید نادیده می گیرد.
5. نسخه ی نمایشی را با مقادیر مختلف امتحان کنید. نسخه ی نمایشی اکنون به درستی محاسبه می شود.

مراحل بعدی

تبریک می گویم! اکنون می‌دانید که چگونه هنگام اشکال‌زدایی جاوا اسکریپت، از ابزارهای توسعه‌دهنده کروم نهایت استفاده را ببرید. ابزارها و روش هایی که در این آموزش یاد گرفتید می تواند ساعت های بی شماری را برای شما صرفه جویی کند.

این آموزش فقط دو راه برای تعیین نقاط شکست به شما نشان داد. DevTools راه های زیادی را ارائه می دهد، از جمله:

• نقاط شکست مشروط که فقط زمانی فعال می شوند که شرطی که ارائه می کنید درست باشد.
• نقاط انفصال در استثنائات دستگیر شده یا کشف نشده.
• نقاط شکست XHR که زمانی فعال می شوند که URL درخواستی با رشته فرعی که شما ارائه می کنید مطابقت داشته باشد.

برای یادگیری زمان و نحوه استفاده از هر نوع، به Pause Your Code With Breakpoints مراجعه کنید.

چند کنترل پله کد وجود دارد که در این آموزش توضیح داده نشده است. برای کسب اطلاعات بیشتر به مرحله روی خط کد مراجعه کنید.