Mohammad Jawad Barati
Mohammad Jawad Barati
خواندن ۴ دقیقه·۴ سال پیش

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


دیباگ کردن کدت تو VSCode یا chrome
دیباگ کردن کدت تو 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.log ها رو دسته بندی می‌کنه.

دومین متد console.table

یه آبجکت یا آرایه بهش میدی و اونو بهت تو یه جدول ASCII نشون میده. این دستور خیلی خوانا تر می‌کنه کدتو.
یه آبجکت یا آرایه بهش میدی و اونو بهت تو یه جدول ASCII نشون میده. این دستور خیلی خوانا تر می‌کنه کدتو.

سومین دستور console.dir

این دستور دو تا آرگومان میگیره.

  • آرگومان اول: آبجکتی که می‌خوای تو console نمایشش بدی
  • دومین آرگومان: آبجکتی که توش می‌تونی مشخص بگی تا سطح چندم رو log کنه.
یه مثال که توش آبجکت process رو با console.dir تا سطح سوم 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 میندازه.
روبروی اون 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

  1. فایل launch.json
  2. بدون فایل launch.json
https://www.aparat.com/v/sJuZF#

Like us, follow us, help us, ask us and etc

node.js.developers.kh

node jsdebuggingvscodechromelogging
برنانه نویس، مدرس، محقق. عاشق انیمه هستم و دنبال چالش ها جدید.
شاید از این پست‌ها خوشتان بیاید