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?

Answer 1

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

Answer 2

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