Background

In recent years I started working more with TypeScript and React to build modern back-end and front-end applications. While these technologies are powerful and improve developer productivity in many ways, I found that debugging them was not always straightforward.

In my earlier work, debugging Java or .NET applications in IntelliJ or Microsoft Visual Studio was usually quite predictable. However, with modern JavaScript or TypeScripts applications, the combination of asynchronous code, browser behavior, frameworks and build tools sometimes makes it difficult to understand what is happening when something goes wrong. I often found myself relying on console.log statements or switch between different tools just to trace a small issue.

Over time, I realized that many of these frustrations came from not fully utilizing the debugging capabilities already available in Visual Studio Code. This article is written based on my own learning process. I want to document the tehcniques and setups that helped me debug JavaScript / TypeScript applications more effectively in VS Code. My hope is that these practical tips can help other developers who may have faced similiar challenges.

Debugging a JavaScript Application Running on Node.js

Before diving into more complex scenarios such as debugging React or full-stack applications, it is helpful to start with the most basic case: debugging a JavaScript application running on Node.js.

Node.js provides built-in support for debugging, and Visual Studio Code integrates seamlessly with it. This makes it possible to set breakpoints, step through code, inspect variables, and evaluate expressions directly within tvhe editor.

To demonstrate the basics, let's start with a very simple but buggy Node.js program.

// app.js
function calculateTotal(items) {
  console.log("Calculating...");
  let total = 0;
  for (let i = 1; i <= items.length; i++) {
    total += items[i].price;
  }
  return total;
}

const myCart = [
  { name: "Laptop", price: 1200 },
  { name: "Mouse", price: 25 },
  { name: "Keyboard", price: 75 },
];

const finalPrice = calculateTotal(myCart);
console.log("Final Price: ", finalPrice);

The 3-Step Debugger

First, set a Breakpoint; press F5; choose "Node.js". That's it. Your script will start running and pause at your breakpoint.

Debugging a TypeScript Application in VS Code

Debugging Typescript can feel slightly more complex than standard JavaScript because the code must be transpiled before execution. However, with the right tools, you can achieve a seamless "set it and forget it" workflow.

1. The Modern Approach: Using tsx
   Instead of manually compiling files with tsc and then running them with Node, we can use tsx (TypeScript Execute). It's fast, zero-config way to run TypeScript files directly in a Node.js environment.
   First, add it to your project as a development dependency:
   npm install -D tsx

2. A Sample Script
   To test our debugger, let's use a simple function in a file named src/main.ts:

   function helloWorld(): void {
     console.log("Hello, world!");
   }
   
   helloWorld();
   

3. Configuring the Launch Blueprint
   To bridge the gap between your code and the VS Code debugger, you need a launch.json file. This lives inside the .vscode folder at the root of your project.

   This file acts as a configuration blueprint, instructing VS Code exactly which executable to use and which arguments to pass.

   Create or update .vscode/launch.json with the following:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Execute main.ts",
         "runtimeExecutable": "tsx",
         "runtimeArgs": ["src/main.ts"],
         "request": "launch",
         "skipFiles": ["<node_internals>/**"],
         "type": "node"
       }
     ]
   }
   

4. Start Debugging With this configuration in place, debugging is simple:

   • Open scr/main.ts.

   • Click to the left of line numbers to set a breakpoint (the red dot.).

   • Press F5 or go to the "Run and Debug" tab and click the Play button.