如何在Visual Studio 2022（非VS Code）中调试Electron应用？

完全可以在Visual Studio 2022中完成Electron应用的构建与调试，哪怕没有官方提供的Electron专属项目模板，也支持直接导入现有Electron项目，不需要迁移改造原有项目结构。

• 打开Visual Studio Installer，找到你安装的VS2022实例，点「修改」，勾选「Node.js开发」工作负载完成安装，重启VS后即可获得Node.js项目识别、脚本调试的基础能力。

不需要专门的项目模板，两种导入方式都可以：

• 轻量导入：打开VS2022，选择「打开本地文件夹」，直接选中你现有Electron项目存放package.json的根目录即可，VS会自动识别项目结构、脚本命令，不需要生成专属的.sln解决方案文件。
• 解决方案式导入：如果需要和其他C++/C#等项目联动调试，可以新建一个空白的Node.js空项目，将现有Electron的所有代码文件复制到项目目录下，在项目属性中将启动入口对应到你的Electron主进程文件即可。

主进程调试 #

1. 在项目根目录下新建调试配置文件.vs/launch.vs.json，粘贴以下配置内容：

{
  "version": "0.2.1",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Electron主进程调试",
      "program": "${workspaceRoot}/node_modules/electron/cli.js",
      "args": [
        "${workspaceRoot}/main.js"
      ],
      "cwd": "${workspaceRoot}"
    }
  ]
}

注意将配置里的main.js替换为你自己项目的Electron主进程实际入口路径
2. 保存配置后，在VS顶部调试工具栏的下拉菜单中选中「Electron主进程调试」选项，按F5即可启动主进程调试，支持断点打桩、变量实时查看、调用栈追踪，和VSCode下的调试体验一致。

渲染进程调试 #

1. 先通过上述F5操作启动Electron主进程，等应用窗口完全加载后，点击VS顶部菜单栏「调试」-「附加到进程」。
2. 在弹出的进程列表中，找到和你的Electron窗口标题对应、类型标注为Script的渲染进程，附加类型选择Script，点击「附加」即可对渲染进程的JS代码打断点调试。

注意：本地开发模式下Electron默认开启渲染进程调试端口，如果搜不到对应进程，确认你启动应用时没有手动添加禁用远程调试的启动参数。

VS2022不会修改你原有项目的构建配置，直接打开VS集成终端，执行你原本在VSCode中使用的electron-builder、electron-packager等构建命令即可完成打包，操作逻辑和之前完全一致。

内容的提问来源于stack exchange，提问作者FluffyBike