HowTo JS – Node Debug in Visual Studio Code

Visual Studio Code has support for JavaScript and out-of-the-box Node.js debugging. Here’s how.nodejs-logo

Steps

  • open project
  • install
  • start
  • stop
  • debug mode start
  • debug code
  • debug mode stop

Open project

Start VSC -> File -> Open Folder -> Select Folder

Screen Shot 12-05-17 at 04.50 PM.PNG

Screen Shot 12-06-17 at 09.45 PM.PNG

Screen Shot 12-06-17 at 09.47 PM 001.PNG


Install

View -> Integrated Terminal -> “npm install”

Screen Shot 12-05-17 at 04.53 PM 001.PNG

Screen Shot 12-05-17 at 04.53 PM.PNG

Screen Shot 12-06-17 at 09.58 PM.PNG


Start

Integrated Terminal -> “npm start”

Start Chrome -> type “localhost:3000”

Screen Shot 12-06-17 at 09.59 PM.PNG

Screen Shot 12-06-17 at 10.00 PM.PNG

Screen Shot 12-05-17 at 04.56 PM.PNG


Stop

Integrated Terminal -> Ctrl+C  -> “Y”+Return

Screen Shot 12-06-17 at 10.02 PM.PNG


Debug Mode Start

Debug Icon -> Settings -> NodeJS -> launch.json -> Save -> Debug Start Icon

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/server.js"
        }
    ]
}

Screen Shot 12-06-17 at 10.03 PM.PNG

Screen Shot 12-06-17 at 10.03 PM 002.PNG

Screen Shot 12-06-17 at 10.03 PM 003.PNG

Screen Shot 12-06-17 at 10.06 PM.PNG

Screen Shot 12-06-17 at 10.09 PM 001.PNG

 


Debug Code

Explorer Icon -> server.js -> add breakpoitn by double-clicking on line 7

Open Browser -> refresh (F5)

Open VSC -> Hover on source vars & params -> press Debug Continue Icon (F5)

Screen Shot 12-06-17 at 10.11 PM.PNG

Screen Shot 12-06-17 at 10.11 PM 001.PNG

Screen Shot 12-06-17 at 10.11 PM 003.PNG

Screen Shot 12-05-17 at 04.58 PM 002.PNG

Screen Shot 12-06-17 at 10.13 PM.PNG

Screen Shot 12-06-17 at 10.14 PM.PNG

Screen Shot 12-06-17 at 10.15 PM.PNG


Debug Mode Stop

Debug Stop Icon

Screen Shot 12-06-17 at 10.16 PM 001.PNG


Source on GitHub

https://github.com/DamienFremont/blog/tree/master/20171206-js-node-debug-visualstudiocode

References

https://code.visualstudio.com/docs/nodejs/nodejs-tutorial

 

6 thoughts on “HowTo JS – Node Debug in Visual Studio Code

  1. Nice weblog here! Additionally your site loads up fast! What host are you the use of? Can I get your affiliate link for your host? I wish my site loaded up as quickly as yours lol

  2. I am not sure the place you are getting your info, however great topic. I must spend some time studying more or figuring out more. Thank you for fantastic info I used to be searching for this info for my mission.

  3. I am not positive where you are getting your info, but great topic. I needs to spend some time studying much more or understanding more. Thanks for magnificent info I used to be in search of this info for my mission.

  4. Nice weblog here! Also your website rather a lot up very fast! What host are you the usage of? Can I am getting your associate hyperlink for your host? I wish my website loaded up as fast as yours lol

  5. I enjoy, lead to I discovered exactly what I used to be having a look for. You have ended my four day long hunt! God Bless you man. Have a nice day. Bye

  6. Magnificent website. A lot of useful information here. I am sending it to some friends ans also sharing in delicious. And obviously, thanks in your sweat!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s