Is there a way to debug code in VsCode initiated with Vite?

Question

My dev team configured a Node.js project with TypeScript to use Vite as dev server, using the npm script panel of VsCode. Is there a way to attach the debugger into this Vite server so we can debug the TSX code within the editor?

I have a similar problem with Snowpack. Cannot figure out how to configure VSCode. https://stackoverflow.com/questions/66221405/how-to-setup-pathmapping-in-vscode-to-debug-a-snowpack-application — tuner, Aug 21 '21 at 15:59

score 19 · Accepted Answer · answered Sep 26 '21 at 19:15

19

Go to the debug tab and click "create debug.json".

Then adapt the url port to use 4000 if you want to use the Vite plugin for VSCode. Or 3000 if you run it with yarn dev, npm run dev or vite from your console.

I also had to adapt the webRoot as I've created an app folder which is my root folder.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4000",
            "webRoot": "${workspaceFolder}/app"
        }
    ]
}

answered Sep 26 '21 at 19:15

Harrys Kavan

741
9
28

1

If that doesn't work, try changing the webRoot to be the directory where your 'Vue.app' file is located. Or if that doesn't work, put the directory where your index.html file is located. One of these two should work. – 0xZ3RR0 Mar 09 '22 at 17:42
then how to debug a vite plugin source code? this is not works – homy Apr 12 '22 at 06:29
Am I correct that launching a Chrome session in this way (which is outdated) makes the Chrome Vue Devtools unavailable? – Prometheus Jun 30 '22 at 16:53
Apparently it should be possible to have two debuggers attached at the same time, however I'm not sure if it works with this setup. https://developer.chrome.com/blog/new-in-devtools-63/#multi-client – Harrys Kavan Jun 30 '22 at 19:36
2

What is the "Debug tab"? I have the debug console, but there's nothing where one can click in order to generate a file. – ShadowGames Dec 01 '22 at 14:46
This does not work at all. The correct type is `chrome` and the correct `url` is the URL of your app e.g. `http://localhost:5174`. Then, with `"webRoot": "${workspaceFolder}"`, it debugs correctly. – Marc Feb 10 '23 at 18:45
This does not work perfectly for me. During debugging, VS Code is showing files like `localhost:4000\main.js?t=123456789` to me which are not associated with the original JS file and which are also not syntax-highlighted. – Christoph Thiede May 25 '23 at 20:01

score 7 · Answer 2 · edited Jul 07 '22 at 10:26

7

I write another answer, because the ones that are below were incomplete for me.

First, paste in your launch.json file this code:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4000",
            "webRoot": "${workspaceFolder}/app"  
        }
    ]
}

Then go to package.json, and add this to your dev command:

"dev": "vite --port 4000"

Then you run the command npm run dev and finally you can press F5 to start debugging.

edited Jul 07 '22 at 10:26

Gilles-Antoine Nys

1,481
16
21

answered Jul 03 '22 at 10:20

imvenx

194
3
10

The thing that worked for me: 1. Point `webRoot` to `/src` which contains my app logic. 2. `"dev": "vite --port 5173"` in `package.json` which matches port of `"url"` in _launch.json_ – Sumax Apr 30 '23 at 11:20

score 5 · Answer 3 · answered Mar 09 '22 at 17:40

The previous answer is for debugging in Chrome, if you prefer Firefox, here's the debug.json.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
    }
  ]
}

Very important: the "webRoot": "${workspaceFolder}/src", needs to point the the directory where your 'Vue.app' file is located. If that doesn't work, put the directory where your 'index.html' file is located. One of these two should work.

Further info can be found in this discussion on the official Vite GitHub repo: https://github.com/vitejs/vite/discussions/4065

score 2 · Answer 4 · answered Jun 02 '23 at 22:41

For me, the problem was that the breakpoints were not binding. The debugger was somehow looking for the URL pattern to match the local file path. So, I added a base tag to my vite.config.js file like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
    base: `/my-web-app/`,
    plugins: [react()],
});

Is there a way to debug code in VsCode initiated with Vite?

4 Answers4