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

user_953247 0
Viewed 6832

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?

vite vscode-debugger
3 Answers

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

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.

enter image description here

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

user_53387610

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.

user_117401310
Related