Sunday, August 23, 2020

Docker Assignments #16: Debug Node.js and Express.js applications using Visual Studio Code

 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

 

  1. Add "express" npm package as a dependency in package.json file
  2. Write required code into index.js file to expose GET endpoint using  express.js
  3. 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