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

 

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s