The biggest deterrent factor for Node JS newcomers who are from traditional programming languages with smart IDEs is the difficulty to quickly setup Node JS with debugging support and take off with their favorite Javascript learning curve. If you are trying to learn Javascript with Node JS and absolutely nothing else, this article is for you. We will not be having any deeper look at the steps or discuss extended options in this article. The aim is to lift you up to start Javascript and Node JS programming with the least pain taken
Let’s roll.
Installing Node JS
Download the latest LTS version of the NodeJS and install it with the default settings.
Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Install VS Code Editor
VS Code is one of the most popular editors of the days. It works seamlessly with Node JS.
Download and install the latest version of VS Code with default settings.
If you don’t like the dark background of VS Code, go to File -> Preferences -> Color Theme and select “Light”. This might make you feel more like home.
Setup your work folder by going to File -> Open Folder. Select the folder you are going to save your experimental Javascript file in. Once done, your editor should show the list of files in the left side and the file editing area in the right side. Needless to say that you can click on a file and getting it ready to be edited.
Setup In-Editor Running and Debugging
Click on the Debug icon from the panel which is in far left side of the VS Code editor.
Locate the Play button in the top. Located next to Play button is the Debug Configuration Selector drop down. You may notice that it shows “No Configuration” on your screen. Click on the down arrow and select “Add Configuration”. This will prompt you to select the target debug environment. Select Node JS from this prompt. The resulting screen will open up launch.json which is the file your debug configuration is saved internally.
There is pretty much nothing to do here. Your debug environment is setup automatically.
Writing Your First Node JS Program
Just start a new file and save it by any name with the extension “.js”. Let’s run you first program. Reach out to the “Play” button of the editor and simply click on it. VS Code will automatically run the file and show the output in the Debug Console found in the bottom of the editor.
Setting Up Your First Break point
Just go to the line you want to setup the break point in and click on the red dot. This is your first break point. Now, run the program again and see how VS Code stops there by highlighting the line. Just pick up any option through the Debug Toolbar such as Step In, Step Over, Resume etc.
Note that you can use the Debug Console to type and execute any Javascript command at this point. Just type the name of a variable in the console and see how VS Code shows the value. In your left side, you can find all the standard debug options such as “Watch”, “Stack”, “Variables” etc.
We will discuss more advance debugging options and tricks in the next article.
