vscode 如何断点调试普通 electron 程序？launch.json 基本配置

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在本文中，苏南大叔介绍个非常基础的知识点，就是vscode如何调试electron程序。可能是因为：苏南大叔并不喜欢使用vscode打断点。所以一直没有写这方面的内容。但是，大多数人还是有这个需求的，那就是：使用的工具软件是目前最流行的vscode编辑器，断点调试electron程序。

本文测试环境：mac/vscode@1.30.1。特约嘉宾是：electron-quick-start。

本文中所介绍的仅仅是一种vscode+electron的调试手段，并不是唯一答案，请知晓。

准备vscode

• https://code.visualstudio.com/

这里下载vscode，比较简单，不做过多描述。

准备源码

本文中说，这个是最普通的electron程序，意思就是不会经过编译就可以执行的普通的js文件。就是大家最常见的普通的electron项目结构。苏南大叔选择了小白入门的quick-start作为本文的特约嘉宾。

• https://github.com/electron/electron-quick-start

下载好的源码，记得sudo npm install即可，这些并不是本文考虑的重点内容。具体的使用方法，大家可以看下面这些文章：

• https://newsn.net/say/electron-pack-site.html
• https://newsn.net/say/electron-quick-start-modify.html

配置调试文件

vscode配置过程，如果分步骤说的话，其实挺复杂的。但是从根本上来说，其实仅仅是配置了一个文件。这个文件就是：.vscode/launch.json。

.vscode/launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      //"stopOnEntry": true,
      "sourceMaps": true,
      "program": "${workspaceRoot}/main.js",
      "protocol": "inspector"
    },
    {
      "name": "Debug Renderer Process",
      "type": "chrome",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "runtimeArgs": [
        "${workspaceRoot}/main.js",
        "--remote-debugging-port=9222"
      ],
      "sourceMaps": true,
      "port":"9222",
      "webRoot": "${workspaceRoot}"
    }
  ]
}

上面的这个配置，就是用于最简单的electron项目，虽然和网上大多数教程是不一样的配置内容。但是，这个配置是官方推荐的配置效果。使用的时候，需要注意，替换里面main.js为您的真正的入口文件地址。如果你不知道自己的入口文件地址，可以查看package.json里面的main字段。

来自于官方文档中的配置文件范例，原版的配置文件可以点击下面的链接查看，这里稍稍有所修改。

• https://github.com/octref/vscode-electron-debug/blob/master/electron-quick-start/.vscode/launch.json

文档地址如下：

• http://electron.org.cn/doc/tutorial/debugging-main-process-vscode.html

调试模式

上述launch.json文件中，定义了两种调试模式。分别是：

• Debug Main Process
• Debug Renderer Process

也就是说，主进程和渲染进程，是分开调试的，这一点需要特别想清楚。这里仅仅是列出launch.json中定义的两种调试模式，通常来说：

• 渲染进程其实还可以通过开发者工具调试，并不非要用这个vscode的调试模式。
• 而对于主进程，一般来说，代码都不会太复杂，是否使用这个vscode的调试模式，就看各自的实际情况了。

下图演示了，调试过程所需要点击的步骤，看图说话即可，不做解释。

两种调试模式，这里仅仅是launch.json配置。在实际的调试过程中，无论是主进程还是渲染进程，都会碰到比较奇怪的事情的。那么，敬请关注：苏南大叔的后续vscode调试electron相关文字。

总结

.vscode/launch.json文件，可以配置的方式有很多种。本文所提及的配置内容，仅仅是其中一个可能的答案，并不是唯一答案。更多苏南大叔提供的electron相关经验文章，请点击下面的链接查看。

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。