Visual Studio Code调试electron主进程

时间:2023-12-04 18:20:32

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”
}]
}
Visual Studio Code调试electron主进程
     注意以下两个问题:
        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启动,主程序就断在了第一行代码中,而且还可以单步、查看变量以及调用栈等,相当方便,如下图。
Visual Studio Code调试electron主进程