خطایابی کدهای Node در VS Code

Visual Studio Code میزان شگفت انگیزی عملکردهای داخلی، شامل پشتیبانی از خطایابی برنامه را در خود دارد. گرچه این عملکرد در آن وجود دارد، اما من مجبور شدم چندین بار تلاش کنم تا بفهمم چگونه همه چیز را برای خطایابی برنامه‌های Node تنظیم کنم. این تنظمیات در هنگام استفاده از Nodemon حتی پیچیده‌تر نیز می‌شدند، پس فکر کردم که به اشتراک گذاشتن این تنظیمات مختلف که یاد گرفتم با شما می‌تواند خوب باشد. این مقاله یک سره به سراغ بازرسی متغیرهای و... نمی‌رود و بیشتر بر روی تنظیمات اصلی تمرکز می‌کنیم.

اگر میخواهید کار با ویرایشگر vscode را یادبگیرید میتوانید از دوره رایگان آموزش کار با Visual Studio Code راکت استفاده کنید

جدول محتویات:

1. خطایابی Node در Visual Studio Code
2. راه‌اندازی
3. پنل خطایابی VS Code
4. تنظیمات خطایابی ۱ (اجرای برنامه Node)
5. تنظیمات خطایابی ۲ (اتصال با Process ID)
6. تنظیمات خطایابی ۳ (اتصال به Port)
7. تنظیمات خطایابی ۴ (اتصال به Port با Nodemon)
8. جمع‌بندی

مراحل خطایابی Node در Visual Studio Code

• افزونه Debugger for Chrome را دانلود کنید.
• یکی از ۴ تنظیمات زیر را انجام دهید.
• تنظیمات خطایابی را اجرا کنید.
• نقاط شکست را تعیین کنید، متغیرها را بررسی کنید و...

راه‌اندازی

برای این آموزش، من برنامه‌ای به نام Quick Chat را خطایابی خواهم کرد.

مجبور نیستید شما هم برای تمرین همین برنامه را خطایابی کنید، اما می‌توانید سورس کد آن را کپی کنید و بر روی همین برنامه آزمایشات خود را انجام دهید.

پس از انتخاب برنامه مورد نظر برای خطایابی، باید افزونه Debugger for Chrome را نصب کنید.

پس از انجام این کار، نوبت به ساخت یک نقطه شکست در برنامه می‌رسد. برنامه Quick Chat یک برنامه Node/Express ساده است که از Socket.io استفاده می‌کند تا کاربران را قادر به گفت‌و‌گوی Real time با یکدیگر کند. از این رو، تصمیم گرفتم در جایی که یک کاربر به سرور ما متصل می‌شود، یک نقطه شکست ایجاد کنم. همانطور که در اسکرین‌شات زیر می‌بینید، یک نقطه شکست در داخل تابعی که در هنگام اتصال یک کاربر اجرا می‌شود، قرار داده ام. جهت اطلاع، برای ایجاد یک نقطه شکست در VS Code، داخل فضای خالی سمت چپ اعداد کلیک کنید.

پنل خطایابی VS Code

برای باز کردن پنل خطایابی، بر روی آیکون شبیه باگ موجود در نوار کناری (که به طور پیشفرض در سمت چپ قرار دارد) کلیک کنید. زیاد وارد این بخش نمی‌شوم، اما دقت کنید که چهار بخش مختلف وجود دارند: متغیرها، بخش دیدبانی، فعالیت‌ها و نقاط شکست.

اگر هنوز تنظمیات خطایابی را انجام نداده‌اید، در بالای پنل یک دکمه اجرای سبز رنگ و یک منوی کشویی که می‌گوید «No Configuration» را می‌بینید. اگر از قبل تنظیماتی انجام داده‌اید، آن‌ها را به طور لیست شده در این قسمت می‌بینید. نکته خوب درباره انجام این تنظمیات این است که VS Code نیز در آن‌ها به شما کمک می‌کند.

VS Code تنظیمات خطایابی را در فایلی به نام launch.json که در پوشه‌ای به نام .vscode قرار دارد، ذخیره می‌کند. VS Code نه تنها به ما کمک می‌کند تا آن پوشه و فایل را بسازیم، بلکه در ایجاد تنظیمات از پیش تعیین شده نیز کمک می‌کند. در ابتدا، بیایید نگاهی به ساخت فایل خود داشته باشیم.

برای ساخت فایل launch.json اولیه خود، منوی کشویی «No Configuration» را باز کنید و «Add Configuration» را انتخاب کنید. در اینجا، صفحه‌ای که ظاهر می‌شود را نادیده بگیرید، تا انجام اولین تنظیمات خود را به پایان برسانید.

