Vite Debugger
Debug Vite applications directly in VS Code. Set breakpoints in your .tsx/.ts/.vue/.svelte source files and step through them — no browser DevTools needed.
Features
- Zero config — auto-detects running Vite dev server and Chrome debug port
- Breakpoints — line, conditional, hit count, and logpoints
- Smart stepping — automatically skips Vite-injected code (HMR wrappers, React Refresh)
- HMR-aware — breakpoints survive hot module replacement
- React inspection — view component props, state, and individual hook values
- Network breakpoints — pause on fetch/XHR matching patterns (e.g.,
GET /api/users)
- Step-in targets — choose which function call to step into on a line
- skipFiles — configure glob patterns to skip files during stepping
Quick Start
- Start your Vite dev server (
npm run dev)
- Open the Run & Debug panel in VS Code
- Select "Attach to Vite App" or "Debug Vite App"
- Set breakpoints and debug
launch.json
{
"version": "0.2.0",
"configurations": [
{
// Attach to an existing Chrome with a running Vite app
"type": "vite",
"request": "attach",
"name": "Attach to Vite App",
"webRoot": "${workspaceFolder}"
},
{
// Launch a new Chrome window for debugging
"type": "vite",
"request": "launch",
"name": "Debug Vite App",
"webRoot": "${workspaceFolder}"
}
]
}
Configuration
| Property |
Type |
Default |
Description |
viteUrl |
string |
auto-detect |
Vite dev server URL |
chromePort |
number |
9222 |
Chrome remote debugging port |
webRoot |
string |
${workspaceFolder} |
Workspace root for source resolution |
skipFiles |
string[] |
[] |
Glob patterns for files to skip during stepping |
sourceMapPathOverrides |
object |
{} |
Custom source map path mappings |
skipFiles
Skip files you don't want to step through:
{
"type": "vite",
"request": "attach",
"name": "Attach to Vite App",
"webRoot": "${workspaceFolder}",
"skipFiles": [
"**/styled-components/**",
"**/node_modules/**"
]
}
Network Breakpoints
Use Function Breakpoints in VS Code to pause on network requests:
GET /api/users — pause on GET requests matching /api/usersPOST /api/ — pause on any POST to /api//graphql — pause on any method to /graphqlstatus:>=400 — pause on error responses
How It Works
Vite Debugger connects to Chrome via the Chrome DevTools Protocol (CDP) and resolves Vite's on-demand source maps to map between your original source files and the transformed code running in the browser.
VS Code <--DAP--> Vite Debugger <--CDP--> Chrome <--HTTP--> Vite Dev Server
Chrome Connection
The debugger finds a debuggable Chrome in this order:
- Check the specified
chromePort (default 9222)
- Auto-discover any Chrome running with
--remote-debugging-port
- Launch a new debug Chrome instance (your normal Chrome stays untouched)
Requirements
- VS Code 1.85+
- Node.js 18+
- A Vite-based project (React, Vue, Svelte, etc.)
- Chrome / Chromium browser
Known Limitations
- Chrome allows only one debugger connection per tab. See Chrome Debugging Limitation for details.
- Source maps for dynamically imported modules load on-demand — breakpoints in lazy-loaded files become active when the module is first imported.
License
MIT
