ویژوال استودیو کد دارای قابلیت های داخلی زیادی است ، از جمله پشتیبانی برای برنامه های اشکال زدایی. در این مقاله ، با دانلود افزونه Debugger for Chrome ، ایجاد پیکربندی اشکال زدایی ، راه اندازی پیکربندی اشکال زدایی و تنظیم نقاط شکست ، VS Code را برای اشکال زدایی در Node.js پیکربندی می کنید.
پیش نیازها
برای تکمیل این آموزش ، به موارد زیر نیاز دارید:

Node.js که به صورت محلی نصب شده باشد ، که می توانید با دنبال کردن نحوه نصب Node.js و ایجاد یک محیط توسعه محلی ، ابن کار را انجام دهید.
⦁ آخرین نسخه کد ویژوال استودیو بر روی دستگاه شما نصب شده باشد.
⦁ افزونه Debugger for Chrome در ویژوال استودیو کد نصب شده باشد.

برای این آموزش می توانید دروس یکی از پروژه های جاوا اسکریپت خود را که می تواند روی سرور Node اجرا شود ، اعمال کنید.
در صورت تمایل گزینه استفاده از یک نمونه برنامه نیز وجود دارد.
مرحله 1 – ایجاد یک برنامه نمونه (اختیاری)
در این آموزش برنامه مثال به نام Quick Chat اشکال زدایی خواهد شد. اگر پروژه ای برای دنبال کردن ندارید ، می توانید این مرحله را برای ایجاد این برنامه دنبال کنید

از Git برای کلون کردن Design-and-Build-a-Chat-Application-with-Socket.io repo استفاده می کنید. همچنین می توانید فایل zip را دانلود کرده و محتویات را از حالت فشرده خارج کنید.

توجه: اگر به Git نصب شده خود نیاز دارید ، از آموزش شروع Git کمک بگیرید.

برای این آموزش از کدهای part-8 پروژه استفاده خواهید کرد. اندکی وقت بگذارید تا با نحوه عملکرد برنامه مورد نظر خود آشنا شوید.
با رفتن به دیرکتوری پروژه و سپس به دیرکتوری part-8 شروع کنید:
$ cd Design-and-Build-a-Chat-Application-with-Socket.io
$ cd part-8

سپس ، بسته های npm را برای پروژه نصب کنید:
$ npm install

سپس ، سرور را شروع کنید:
$ npm start

اگر از 127.0.0.1:3000 در Chrome بازدید کنید ، اعلان نام کاربری را مشاهده خواهید کرد. پس از ارائه نام کاربری و کلیک کردن روی دکمه Chat! ، به برنامه چت هدایت می شوید و خروجی زیر را مشاهده می کنید:
Output
⦁ User joined the chat…

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

مرحله 2 – ایجاد نقطه شکست (breakpoint)
اکنون ، بگذارید یک breakpoint در برنامه ایجاد کنیم. نقاط breakpoint به شما امکان می دهد کد خود را متوقف کرده و آن را بررسی کنید.
برنامه Quick Chat یک برنامه Node / Express است که با استفاده از Socket.io به کاربران امکان می دهد در زمان واقعی با یکدیگر چت کنند. ما یک نقطه شکست را اضافه می کنیم که یک کلاینت به سرور ما متصل شود.
برای ایجاد نقطه شکست در VS Code ، در شکاف یا فضای خالی سمت چپ شماره های خط کلیک کنید.
همانطور که در تصویر زیر نشان داده شده است ، یک breakpoint (حلقه قرمز) را درون تابع ایجاد کرده ایم که هر بار کاربر متصل می شود ، فراخوانی می شود.

part-8/server.js
// …
io.on(‘connection’, socket => {
console.log(‘a user connected’);
// …
});

صرف نظر از این که چه برنامه ای را برای اشکال زدایی استفاده می کنید ، یک breakpoint تنظیم کنید که به راحتی ایجاد شود ، مانند زمانی که برنامه دانلود می شود ، یک مسیر شروع می شود و غیره.

مرحله 3 – استفاده از پنل اشکال زدایی VS Code
برای باز کردن پنل اشکال زدایی ، روی نماد bug در نوار کناری (در سمت چپ به طور پیش فرض) کلیک کنید. خواهید دید که چهار بخش مختلف وجود دارد: variables, watch, call stack, و breakpoints.

در بالای پنل ، یک دکمه play سبز و یک منوی کشویی را مشاهده می کنید که اگر هنوز نیاز به ایجاد یک پیکربندی اشکال زدایی داشته باشید ، می گوید No Configurations. اگر قبلاً پیکربندی ایجاد کرده اید ، آن را در آنجا لیست می کنید.
VS Code پیکربندی های اشکال زدایی را در فایلی به نام launc.json درون پوشه ای به نام .vscode ذخیره می کند.VS Code به ما کمک می کند تا نه تنها آن پوشه و فایل را ایجاد کنیم بلکه به تولید پیکربندی های از پیش تعریف شده نیز کمک می کند. بیایید نگاهی به ایجاد اولین مورد خود بیندازیم.
برای ایجاد فایل اولیه start.json خود ، بر روی منوی کشویی No Configurations کلیک کنید و Add Configuration را انتخاب کنید. از اینجا ، popup ها را نادیده بگیرید و با ایجاد اولین پیکربندی خود شروع خواهیم کرد.
مؤلفه های اصلی پیکربندی اشکال زدایی

name – نام پیکربندی مطابق با منوی کشویی تنظیمات نمایش داده می شود.
⦁ request – نوع عملی که می خواهید انجام دهید
⦁ . type – نوع اشکال زدایی برای پیکربندی. این نوع می تواند Node ، Chrome ، PHP و غیره باشد.

