webstorm调试vite工程（后端开发人员版）

问题

作为一个后端开发人员，想要简单调试前端vite工程定位问题，在哪里？应该怎么处理？

步骤

这里使用的WebStorm版本为2025.1.1，老工程使用的是pnpm安装的依赖库。

ws设置pnpm

在ws设置界面设置如下图：

设置ws工程启动项目

找到源代码中的package.json文件，找到启动命令，先使用ws尝试启动项目（前提是pnpm i已经安全好了工程依赖，这是前端依赖知识，不是这里的重点了）。具体如下图：

点击"Run ‘dev’"，尝试运行，如下图：

点击运行后，ws会在右上角生成一个运行项目快捷配置。如下图：

能成功运行后，退出这个运行。然后，修改这个运行配置，如下图：

设置debug配置

debug使用

在源代码里面打好断点，然后，点击运行即可。ws会自动运行两个进程，一个nodejs提供服务，一个进行进行浏览器的js调试使用。

总结

ws比前几年又简化了一下debug调试配置。这也不怪jetbrains，只能说前端发展太飞速了。

参考

• Vite