Visual Studio Code调试electron主进程

Visual Studio Code调试electron主进程

作者: jekkay 分类: electron 发布时间: 2017-06-11 14:56 

一·概述

此文原出自【水滴石】： http://www.easysb.cn

对于窗口中的javascript脚本，我们可以通过谷歌浏览器的很多插件来调试，比如DevTools等。但是对于Electron中的主程序，我们需要额外的工具和方法来进行调试。

对于Electron程序，可以通过以下的命令启动程序，以方便外部调试工具通过V8调试协议来调试，其命令格式如下：

# elctron –debug=${port} path/to/app

# electron –debug-brk=${port} path/to/app

上面两种启动方式，都会使得Electron进程在指定的端口监听。这样，外部的调试工具就可以通过此端口，通过V8调试协议调试主程序。

二·VSCode 调试

使用Visual Studio Code可以调试Electron的主程序，这给我们开发调试带来很大便捷，方法如下：

1) 在当前工程下，创建文件 .vscode/launch.json

2) 在该文件中输入以下内容

{

“version”: “0.2.0”,

“configurations”: [

{

“name”: “Debug Main Process”,

“type”: “node”,

“request”: “launch”,

“cwd”: “${workspaceRoot}”,

// “runtimeExecutable”: “${workspaceRoot}/node_modules/.bin/electron.cmd”,

“runtimeExecutable”: “C:/Users/Administrator.SKY-20170407TCX/AppData/Local/Yarn/bin/electron.cmd”,

“program”: “${workspaceRoot}/main.js”

}]

}

 

 

     注意以下两个问题:

        a) 路径问题

              如果electron是局部安装的话，就执行局部环境路径，例如”${workspaceRoot}/node_modules/.bin/electron.cmd”，如果是全局安装的话，先执行yarn global bin查看全局的路径，然后将electron的路径填写进去，比如我的全局路径就是”C:/Users/Administrator.SKY-20170407TCX/AppData/Local/Yarn/bin/electron.cmd”。

       b) 文件名

            Linux和Windows的文件名会有所有不同，Windows的是electron.cmd，Linux的是electron，注意区分，最好的办法就是去路径下查看一下到底叫什么鬼！

  3) 接下来，就可以点击菜单Debug -> Start Debugging，也可以直接按快捷键F5，启动程序。

  4) 为了测试是否可以单步之类的操作，我们在主程序的第一行，打下断点，然后按下F5启动，主程序就断在了第一行代码中,而且还可以单步、查看变量以及调用栈等，相当方便，如下图。