Debugging Node.js TypeScript Applications with Visual Studio Code

Are you developing Node.js applications using TypeScript and facing difficulties in debugging? Debugging is an essential part of any software development process, and it becomes even more critical when working with TypeScript applications. Fortunately, Visual Studio Code provides an excellent debugging experience for Node.js TypeScript applications, making it easier for developers to find and fix bugs in their code.

In this article, we will explore the steps involved in debugging Node.js TypeScript applications with Visual Studio Code. We will start by discussing the prerequisites for setting up the development environment, followed by a step-by-step guide on how to debug a sample TypeScript application using Visual Studio Code.

Prerequisites

Before we dive into the details of debugging TypeScript applications, let's discuss the prerequisites for setting up the development environment.

1. Node.js and npm

Make sure you have Node.js and npm installed on your system. You can download the latest version of Node.js and npm from the official Node.js website. Verify the installation by running the following commands in your terminal:

node -v
npm -v

2. Visual Studio Code

Visual Studio Code is a lightweight and powerful source code editor that provides an excellent debugging experience for Node.js applications. You can download Visual Studio Code from the official website and install it on your system.

3. TypeScript

TypeScript is a superset of JavaScript that adds type annotations and other language features to JavaScript. It is recommended to use TypeScript when developing Node.js applications. You can install TypeScript using npm by running the following command:

npm install -g typescript

Debugging a TypeScript Application

Now that we have set up our development environment let's explore the steps involved in debugging a TypeScript application using Visual Studio Code.

1. Create a New TypeScript Application

Let's start by creating a new TypeScript application. Open your terminal and run the following commands:

mkdir my-app
cd my-app
npm init -y
npm install typescript --save-dev

Now create a new file named app.ts and add the following code:

function add(a: number, b: number) {
  return a + b;
}

console.log(add(10, 20));

This is a simple TypeScript application that adds two numbers and logs the result to the console.

2. Configure TypeScript Compiler

Now that we have created a TypeScript application, we need to configure the TypeScript compiler to transpile TypeScript code to JavaScript code. Create a new file named tsconfig.json in the root directory of your project and add the following code:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist",
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

This configuration specifies that the compiler should transpile TypeScript code to ES5 JavaScript code, generate source maps, and output the transpiled code to the dist directory.

3. Configure Launch Configuration

Now that we have configured the TypeScript compiler, we need to configure the launch configuration for debugging the application. Open Visual Studio Code and navigate to the Debug panel. Click on the gear icon to open the launch.json file and add the following configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "program": "${workspaceFolder}/dist/app.js",
      "preLaunchTask": "tsc: build",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "internalConsoleOptions": "openOnSessionStart",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Let's break down the launch configuration:

• type: specifies the debugger type as Node.js.
• request: specifies the debugger to launch a new Node.js process.
• name: specifies the name of the debug configuration.
• program: specifies the path of the entry point of the application.
• preLaunchTask: specifies the task to run before launching the debugger. In our case, it is tsc: build, which compiles the TypeScript code to JavaScript code.
• sourceMaps: specifies to generate source maps for debugging.
• outFiles: specifies the output directory for the generated JavaScript code.
• internalConsoleOptions: specifies to open the debugger console on session start.
• skipFiles: specifies to skip internal Node.js files while debugging.

4. Debugging the Application

Now that we have configured the launch configuration, let's start debugging the application. Set a breakpoint on the console.log statement by clicking on the left-hand side of the code editor or pressing F9.

Click on the Debug icon in the left-hand side panel and select "Debug TypeScript" from the dropdown list. Click on the green "Start Debugging" button to start the debugger.

The debugger should start and stop at the breakpoint we set earlier. You can use the debugging panel to step through the code, inspect variables, and evaluate expressions.

Congratulations! You have successfully debugged a TypeScript application using Visual Studio Code.

Conclusion

Debugging Node.js TypeScript applications can be challenging, but Visual Studio Code provides an excellent debugging experience that makes it easier to find and fix bugs in your code. In this article, we discussed the prerequisites for setting up the development environment and provided a step-by-step guide on how to debug a sample TypeScript application using Visual Studio Code.

By following these steps, you can start debugging your TypeScript applications with ease and become a more productive developer. Happy debugging!