[Express.js] Adding Debug Configuration and Starting the Debugger with VSCode

canva

Express.js Series Articles

1. Setting Up an Express.js API with TypeScript from Scratch
2. Setting Up Coding Conventions and Transpiling TypeScript into JavaScript
3. (current)Adding Debug Configuration and Starting the Debugger with VSCode
4. (To be updated)

Preface

I am building an API template using Express.js and TypeScript to streamline future development projects. This article is part of a series documenting my progress, helping me deepen my understanding. Your feedback and suggestions are welcome.

In the previous articles, we already know how to start our server. However, it will be more useful to start debugger in the real situation. This article will introduce how to set configuration for debugger in VSCode(Visual Studio Code).

Step 1: Create Debug Configuration in VSCode

Click the Run and Debug icon on the left sidebar, then click create a launch.json file.

create a launch.json file

When the input field appears, type Node.js and select the option.

select debugger

This will generate the launch.json file with the following content.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/app.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

Step 2: Adjust tsconfig.json

Set sourceMap to true.

{
  "compilerOptions": {
    // ......
    "sourceMap": true,
    // ......
  },
  "ts-node": {
    // ......
  }
}

Step 3: Build the Project

Run the following command to build.

% npx tsc

This will create a dist folder with the generated app.js.map file.

Step 4: Add a Breakpoint

Add a breakpoint in app.ts.

breakpoint in app.ts

Step 5: Start the Debugger

Click the Run and Debug icon on the left sidebar, then click the green play button next to Launch Program.

Step 6: Verify the Breakpoint

Navigate to http://localhost:3000/. The debugger should stop at your breakpoint in VSCode.

stop at breakpoint

Click the Continuebutton to continue, and you should see “Hello World” successfully. Then, click stop button to stop debugger.

load successfully

Step 7: Add tasks.json for Automatic Builds

To avoid manually building the project each time before starting the debugger, add a task that runs before launching the debugger. Add a tasks.json file in the .vscode folder with the following content.

{
    "version": "2.0.0",
    "tasks": [{
        "label": "Transpile TypeScript",
        "command": "npx tsc",
        "type": "shell"
    }]
}

Step 8: Adjust launch.json

Add "preLaunchTask": "Transpile TypeScript" to your launch.json.

{
    // ......
    "version": "0.2.0",
    "configurations": [
        {
            // ......
            "preLaunchTask": "Transpile TypeScript"
        }
    ]
}

Step 9: Delete dist Folder and Start Debugger Again

Delete the dist folder and press the debug button. The dist folder will be recreated.

Step 10: Verify Breakpoint again

Navigate to http://localhost:3000/ again. The debugger should stop at your breakpoint. Click the play button to continue and see “Hello World” successfully.

Conclusion

Currently, there are three ways to start our server:

1. Start with a TypeScript file using ts-node.
2. Start with a JavaScript file using node.
3. Start with the debugger.

In the future, I will introduce how to add hot reloading for development.

You can find the source code at the link below.

https://github.com/FlyRayTsou/expressjs-api-template/tree/v0.0.3

Reference

• Using ChatGPT to refine the article makes it more natural.
• Setup the VSCode debugger for a NodeJS + Typescript project
• How to run a command in Visual Studio Code with launch.json