Fork me on GitHub

Howto Js Node Debug Visual Studio Code

By Damien · 2017-12-06 · expressjs javascript nodejs tools

post-image

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

Steps

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

Open project

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

post-image

post-image

post-image

Install

View -> Integrated Terminal -> “npm install”

post-image

post-image

post-image

Start

Integrated Terminal -> “npm start”

Start Chrome -> type “localhost:3000”

post-image

post-image

post-image

Stop

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

post-image

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"
        }
    ]
}

post-image

post-image

post-image

post-image

post-image

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)

post-image

post-image

post-image

post-image

post-image

post-image

post-image

Debug Mode Stop

Debug Stop Icon

post-image

Source on GitHub

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

References

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

Origin

https://damienfremont.com/2017/12/06/howto-js-node-debug-visual-studio-code/

Hi, I'm Damien

Software Developer

LinkedIn GitHub Twitter

Founder of this blog, love Java and Open Source stuff. Follow him on Twitter.