Coders Classroom: August 2020

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

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 :)

Docker Assignments #15: Debug Node.js and Express.js applications using Chrome DevTools

Node.js process listens for a debugging client by enabling --inspect (or) --inspect-brk. By default, it will listen at host and port 127.0.0.1:9229

Ex: > node --inspect server.js (or)

> node --inspect-brk server.js (i.e. it stops execution at the start of the script )

Create a folder structure as per below image in the host machine

Add "express" npm package as a dependency in package.json file
configure npm debug command as "node --inspect-brk index.js" in package.json
Write required code into index.js file to expose GET endpoint using express.js
execute "npm run debug" command in the terminal
Open Chrome DevTools by typing "chrome://inspect" in address bar and click on "Open dedicated DevTools for Node"

Step 1:

> npm i express

Step 2:

"scripts": {

    "debug": "node --inspect-brk index.js"
  }

Step 3:

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 4:

> npm run debug

Step 5:

see the following chrome DevTools window

Chrome DevTools has following major features

break-point debugging
JavaScript live Edit
souremap file searching
JavaScript profiler with flame-chart
Heap snapshot inspection, heap allocation time line and profile

Happy Coding :)