کانال تلگرام

چگونه با استفاده از Debugger خطای کدهای جاوا اسکریپت را پیدا کنیم؟

تاریخ : ۱۷ آبان ۱۳۹۸
نویسنده : امیر حسین نصر

آیا می دانستید که جاوا اسکریپت دارای یک Debugger توکار است؟ این اشکال زدا هنگام یافتن اشکالات و حرکت در فراخوانی های تو در تو بسیار مفید است. عبارات debugger بر روی کد های جاوا اسکریپت رندر شده در سمت کلاینت و سمت سرور کار می کند.

debugger

قاعده نوشتاری

function debugThis(a, b) {
  debugger;
  return a + b;
}

debugThis(1, 2)

عبارت debugger  به ما اجازه می دهد تا اجرای کد ها را متوقف کرده و متغیرها و مقادیر را بازرسی کنیم. اساسا این عبارت، به عنوان یک کلید برگشتی عمل می کند و تابع را از اجرا باز میدارد.
javascriptDebugger1
وقتی کد بالا را اجرا می کنیم، شکل بالا چیزی است که مشاهده خواهیم کرد. به متن "paused in debugger" و دکمه های resume و loop-over در سمت راست آن توجه کنید. در سمت راست تصویر، سربرگ "sources" و تابع debugThis را مشاهده میکنیم. اگر بر روی متغیر های a و b با استفاده از نشانگر موس قرار بگیرید، میتوانید مقادیر آنها را در زمان اجرای کد مشاهده کنید.

زمانی که برنامه شما به مشکل برخورد کرده باشد و نیاز به کمی اشکال زدایی داشته باشید این اشکال زدای توکار برای شما بسیار مفید خواهد بود. برنامه های پیچیده تر ممکن است داده ها را از ده ها منابع مختلف بدست آورند، اما گاهی اوقات در زمان واکشی داده ها ممکن است یکی از این منابع به خوبی کار نکند. در اینجا باید چه کاری انجام دهیم؟ عبارت debugger تنها راه نجات شما خواهد بود.

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

چندین Debugger

اشکال زدایی وقتی قدرت خود را نشان میدهد که ما از بیش از یک عبارت debugger استفاده میکنیم. مثال زیر را در نظر بگیرید ، در این تابع از مقدار یک تابع در تابعی دیگر استفاده شده است. ما از مقدار آرگومان a در تابع داخلی استفاده کرده ایم :

function debugThis(a, b) {
  return function(c) {
    debugger;
    return a + c
  }
}

debugThis(1, 2)(3)

اشکال زدای جاوا اسکریپت به ما روشی انعطاف پذیر برای بررسی تمام مقادیر تابع ارائه میدهد. در مثال بالا میتوانید مقادیر b، a و c را به راحتی بدست آورد. با استفاده از نشانگر موس بر روی آنها قرار بگیرید و مقادیر را مشاهده کنید.
javascriptDebugger3
اکنون که با عملکرد debugger آشنا شدید، اجازه دهید به سراغ نمونه های پیچیده تر برویم. در ابتدا، بررسی می کنیم که آیا آرگومان name را به تابع CreatPerson ارسال کرده ایم یا خیر. اگر پاسخ خیر باشد ، اجرای کد را متوقف می کنیم و یک هشدار در کنسول مرورگر چاپ میکنیم. اگر name وجود داشت، با استدلال های مربوطه ، یک person را ایجاد میکنیم.

function hasName(name) {
  debugger
  if(!name) {
    console.warn("no name given") 
    return
  }
}

function createPerson(name, age) {
  debugger;
  hasName(name)

  const person = {
    name,
    age,
  }

  debugger;
  return person;
}

createPerson("Indrek", 25)

هنگامی که ما با استفاده از آرگومان های مشخص شده تابع createPerson را فراخوانی میکنیم ، اشکال زدا باید ظاهر شود. بیایید ببینیم این اشکال زدا چه چیزی به ما می گوید.
javascriptDebugger4
اولین عبارت debugger به اجازه میدهد که به آرگومان های تابع createPerson دسترسی پیدا کنیم. به نظر شما اگر بخواهیم مقدار شی person را مشاهده کنیم چه اتقاقی می افتد.
javascriptDebugger5
همانطور که در شکل بالا مشاهده میکنید، مقدار برابر با Undefined است. اما چرا شی person باید Undefined باشد؟ پاسخ کاملا واضح است. اجرای کد ما هنوز به بخش ساخت شی person نرسیده است. پس شی ایی ساخته نشده است.

اگر بر روی دکمه آبی رنگ ادامه کلیک کنیم را فشار دهیم، اجرای برنامه ادامه یافته و در خط debugger دوم باز متوقف میشود ، این بار این توقف داخل تابع hasName روی میدهد.
javascriptDebugger6
اکنون در داخل تابع hasName هستیم. این تابع به سرعت بررسی می کند که آیا نامی برای person  در نظر گرفته شده است یا خیر. اگر چه منطقی نیست برای بررسی این مورد از تابع جداگانه استفاده کنیم ، زیرا می توانیم این کار را در تابع CreatPerson انجام دهیم. اما در اینجا برای بیان بهتر اشکال زدایی به این صورت عمل کرده ایم. در مثال بالا زمانی hasName را اجرا می کنیم ، که شخص مورد نظر ما هنوز ساخته نشده است.

در انتها هم باز بر روی دکمه resume کلیک میکنیم تا اجرا تا debugger سوم ادامه پیدا کند.
javascriptDebugger7
در این حالت ما باید بتوانیم تمام مقادیر متغیرها و آبجکت ها را ببینیم ، زیرا اجرای کد ما تقریبا به آخر رسیده است. با این حال چه اتفاقی می افتد اگر ما نامی را به تابع CreatPerson ارسال نکنیم؟
javascriptDebugger8
مسلما هشداری در کنسول برای کاربر چاپ میشود. یک person نمیتواند نامی نداشته باشد.

مخلص کلام

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

#اشکال_زدای_جاوا_اسکریپت
۰ نظر

مقالات پیشنهادی

مشاهده همه مقالات
ثبت دیدگاه

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید