Node and Express.js are increasingly popular for developing backend APIs. Although building a RESTful API with Express.js is straightforward, not all developers know how to debug applications in Visual Studio Code. This article shares my insights on debugging an Express backend service, aiming to assist other developers.

Bootstrap a backend API

Before we can debug, we need a RESTful API project using Express.js. If you haven't had one yet, bootstrapped it with:

mkdir my-api && cd my-api npm init -y
npm install express dotenv cors 
npm install -D typescript tsx @types/node @types/express @types/cors
npx tsc --init

This will create an RESTful api project.

Create a folder src and created two files app.ts and server.ts.

my-api/
|-- src/
|   |-- app.ts
|   |-- server.ts

Setup a GET endpoint / in app.ts returning a json that indicates the API is running.

import express from 'express';
import type { Application, Request, Response } from 'express';
import cors from 'cors';

const app: Application = express();

app.use(cors());
app.use(express.json());

app.get('/', (req: Request, res: Response) => {
  res.status(200).json({ message: 'API is running smoothly' });
});

export default app;

The src/server.ts specifies the application to listen to port 3000.

import app from './app';

const PORT = 3000;

app.listen(PORT, () => {
  console.log(`🚀 Server ready at: http://localhost:${PORT}`);
});

In package.json, add the scripts to develop, build and start the application.

 "scripts": { 
   "dev": "tsx watch src/server.ts", 
   "build": "tsc", 
   "start": "node dist/server.js" 
  }

The above config will allow you to run npm run dev to start the application.

Create vscode/launch.json

Create vscode/launch.json with the following content:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Backend",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "type": "node",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"]
    }
  ]
}

This config tells VS Code to attach the debugger once your application is started by npm run dev.

Modern React projects increasingly use Vite for faster development, but debugging setups - especially in Visual Studio Code - can be confusing for some beginners. This article documents my hands-on learning experience debugging a React app built with Vite in VS Code, with the goal of helping other developers overcome similiar challenges more quickly and effectively.

Step 1: Setting Up a React Project with Vite

Before we can debug, we need a React project running with Vite. If you haven't created one yet, you can bootstrap it with:

npm create vite@latest frontend 
cd frontend 
npm install 
npm run dev

This will start your app at http://localhost:5173

Step 2: Configure VS Code for Debugging

To debug your React app in VS Code, we'll use a combination of a launch configuration and a task to start Vite automatically.

2.1 Add a Launch Configuration

Create .vscode/launch.json with the following content:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug frontend",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/frontend",
      "preLaunchTask": "Start Vite App",
      "skipFiles": [
        "<node_internals>/**",
        "**/node_modules/**",
        "**/@vite/client/**"
      ]
    }
  ]
}

This configuration tells VS Code to launch Chrome and attach it to your React app running at http://localhost:5173.

2.2 Add a Task to Start the App

Create .vscode/tasks.json to include the task to start the React app.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Vite App",
      "type": "shell",
      "command": "npm run dev",
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      },
      "problemMatcher": []
    }
  ]
}

This task starts your Vite development server whenever you start debugging in VS Code.

2.3 Link the Task in Launch Configuration

Ensure the preLaunchTask in launch.json matches the task label "Start Vite App". This makes VS Code start your app automatically before launching the debugger.

2.4 Update Task Configuration

Currently, VS Code doesn't recognize when your task completes, prompting a "Debug anyway" popup. To inform VS Code that the React application has finished starting, update tasks.json by adding isBackground: true and a problemMatcher that monitors the terminal output for the "ready" message (e.g., VITE v5.x.x ready in ...).

So, the final tasks.json should look like:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Vite App",
      "type": "shell",
      "command": "npm run dev",
      "isBackground": true, // <--- CRITICAL: Tells VS Code not to wait for exit
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      },
      // This regex watches the console for Vite's startup message
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".*VITE.*",
            "endsPattern": ".*ready in.*|.*Local:.*" // <--- Signal that task is "done"
          }
        }
      ]
    }
  ]
}

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.