Blockchain Development Tips

How To Debug Node Application In Visual Code

Debugging is the best way to troubleshoot the problem.

Hello Friends, Today we will not talk about any Blockchain related topic but we will learn something new which will help you in your Blockchain Journey. Yes, we are talking about Node JS which is more compatible with backend Blockchain projects.

Photo by Matt Duncan on Unsplash

We already have Sample APIs in Node JS and we will discover the below points:

• What is a breakpoint? How to set/remove breakpoints?
• Inject debugger in Visual Code.
• How does Debugger works?

Note: We have a sample NodeJS project that stores the tutorials and comments into MySQL. You can download it from here.

What is a breakpoint? How to set/remove breakpoints?

• The breakpoint is the place where we point on the line of code. We can set up multiple breakpoints.
• For the setup breakpoint, click the dark red dot point on the left side of the line.

• For Remove the breakpoint, again click the dark red dot point.

Inject debugger in Visual Code.

• After setup the breakpoints, now time to run the project using the npm run dev command. After starting the project we have API to get the list of cars by name. Check in the below swagger docs.

Yes, I know you are so excited to see how debug works?

In VS Code, open the Command Palette (View -> Command Palette (CMD + Shift + P)

• Search and find Attach to node process

• Select the node process in the list.

• Now we are very close to the destination and the VS code will look like after the debugger started.

• And in the terminal screen, it shows that the Debugger is attached.

How does Debugger works?

• We have a get API for search cars by name after calling this apihttp://localhost:18000/cars/outh the focus shift on the VS code and the debugger highlights.

• In the upper corner, we have six tools to manage the debugger and when we hover over these tools it shows the information in a tooltip.

• The first tool shows Continue means that it will jump to the other breakpoint line.
• The second tool shows Step Over means runs the next statement.
• The third tool shows Step Into means runs the next statement but if function call in the line then it comes into function and debugs it line by line.
• The fourth tool shows Step out means it skips the running method and comes out from the return.
• The fifth tool shows that Restart means disconnecting and reconnecting the debugger.
• The sixth tool shows Disconnect means to disconnecting the debugger from the Node JS application.

When we inject the Debugger there are five boxes shown in the VS Code. Here I’m presenting with the colour of the boxes.

• The first box shows the variable that comes in the debugger points.
• The second box shows the Watch the variable here we can add the variable using + icon and watch the real-time value.
• The third box show the call stack that manages the processes.
• The fourth box shows all the breakpoints and we check to remove them from here by disabling them on the right check.
• The fifth box is the debug console that shows logs.

That’s it. I hope you are feeling lighter now because you are not dependable on your seniors for troubleshooting. Stay connected with me. You can follow me for more blockchain articles.

How to Integrate Web3 wallet into ReactJS

Here it rains wisdom. Come with me to build your own home in the world of web3.

Thank you for reading.

Have a nice day :)