Debugging React Apps with Vite in Visual Studio Code: Step-by-Step

Background

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"
          }
        }
      ]
    }
  ]
}