Debugging in VS Code

[softboy99]

This is only documentation about Debugging in VS Code for Vue CLI & webpack. Please adding the vite alternatives. Currtly, we only debug by console.log. which is very ugly. we don't know how to set break points and debug in code editor?

[ygj6]

Refer：https://github.com/vitejs/vite/blob/main/.github/contributing.md#repo-setup
After vite is set to globally, you can breakpoint debugging on the source code.

[softboy99]

Hi,
I'm still not very clear about it. What i mean is to set breakpoints and debug my own project rather than vite itself.

[softboy99]

Hi,
How to debug project created with vite?

[softboy99]

Hi,
@ygj6,How to debug project created with vite?What i mean is to set breakpoints and debug the project created by vite rather than vite itself.

[patak-dev]

@softboy99 please avoid sending multiple messages to an issue. I'll move this to a GitHub Discussion, and you can also join the chat at Vite Land to ask questions.

You can also check this article, that will guide you through the process https://maximomussini.com/posts/debugging-javascript-libraries/

[hspaay]

Just starting with Vue3 and use vite as recommended in the Vue documentation. I like vite as it seems simple enough to get started with and it seems to just work.
Unfortunately, the vue vscode debug configuration example is using webpack. Maybe my google foo is a bit off but I have not found not a single example of debugging vue in vscode with vite. To me vite is useless if you can't debug vue in vscode with it.

Btw the article listed above by @patak-js is just a generic how to debug with node. While any help is appreciated there is no mention of vscode, so it doesn't answer the question.

[jfrondeau]

I got some success debugging a vite/vuejs 3 project with VS Code using Edge. Probably work with Chrome too.
Starting with no browser extension and no launch.json file in project.

Click on Run and Debug then on the "create a lauch.json file" link. In the popup option list, choose Edge Launch. The content of that list may change depending of the current active file in the editor.
Here is the content created:

{
    // 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": "pwa-msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Change url setting to "http://localhost:3000" if you use default project url and port for your project. Save launch.json file.

Next, run the project with

> npm run dev

Second, click on the Run and Debug (Ctrl+Shift+D), then choose Lauch Edge. Edge should open to project url and vs code start to listen for debugging.

Set a breakpoint in a vue component for example and it should be hit:

The current line in the screnshoot is the next after the breakpoint because I hit F10 in vs code :)

[hspaay]

@jfrondeau
Thanks for the reply. That approach works for me as well using Firefox on Linux. In this case the debug config looks like:

{
  // 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",
    }
  ]
}

I was wondering about the lack of source mapping, but maybe that isn't needed with vite using a debug build?
Thanks!

[MarkLeMerise]

Just to add some more zest to these answers, here's my current configuration which also includes launching the dev server and skipping files in node_modules (especially nice for looking at the call stack):

{
      "type": "pwa-chrome",
      "request": "launch",
      "skipFiles": ["${workspaceFolder}/node_modules/**/*.js"],
      "name": "Debug app",
      "preLaunchTask": "npm: start",
      "url": "https://localhost:8080",
      "webRoot": "${workspaceFolder}"
}

This launch configuration assumes you have npm start configured in tasks.json.

[hspaay]

Nice touch with the skipFiles option

[softboy99]

done all of above, but no breapoints been hit.
chrome version: 96,
edge version:96.
vite version: 2.6.14,
vue version:3.2.23
Both browser failed.

[softboy99]

Hi,
@jfrondeau,@MarkLeMerise
done all of above, but no breapoints been hit. chrome version: 96, edge version:96. Both browser failed. vite version: 2.6.14, vue version:3.2.23

[MarkLeMerise]

I'm sorry to hear you're still having trouble. My particular setup is React-based, not Vue-based, so I'm not sure how much that difference plays into the issue. I would suggest starting with a completely empty Vite config and working forwards from there. For reference, here is the essence of my tasks.json configuration:

{
  "version": "2.0.0",
  "tasks": [
    {
      "isBackground": true,
      "type": "npm",
      "script": "start",
    }
  ]
}

In package.json, npm start is just vite. I am still using the same launch.json configuration from my previous answer.

[hspaay]

Hmm, I thought my setup worked but breakpoints in some files stop at the right line while others don't. Files with vue/quasar components seem to have trouble while files with pure logic tends to stop at the intended line.
Interestingly if I put a 'debugger' statement where I want a breakpoint, the debugger does stop while showing a different source line.
I tried this in both vscode and webstorm and both exhibit the same behavior. That leads me to believe it is not an issue with the vscode launcher but with the vite source-maps.

(vue 3.2.23, typescript 4.4.3, vue-tsc 0.29.6, vite 2.6.14, @vitejs/plugin-vue 1.10.1, quasar 2.3.3, @quasar/vite-plugin 1.0.2, linux chrome)

