Vite启动的VsCode中有调试代码的方法吗？

Question

我的开发团队使用 VsCode 的 npm 脚本面板配置了一个带有 TypeScript 的 Node.js 项目，以使用 Vite 作为开发服务器。有没有办法将调试器附加到这个 Vite 服务器，以便我们可以在编辑器中调试 TSX 代码？

Answer 1

转到调试选项卡并单击“创建 debug.json”。

然后url如果要使用VSCode的Vite插件，请将端口改成4000。或 3000，如果您从控制台使用 yarn dev、npm run dev 或 vite 运行它。

我还必须调整 webRoot，因为我创建了一个应用程序文件夹，它是我的根文件夹。

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

Answer 2

之前的答案是为了在 Chrome 中调试，如果您更喜欢 Firefox，这里是 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",
    }
  ]
}

非常重要： "webRoot": "${workspaceFolder}/src", 需要指向 'Vue.app' 文件所在的目录。如果这不起作用，请将目录放入 'index.html' 文件所在的目录。这两个中的一个应该可以工作。

更多信息可以在官方 Vite GitHub 回购的讨论中找到：https://github.com/vitejs/vite/discussions/4065

Vite启动的VsCode中有调试代码的方法吗？

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

vscode-debugger

vite