آسان‌ترین روش برای خطایابی و Debug کردن Nodejs با Visual Studio Code

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۲۹ آذر ۱۳۹۷

در این مطلب میخوام آسان‌ترین روش برای خطایابی و Debug کردن Nodejs رو در ویرایشگر Visual Studio Code بهتون آموزش بدم تا بدون دردسر و حرفه‌ای کدهاتون رو Debug کرده و مشکلات کدهاتون رو برطرف کنید.

همونطور که میدونین Debugging یکی از نیازهای اصلی برنامه‌نویسی هست و Debug کردن در Nodejs یه مقدار دردسر داره ولی با سرکار اومدن Visual Studio Code خطایابی خیلی راحت‌تر شده.

مشکلات مربوط به Debug کردن Nodejs

اگر تا حالا پروژه‌ای با Nodejs رو انجام داده باشید، حتما میدونین که در مورد چی داریم صحبت میکنیم و حتما برای Debug کردن اون به مشکلاتی برخوردید. برخلاف Javascript که در مرورگر اجرا میشه و زبانهایی مانند Java که IDE‌های قدرتمندی مانند IntelliJ دارند، شما نمیتونین به راحتی هر جایی که بخواید breakpoint قرار بدین، صفحه رو رفرش کنید یا کامپایلر رو Restart کنید و کدهاتون رو مورد بررسی قرار بدین و مشکلات رو پیدا کنید و اون متغیرهایی که از دستتون در رفته رو پیدا کرده و برطرف کنید.

گزینه‌های موجود برای Debugging در Nodejs

روشهای زیادی وجود داره که با استفاده از اونا میتونین برنامه Nodejs رو خطایابی کنید. در ادامه خلاصه‌ای از این روشها بیان میشه و میتونین اطلاعاتی رو در مورد اونا بدست بیارید.

  • استفاده از console.log : همونطور که میدونین با استفاده از این متد میتونین متنی رو در console چاپ کنید. در همه زبانها چیزی شبیه به این متد وجود داره که میتونین با استفاده از اون متنهای مورد نظرتون رو در console چاپ کنید. پیاده‌سازی این روش خیلی ساده هست و میتونین جاهایی که میخواید console.log‌های مختلفی قرار بدین و مشکلات رو برطرف کنید.
  • استفاده از --inspect : با استفاده از این option میتونین برنامه‌هاتون رو در command line خطایابی کنید و از اونجایی که کار کردن با اون مقداری سخت هست، مستنداتی در مورد کار با اون در اختیارتون قرار گرفته است. این روش همه چیز در اختیارتون قرار میده ولی استفاده از اون مشکل هست و برای همه خوشایند نیست. روشهای ساده‌تری وجود داره که میتونین از اونا استفاده کنید.
  • Chrome DevTools : یک مقاله مفید توسط Paul Irish منتشر شده که در اون خطایابی برنامه‌های Nodejs توسط Chrome DevTools آموزش داده شده و کار رو خیلی ساده‌تر از روش قبل میکنه و قدم بزرگی در خطایابی به حساب میاد. این روش نیز دردسرهای خاص خودش رو داره و مدت زمانی طول میکشه تا برنامه خودتون رو به روش fast forward به chrome devtools متصل کنید و باز هم روشهای ساده‌تری برای Debug کردن وجود داره.
  • ابزارهای مربوط به JetBrains : یکی از بهترین شرکتهایی که IDE‌های فوق‌العاده‌ای مثل WebStorm و IntelliJ رو به وجود آورده، کمک بزرگی به دنیای برنامه‌نویسی کردن و میتونین با استفاده از پلاگینهایی که در اختیارتون قرار میده به راحتی نیازهاتون رو برآورده کرده و برنامتون رو خطایابی کنید. تا قبل از اینکه ویرایشگر Visual Studio Code منتشر بشه، بهترین ابزاری که از اون استفاده میکردم، محصولات مربوط به JetBrains بودن که البته رایگان هم نبودند و مجبور بودم اونا رو کرک کنم.
  • Visual Studio Code : این ویرایشگر رایگان یک ابزار فوق‌العاده برای کار در زمینه وب هست و به راحتی همه نیازتون رو برآورده میکنه. من خیلی وقته که فقط از VS Code استفاده میکنم و با هر ویژگی جدیدی که منتشر میکنه، علاقه من به اون بیشتر میشه. با استفاده از VS Code به سرعت و سادگی میتونین خطایابی رو شروع و مدیریت کنید و نیاز به کارهای خاصی نداره و در ادامه روش کار رو بهتون آموزش میدم.