@softboy99 can you confirm whether in your case a debugger statement works and if not, what the behavior is?

Update:
For 'fun' I tried the vite+vue+element-plus starter kit found here: https://github.com/element-plus/element-plus-vite-starter
Debugging is already broken for this basic app. Adding a function and calling it from a button click handler does not trigger a breakpoint in that function. The debugger statement does work but opens somewhere randomly elsewhere.
If this basic example is already broken does this mean that debugging with vue and vite is broken?

[jasonfharris]

I am also having issues with Vite + quasar + Vue3 + typescript + pug + Firefox. So on really simple projects I can get the source mappings to work, but on anything a bit more complicated the source mappings go out the window.

Then when I try to step into the code in Firefox I get an error in vscode:

Unable to open 'client.ts': Unable to read file '/Users/jason/NodeProjects/apps/test-vite-debugging/src/client/client.ts' (Error: Unable to resolve nonexistent file '/Users/jason/NodeProjects/apps/test-vite-debugging/src/client/client.ts').

I don't have any file in my project called client.ts

Update: Well I can debug in firefox setting breakpoints in the sources (including in the .vue files and that seems to work but it would be much nicer debugging in VSCode which I can't get to reliably work.

[HomyeeKing]

how to debug a vite plugin source code in vscode?

[cecillesalazar]

Got a successful configuration with python BE, node FE with typescript and vue, chrome, served with vite. Launch.json file below:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "be-server",
      "type": "python",
      "request": "launch",
      "module": "flask",
      "args": ["run"]
    },
    {
      "name": "fe-server",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev", "--prefix", "frontend"]
    },
    {
      "name": "chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://local.ripplematch.com:8000/",
      "webRoot": "${workspaceFolder}/frontend/apps/main/src"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["be-server", "fe-server", "chrome"],
      "stopAll": true
    }
  ]
}

The npm run dev command is just a script in package.json file that defaults to 'vite serve' and the --prefix frontend args is just pointing to the location where frontend assets are. Webroot is also pointing to the location of where App.vue is. Screenshot of bound breakpoint below:

[Andre-the-Viking]

Thanks @hspaay here a workaround I found whenever the React Component breakpoint is not working:

• create a pure js debugger function like this

export const debugData = (...params) => {
  console.log("debugData", params);
};

• put a breakpoint right on the console.log(...) line of that debugData function
• add a call from within the React component to debugData(whatever, you, need, to, debug, here);
• that way the VSCode debugger is accurate when it hits that pure js source breakpoint (even if the stack is having line discrepancies on the stacktrace in Component itself)

[f1am3d]

How to debug in WebStorm?

[bmcbarron]

As mentioned here, the key for me was updating "webRoot" in launch.json to point to the directory containing vite.config.ts. In my case the project is deeply nested in a monorepo, so it looks like this:

  "webRoot": "${workspaceFolder}/projects/ld/app",

Update 1: If you are working in a monorepo and importing code from other packages containing you're code, you'll likely also need this:

  "pathMapping": {
    "/@fs/": ""
  },

To help figure out what this path should look like, I put debugger; in my index.ts. Even with the wrong webRoot setting, when chrome hit this line, it broke into the debugger and helpfully opened the source-mapped file, which it claimed was in a non-existent directory. That invalid directory was the correctly location, but missing the projects/ld/app segment of the path. At that point, it was clear that the webRoot and relative paths in the sourcemap were being blindly concatenated, so fixing webRoot resolved it for me.

Update 2: Ignore the previous paragraph. It's much easier to debug path mapping in VSCode with these resources.

[ghiscoding]

Thank you so much, this is the only fix that worked for me in a pnpm workspace using the workspace:* protocol. I really had to do apply of these changes for it to work... 🚀 I can finally break now 🛑

[eduardo76]

This worked for me, breakpoints working as fine.
In my case, in the same folder I have backend and frontend folders.
So, configuring as bellow worked.

"webRoot": "${workspaceFolder}/frontend",

[barhun]

This took me a while to discover, so I think it might also help someone else out there! If you're debugging a Vue 3 application using Vite and you can't hit breakpoints set in src/router/index.js or src/store/index.js, that's because the very first few lines in those files are being rewritten by the Vue plugin of Vite and VS Code fails to match the content hashes of the local files against the ones produced by the browser. To make it work with those files, you can set the field enableContentValidation to false in the launch.json config as the following:

{
  "preLaunchTask": "task: dev",
  "name": "chrome",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:5173",
  "enableContentValidation": false,
  "webRoot": "${workspaceFolder}/src",
  "pathMapping": {"url": "/src/", "path": "${webRoot}/"}
}