有没有办法在用 Vite 启动的 VsCode 中调试代码？

Question

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

Answer 1

进入调试选项卡并点击“create debug.json”。

如果你想使用 VSCode 的 Vite 插件，请调整 url 端口以使用 4000。如果您在控制台中使用 yarn dev、npm run dev 或 vite 运行它，则为 3000。

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

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