کامپوننت‌های کلیدی تنظیمات خطایابی

• name - نام تنظیمات، همانطور که در منوی کشویی نمایش داده می‌شود.
• request - نوع کاری که می‌خواهید انجام دهید.
• نوع یا type (Node، Chrome، PHP و...)

تنظیمات خطایابی ۱ (اجرای برنامه Node)

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

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

یک نکته که ممکن است متوجه شده باشید، هشداری است که من در کنسول خطایابی خود دریافت کرده‌ام. این هشدار، می‌گوید که node --debug منسوخ شده است. نمی‌دانم که این مشکل از VS Code است، یا نسخه Nodeای که من نصب کرده‌ام. به هر حال،‌ یک نکته وجود دارد که باید به یاد داشته باشید. برای شروع یک برنامه Node در حالت خطایابی، از --inspect استفاده کنید.

تنظیمات خطایابی ۲ (اتصال با Process ID)

در تنظیمات دوم، نگاهی به اتصال به یک پردازش Node با استفاده از ID آن خواهیم داشت. برای انجام این کار، باید قبل از انجام تنظیمات خطایابی، سرور Node خود را خودمان راه‌اندازی کنیم. از این دستور برای اجرای سرور خود استفاده کنید (همانطور که در بالا اشاره شد، باید از --inspect استفاده کنید) و app.js را با نام فایل سرور خود جایگزین کنید.

node --inspect app.js

با شروع سرور خود، حال می‌توانید تنظیمات خطایابی خود را اجرا کنید. آن پردازش Node که با دستور اجرا شده بر روی سرور مطابق است را انتخاب کنید.

حال با موفقیت متصل شدید.

تنظیمات خطایابی ۳ (اتصال به Port)

برای تنظیمات سوم، به یک برنامه Node‌ موجود بر روی پورتی خاص متصل می‌شویم. در هنگام خطایابی، و در حالت استفاده از --inspect، پورت پیشفرض ۹۲۲۹ است. از آنجایی که در تنظیمات قبلی سرور خود را اجرا کرده‌ایم، فقط تنظیمات خطایابی خود را اجرا می‌کنیم. بر روی تنظیمات «Attach to Port» کلیک کرده و اجرا کنید.

تنظیمات خطایابی ۴ (اتصال به Port با Nodemon)

برای تنظیمات پایانی خود، تنظیمات قبلی را ویرایش می‌کنیم تا بارگذاری مجدد خودکار با Nodemon را پشتیبانی کنند. قبل از این که توضیح دهم Nodemon چیست، جای دارد بگویم که به نظر من این کاربردی‌ترین تنظیمات موجود برای توسعه‌دهی است.

Nodemon یک پکیج است که معمولا به صورت Global از NPM نصب می‌شود. این پکیج، وقتی که فایل‌های خود را ذخیره می‌کنید، به طور خودکار سرور Node شما را مجددا بارگذاری می‌کند. این پکیج، مخصوصا زمانی که در حال اعمال تغییرات و آزمایش به طور همزمان هستید، بسیار کاربردی است.

برای نصب Nodemon، این دستور را اجرا کنید:

npm install -g nodemon

از آنجایی که Nodemon به طور خودکار سرور ما را ری‌استارت می‌کند، ما در تنظیمات خطایابی، ویژگی Restart را برابر با True قرار داده‌ایم. به این صورت، وقتی که سرور ما ری‌استارت می‌شود، خطایاب ما به طور خودکار مجددا متصل می‌شود. برای آزمایش این عمل، با استفاده از این دستور سرور خود را اجرا کنید. (و Node را با Nodemon جایگرین کنید.) و البته، مطمئن شوید که سرور قبلی را لغو می‌کنید.

nodemon --inspect app.js

سپس، تنظمیات خود را اجرا کنید.

در نظر داشته باشید که ما در حال استفاده از Nodemon هستیم. پس اگر تغییری به فایل سرور خود اعمال کرده و ذخیره کنیم، سرور ما به طور خودکار مجددا بارگذاری می‌شود. خوشبختانه، به تنظیمات خطایابی خود نیز گفته‌ایم که همین کار را انجام دهد.

جمع‌بندی:

همانطور که پیش‌تر اشاره کردم، شروع کار با خطایابی VS Code کمی برای من زمان برد. مشکل اصلی‌ای که داشتم، تعریف صحیح تنظیمات بود، که دلیل اصلی نوشتن این مقاله بود. امیدوارم که این مقاله در انجام این تنظیمات به شما کمک کند.

منبع