دیباگ کردن تو نود.جی‌اس توسط chrome و VSCode

دیباگ کردن کدت تو VSCode یا chromeبارها شده که می‌خواستی کدتو دیباگ بکنی ولی به یه سری مشکلات برخوردی و نمیدونستی باید چکار بکنی؟ اصلا بلد نیستی کدتو دیباگ بکنی؟ دنبال best practice ها هستی تا بعدا که کدت رفته رو مد production به مشکل نخوری؟ جای درستی اومدی.روش های دیباگینگتست نوشتن برا کد های خودتونبه جای اینکه بعدا به غلط کردم بیفتید از الان به نوشتن تست برای کد های خودتون عادت بکنید. بخشی از داکیومنتی که قراره بنویسید رو می‌تونید از همین بخش تهیه بکنید. چجوری؟ داری دیباگ می‌کنی کدتو، همین جا سناریو های مختلف رو روی کدت تست کن.چونکه می‌تونی بعدش تو داک بنویسی که کدت یا API ای که داری می‌نویسی این جوری کار می‌کنه. مثلا داری کدو دیباگ می‌کنی و بعدش یهو به یه forEach میرسی. از خودت بپرس چرا forEach؟ چرا map نه؟ این کارو که می‌کنی به نوع تفکر نویسنده کد پی می‌بری.پیشنهاد شماره یک ما برای این موضوع Jest هست. سریع بودن Jest به کنار، ویژگی های coverage report و mock کردن dependency ها برا unit test گرفتن. ولی اگه داری API میسازی SuperTest یه ابزار خیلی خوب برا تست endpoint ها هس.خوبی SuperTest اینه که تو بدون نیاز به اینکه app اکسپرسی تو run داشته باشی (و وابستگی هایی مثل اتصال به دیتابیس رو برات mock میکنه) می‌تونی آبجکت app ای که ساختی رو بهش بدی. هنوز تمومش نکردم، می‌تونی از ترکیب Jest و SuperTest با هم استفاده بکنی. برای این کار می‌تونی از ابزار Husky گیت استفاده بکنی.استفاده از متد های consoleهمه با console.log معروف آشنا هستیم. حالا چرا نیایم از متد های دیگه‌ی console استفاده نکنیم؟اولیشون console.group:این دستور خیلی قشنگ میاد console.log ها رو دسته بندی می‌کنه.دومین متد console.tableیه آبجکت یا آرایه بهش میدی و اونو بهت تو یه جدول ASCII نشون میده. این دستور خیلی خوانا تر می‌کنه کدتو.سومین دستور console.dirاین دستور دو تا آرگومان میگیره. آرگومان اول: آبجکتی که می‌خوای تو console نمایشش بدیدومین آرگومان: آبجکتی که توش می‌تونی مشخص بگی تا سطح چندم رو log کنه.یه مثال که توش آبجکت process رو با console.dir تا سطح سوم log گرفتیماستفاده از debugger خود نود.جی‌اسبرای استفاده از دیباگر خود نود.جی‌اس می‌تونی هر جایی که لازم داشتی کدت واسته debugger بزاری. خیلی قشنگ نیست کار باهاش ولی در حد اشاره و نیاز بهتون می‌گم.const express = require('express'); const app = express(); app.get('/', (req, res) => { debugger; res.send('Hello World!'); }); app.listen(3000, () => console.info('Example app listening on port 3000!'));الان وقتی تو کامند لاین به جای node app.js بزنی node inspect app.js کامندلاین تو این شکلی میشهروبروی اون debug می‌تونی مثلا بگی process. بعدش برات آبجکت process رو log میندازه.استفاده از فلگ inspect-brk برای دیباگ کردن تو کروموقتی از این فلگ استفاده می‌کنی نود.جی‌اس میاد یه اتصال WebSocket ای درست می‌کنه که به تو اجازه میده از طریق مرورگرت کد هایی که زدی رو دیباگ بکنی. فرق این فلگ با node inspect اینه که تو این حالت داری تو مرورگر دیباگ می‌کنی ولی تو اون حالت تو CLI https://www.aparat.com/v/u8QLk تو این حالت تو یه حرکت دیگه هم می‌تونی بزنی. فرض کن پروژه رو باید این جوری اجرا بکنی:sudo node --inspect-brk app.jsنکته رو گرفتی دیگه، تو اینجا می‌تونی پروژه رو با دسترسی sudo اجرا بکنی. شاید به نظرت مسخره بیاد ولی خود من مجبور شدم همچین حرکتی بزنمدیباگ کردن تو VSCodeتو این مورد حتی نیاز نیست که فلگی اضافه بکنی. خود VSCode برات حرکتو میزنه. نکته‌ای که اینو بخشو جذاب تر می‌کنه اینه: دیگه لازم نیست از VSCode بری بیرون، تو خود VSCode میای دیباگ می‌کنی و حتی نیازی به استفاده از کلمه کلیدی debugger نداری.دو راه دارید برا دیباگ کردن تو VSCode فایل launch.jsonبدون فایل launch.json https://www.aparat.com/v/sJuZF# Like us, follow us, help us, ask us and etcnode.js.developers.kh