Debugging a React (Vite) App in VS Code with Microsoft Edge
This guide shows how to set up debugging for a React project created with Vite in VS Code. When configured, pressing F5 will start the Vite dev server and automatically open your app in Microsoft Edge with breakpoints enabled.
Step 1: Create a .vscode folder
In the root of your project, create a folder named .vscode.
Inside it, add a file: launch.json
Step 2: Add launch.json
Paste the following configuration:
{
"version": "0.2.0",
"configurations": [
{
"name": "Vite dev server",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"cwd": "${workspaceFolder}"
},
{
"name": "Edge: http://localhost:5173",
"type": "msedge",
"request": "launch",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}",
"sourceMaps": true
}
],
"compounds": [
{
"name": "Debug React (Vite + Edge)",
"configurations": ["Vite dev server", "Edge: http://localhost:5173"]
}
]
}
Step 3: Run and Debug
Open the Run & Debug view (Ctrl+Shift+D) or by clicking the icon on the left - usually 3 or 4 down from the folders icon.
Select the Edge + Vite (F5) configuration from the dropdown
and press F5. Or you can click the green arrow from here. Once you have selected this option you can just press F5 from anywhere in future.
VS Code will start npm run dev in the background, wait until Vite is ready,
and automatically launch Microsoft Edge pointing at http://localhost:5173.
You can now place breakpoints in your React code and debug them live.
Tips
- If Edge does not launch, add
"runtimeExecutable"to point to your Edge installation. - You can still use the JavaScript Debug Terminal (Command Palette → Debug: JavaScript Debug Terminal) to run
npm run devmanually if needed. - Make sure Vite is serving on port 5173, or update the URL in both configs.