# How to Debug JavaScript and TypeScript in VS Code: A Step-by-Step Guide

# 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.

```javascript
// 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`:
    
    ```typescript
    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:
    
    ```json
    {
      "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.