همانطور که تنظیمات مختلفی را ایجاد می کنید ، VS Code همچنین IntelliSense را برای سایر خصوصیاتی که قابل تعریف هستند فراهم می کند.

مرحله 4 – اشکال زدایی با برنامه راه اندازی
این پیکربندی اول برنامه Node را در حالت اشکال زدایی راه اندازی می کند. اجرا در حالت اشکال زدایی بدان معنی است که VS Code از طریق یک پورت خاص برای اشکال زدایی به برنامه ما متصل خواهد شد. برای این پیکربندی باید فایل برنامه ای را که اجرا خواهد شد تعریف کنیم. پیکربندی اینگونه به نظر می رسد:
.vscode/launch.json
{
“type”: “node”,
“request”: “launch”,
“name”: “Launch Program”,
“program”: “${workspaceFolder}/app.js”
},

برای اجرای این پیکربندی ، آن را از لیست کشویی تنظیمات انتخاب کنید و بر روی دکمه سبز رنگ کلیک کنید. نوار عملکرد اشکال زدایی در دکمه های step, continue, restart و stop در بالا سمت راست ظاهر خواهد شد.

برای شروع یک برنامه Node در حالت اشکال زدایی ، از پرچم –inspect استفاده کنید.

مرحله 5 – اشکال زدایی با Attach توسط ID پردازش
پیکربندی دوم که به آن خواهیم پرداخت اتصال به یک فرآیند Node توسط پردازش ID است. این سناریو با برنامه ای که از قبل در محیط محلی شما اجرا شود ، مرتبط است.
.vscode/launch.json
{
“type”: “node”,
“request”: “attach”,
“name”: “Attach by Process ID”,
“processId”: “${command:PickProcess}”
},

برای این کار ، قبل از اجرای پیکربندی اشکال زدایی ، باید سرور Node را خودمان شروع کنیم. برای شروع سرور خود از دستور زیر استفاده کنید (با استفاده از –inspect همانطور که در ابتدا گفته شد) و app.js را با نام فایل سرور خود جایگزین کنید.
$ node –inspect app.js

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

مرحله 6 – اشکال زدایی با ضمیمه به پورت
برای پیکربندی سوم ، به یک برنامه node موجود در حال اجرا در یک پورت خاص متصل می شویم.
.vscode/launch.json
{
“type”: “node”,
“request”: “attach”,
“name”: “Attach to Port”,
“port”: 9229
},

9229 پورت پیش فرض برای اشکال زدایی هنگام استفاده از پرچم –inspect است ، بنابراین این چیزی است که ما می خواهیم از آن استفاده کنیم.
از آنجا که ما قبلاً سرور خود را با پیکربندی قبلی شروع کرده ایم ، می توانیم پیش برویم و پیکربندی اشکال زدایی را شروع کنیم. پیکربندی Attach to Port را انتخاب کنید و روی play کلیک کنید:

با تعیین یک port ، localRoot و remoteRoot نیز می توانید با اتصال به شبکه به یک دستگاه از راه دور ، اشکال زدایی کنید.

مرحله 7 – اشکال زدایی با اتصال به پورت با Nodemon
برای پیکربندی نهایی خود ، جهت پشتیبانی از دانلود مجدد خودکار با Nodemon ، می خواهیم روش قبلی را تغییر دهیم. Nodemon بسته ای است که به طور معمول در سراسر جهان از npm نصب می شود ، که با ذخیره کردن فایل های خود ، سرور Node شما را دوباره دانلود می کند. این امر باعث می شود تغییرات و آزمایش همزمان آسان تر شوند.
.vscode/launch.json
{
“type”: “node”,
“request”: “attach”,
“name”: “Nodemon Debug”,
“port”: 9229,
“restart”: true
},

توجه: نسخه های مدرن کد VS از یک پارامتر runtimeExohibable پشتیبانی می کند که می تواند برای پیکربندی متفاوت ‘Node.js Nodemon Setup استفاده شود.

برای نصب Nodemon از دستور زیر استفاده کنید:
$ npm install -g nodemon

از آنجا که Nodemon سرور ما را به طور خودکار مجدداً راه اندازی می کند ، ما در پیکربندی اشکال زدایی ، ویژگی restart را روی true تنظیم کردیم. به این ترتیب ، هنگام شروع مجدد سرور ، debugger دوباره وصل می شوند. برای آزمایش این ویژگی، سرور خود را با استفاده از این دستور راه اندازی کنید (node را با nodemon جایگزین کنید):
$ nodemon –inspect app.js

سپس پیکربندی خود را اجرا کنید:

از آنجا که ما از Nodemon استفاده می کنیم ، اگر تغییری در فایل سرور خود ایجاد کرده و آن را ذخیره کنیم ، سرور ما به طور خودکار بارگذاری می شود. برای مدیریت این سناریو و اتصال مجدد ، پیکربندی اشکال زدایی خود را تعریف کرده ایم. یک تغییر کوچک در فایل خود ایجاد کنید ، آن را ذخیره کنید و مطمئن شوید که هنگام ریستارت سرور debugger شما دوباره وصل می شود.

نتیجه
در این آموزش ، VS Code را برای اشکال زدایی در کد Node.js تنظیم کرده اید. اکنون تنظیمات مناسبی برای شروع اشکال زدایی دارید.
برای کسب اطلاعات بیشتر در مورد Node.js ، به مجموعه نحوه کد دهی در Node مراجعه کنید.

برچسب‌ها:,