Debugging a small NodeJS application or a suspected problematic function can be easily debugged with simple methods. However, in an Express application, when the problem cannot be located to a single function or block , we can easily debug end-to-end
using the VSCode debugger .
The prerequisites to practice the example in this article are:
- An
Express application
is available Postman
to trigger the request- Installed
Nodemon
- Since
typescript
is used in the example,ts-node
must also be installed.
The code used in the example below can be found here .
Let’s talk about the logic of this example
For each user
, the confirmation date will be in the data. If the user
‘s status
has been requested, the application will return ” Active
” if the user’s confirmation date is within the last 365 days, otherwise the status
will be returned as ” Inactive
“.
Request : GET/user-status/:userId
Set up VSCode Debugger
All configure
set up on VSCode Debugger
will be in .vscode/launch.json
. You can automatically generate this launch file using “ create a launch.json file
” highlighted in the image below and choose configure Node-Js
which you can replace later or create your own launch.json
file launch.json
and add below code.
1 2 3 4 5 | <span class="token comment">// Hoặc bạn có thể tự tạo tệp với configure trống</span> <span class="token punctuation">{</span> <span class="token property">"configurations"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
Configure
is an array of objects. You can add many configure
like debug Unit Test
, Debug Chrome
for user
interface , etc. For our example we will use Node.js: Nodemon Setup
.
Selecting Install Nodemon
will add configure
below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token punctuation">{</span> <span class="token property">"configurations"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token property">"console"</span> <span class="token operator">:</span> <span class="token string">"integratedTerminal"</span> <span class="token punctuation">,</span> <span class="token property">"internalConsoleOptions"</span> <span class="token operator">:</span> <span class="token string">"neverOpen"</span> <span class="token punctuation">,</span> <span class="token property">"name"</span> <span class="token operator">:</span> <span class="token string">"Debug Express"</span> <span class="token punctuation">,</span> <span class="token property">"program"</span> <span class="token operator">:</span> <span class="token string">"${workspaceFolder}/app.ts"</span> <span class="token punctuation">,</span> <span class="token property">"request"</span> <span class="token operator">:</span> <span class="token string">"launch"</span> <span class="token punctuation">,</span> <span class="token property">"restart"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token property">"runtimeExecutable"</span> <span class="token operator">:</span> <span class="token string">"nodemon"</span> <span class="token punctuation">,</span> <span class="token property">"skipFiles"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"<node_internals>/**"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token property">"type"</span> <span class="token operator">:</span> <span class="token string">"pwa-node"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
Sometimes in the project this app.ts
file will also be located in another location, then you will also configure it accordingly.
1 2 3 4 5 6 | <span class="token punctuation">{</span> .... <span class="token property">"program"</span> <span class="token operator">:</span> <span class="token string">"${workspaceFolder}/src/app.ts"</span> <span class="token punctuation">,</span> .... <span class="token punctuation">}</span> |
Let’s start debugging
I have now set a breakpoint in the app.ts
file as shown below and the debug
is started by clicking nút màu xanh lục
in the Debug panel
. Once the debug
is ready, fire a GET
request from Postman . The debugger will now reach our breakpoint .
As you may have noticed, hovering over the userId
will show its value
. Also, adding it to the WATCH
on the left side will display the value
as long as it’s in the scope of the current context.
Clicking the down arrow (3rd option) in the điều khiển Debug
, takes us into the getUserStatus
function. Once in we get the user
information and suppose we have to change the commit date to another date to tái hiện Bug
or simply want to test it out.etc We can easily do so by how to select “ Set Value
” in the field right-click menu.
When the debug
is complete, clicking Play
in điều khiển debug
will take you to the next breakpoint
if there is one, otherwise you will get the response
in Postman
.
Roundup
As always, I hope you enjoyed this article and learned something new.
Thank you and see you in the next posts!
If you find this blog interesting, please give me a like and subscribe to support me. Thank you.