Search code examples
vscode-debuggervite

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

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?

Solution

  • Go to the debug tab and click "create a launch.json file".

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