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

Posted 2023-02-15

【中文标题】有没有办法在用 Vite 启动的 VsCode 中调试代码？

【英文标题】：Is there a way to debug code in VsCode initiated with Vite?

【发布时间】：2021-05-14 18:09:41

【问题描述】：

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

【问题讨论】：

我对 Snowpack 也有类似的问题。无法弄清楚如何配置 VSCode。 ***.com/questions/66221405/…

【参考方案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"
        
    ]