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

```shell
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:

```json
{
  "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.

```json
{
  "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:

```json
{
  "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"
          }
        }
      ]
    }
  ]
}
```