In the previous article (node.js debug using Chrome DevTools) we have seen how to debug Node.js applications using Chrome DevTools.
Visual Studio Code has built-in debugging support for Node.js runtime without relaying on chrome DevTools .
Create a folder structure as per below image in the host machine 
- Add "express" npm package as a dependency in package.json file
- Write required code into index.js file to expose GET endpoint using express.js
- Create vscode launch.json file and add appropriate configuration for debugging
- Implement "Launch" configuration for debugging
- Implement "Attach" by Proccess ID configuation for debugging
- Implement "Attach" by Port ID configuration for debugging
- Implement Nodemon configuration for debugging
- Implement "Node:Auto Attach" debugging
Step 1:
> npm i express
Step 2:
const express = require("express");
const app = express();
app.get('/', (req, res) => {
res.send("sample express GET end point")
})
app.listen(9300, () => {
console.log("app listening on port 9300");
})
Step 3:
Select VSCode Run option from left menu and create "launch.json" file with following content
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Node.Js App",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\index.js",
}
]
}
- VSCode stores debug configuration in a file called "launch.json" which exists in .vscode folder
- "type" attribute used to specify type of debugger i.e. Node, Chrome, CoreCLR, PHP and etc
- "request" attribute used to specify type of action i.e. Launch/Attach
- "name" attribute used to specify name of the configuration which display in the debugger dropdown
- "program" attribute used to specify Node.Js app start file to run the application in debug mode
run "Debug Node.Js App" configuration from the dropdown
Debugging with Attach by Process ID
- This is useful to Attach debugger when application already running with --inspect mode
- Add configuration with following content
- {"version": "0.2.0","configurations": [{"type": "node","request": "attach","name": "Debug Node.Js App With Attach","skipFiles": ["<node_internals>/**"],"processId": "${command:PickProcess}"}]}
- Start node js app using node --inspect index.js
- run "Debug Node.Js App With Attach" configuration from the VScode run dropdown
Debugging with Attach to Port
- This is useful to Attach debugger when application already running with --inspect mode and port
- Add configuration with following content
- {"version": "0.2.0","configurations": [{"type": "node","request": "attach","name": "Debug Node.Js App with Port","skipFiles": ["<node_internals>/**"],"port": 9229}]}
- Start node js app using node --inspect index.js ( i.e. 9229 is the default port for node.js app debugging)
- run "Debug Node.Js App With Port" configuration from the VScode run dropdown
Launch and Debugging with Nodemon
- install nodemon globally by using > npm i -g nodemon
- Add configuration with following content
- {"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Debug Node.Js with Nodemon","skipFiles": ["<node_internals>/**"],"program": "${workspaceFolder}\\index.js","restart": true,"runtimeExecutable": "nodemon",}]}
- "restart" : true attribute is required as nodemon does auto-restart on application changes
- "runtimeExecutable" attribute used to specify different executable i.e. node/nodemon/npm and etc.
- run "Debug Node.Js App With Nodemon" configuration from the VScode run dropdown
Debugging by Node:Auto Attach
- VSCode has built-in feature to debug Node js applications without writing any configuration
- Go to VSCode settings and set "Node: Auto Attach" on
- Set the break-points in index.js file
- Go to VScode terminal and run node.js application using --inspect mode
- > node --inspect index.js
- Observe VSCode debugger attached automatically
Happy Coding :)
No comments:
Post a Comment