آماده سازی VS Code برای خطایابی Nodejs

من فرض میکنم که شما VS Code رو دانلود و نصب کردید و آماده هستید تا محیط Debugging رو به وجود بیاریم.

فرض کنید که یک پروژه داریم که فایل app.js، فایل اصلی پروژه هست. ساختار پروژه بصورت زیر هست:

خب برای Debug کردن وارد بخش Debug میشم یا کلیدهای ترکیبی Ctrl + Shift + D رو فشار میدم.

حالا بر روی گزینه Add Configuration کلیک کنید.

با اینکار از شما پرسیده میشه که Environment خودتون رو انتخاب کنید و من Node.js رو انتخاب میکنم:

با اینکار یک پوشه بنام .vscode در ریشه پروژه ساخته میشه و فایل launch.json در اون قرار میگیره و کدهایی بصورت پیش فرض در اون قرار داده میشه. شما با استفاده از این فایل میتونین کارهای زیادی رو انجام بدین که در این لینک میتونین همه قابلیتهای اون رو مشاهده کنید. اگر launch.json رو باز کنیم بصورت زیر خواهد بود:

در مقابل ویژگی program میتونین مسیر فایلی که اصلی و ریشه‌ای هست رو قرار بدین. من در بالا مقدار رو به app.js بصورت زیر تغییر میدم:

حالا این فایل رو ذخیره میکنم. همونطور که میبینید نام این مورد Launch program هست و شما میتونین با استفاده از نام، برنامتون رو اجرا کنید.

حالا بصورت تستی فایل app.js رو باز میکنم و دو breakpoint رو با کلیک کردن بر روی سمت چپ شماره خطوط مورد نظر، قرار میدم. بصورت زیر:

حالا مجددا وارد بخش Debugging میشیم (با استفاده از Ctrl + Shift + D) و Launch Program رو انتخاب کرده و بر روی Start debugging یا مثلث سبز رنگ کلیک میکنم:

با اینکار برنامه اجرا میشه و Breakpoint هایی که قرار دادیم اصطلاحا hit میشه و برنامه در اونجا متوقف میشن و میتونین به اطلاعات مورد نظرتون دسترسی پیدا کنید و کدهاتون رو بررسی کنید:

همونطور که میبینید برنامه در خط 9 که زرد شده است، متوقف میشه و منتظر میمونه تا شما یکی از کلیدهای مشخص شده در نقطه 1 رو انتخاب کنید. شماره‌هایی که در تصویر بالا مشخص کردم بصورت زیر هستند:

  1. با استفاده از این دکمه‌ها میتونین اجرای برنامه رو متوقف کنید و یا اینکه به Breakpoint بعدی برید و کارهای مختلفی انجام بدین و همه چیز رو مدیریت کنید.
  2. در قسمت Variables همه متغیرهای محلی و سراسری که به اونا دسترسی داریم رو نمایش میده و میتونین اونا رو دستکاری کنید.
  3. در قسمت Watch میتونین یک متغیری که مورد نظرتون هست رو مشخص کنید و اون رو در حالتهای مختلف بررسی کنید.
  4. در این بخش Call stack نمایش داده میشه و با کلیک بر روی هر کدام به اون قسمت کد منتقل میشید.
  5. در این قسمت همه Breakpoint‌ها نشون داده میشه و میتونین اونا رو مدیریت کنید.
  6. این بخش هم Console مربوط به Debug هست و خروجی برنامه در اون نشون داده میشه.

به همین راحتی میتونین کدهاتون رو خطایابی کنید و همه چیز در اختیارتون هست.

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

 

نظرات کاربران

فرامرز

بسیار عالی موفق باشید

حمیدرضا

خیلی ممنون. کاربردی و مفید بود. بازم در مورد vs و قابلیتاش بنویسید. یا این که روشی هست که مثل webstorm موقع دیباگ کردن، داخل محیط کدنویسی، مقدار متغیرها رو نشون بده. خیلی ممنون

misraad

بسیار مفید بود
ممنون

محمد اسفندیاری

موفق باشید دوست عزیز