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

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

vscode 如何断点调试普通 electron 程序?launch.json 基本配置 - vscode-electron
vscode 如何断点调试普通 electron 程序?launch.json 基本配置(图5-1)

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

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

准备vscode

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

vscode 如何断点调试普通 electron 程序?launch.json 基本配置 - vscode-download
vscode 如何断点调试普通 electron 程序?launch.json 基本配置(图5-2)

准备源码

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

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

配置调试文件

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

vscode 如何断点调试普通 electron 程序?launch.json 基本配置 - launch-json
vscode 如何断点调试普通 electron 程序?launch.json 基本配置(图5-3)

.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字段。

vscode 如何断点调试普通 electron 程序?launch.json 基本配置 - package-main
vscode 如何断点调试普通 electron 程序?launch.json 基本配置(图5-4)

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

文档地址如下:

调试模式

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

  • Debug Main Process
  • Debug Renderer Process

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

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

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

vscode 如何断点调试普通 electron 程序?launch.json 基本配置 - how-to-debug
vscode 如何断点调试普通 electron 程序?launch.json 基本配置(图5-5)

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

总结

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

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron    vscode

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!