Electron的代码调试

刚接触Electron，尝试调试程序时，竟无从下手，因此把这个过程作了下记录

参考工程

根据Electron的官方文档：使用 VSCode 进行主进程调试:https://electronjs.org/docs/tutorial/debugging-main-process-vscode

下载相应的github工程：github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

用VSCode导入工程

1:安装VSCode

2:在VSCode的菜单“将文件夹添加到工做区”中把上面的工程导入

以下图，点左下角的调试选择箭头图标，能看到下面两个选择：

Debug Main Process(主进程调试)

Debug Renderer Process(渲染进程调试)

这两个选择和工程文件夹下的.vscode\launch.json的内容对应，以下图

VScode调试主进程

选上图的Debug Main Process，就能使代码停在主进程代码main.js中设置的断点，以下图：

VScode调试渲染进程

选上图的Debug Renderer Process，以下面渲染进程代码render.js所示，当你点击程序显示的界面时，会触发click事件，就能使代码停在设置的断点中，以下图：

在上面的工程中用VSCode调试渲染进程是ok的，但尝试用webpack给代码打包后，发如今代码中设置的断点会停不了，因此接着介绍下面的另外一种调试渲染进程的方法

 

DevTool调试渲染进程

在Electron的官方文档中找到另外一种调试渲染进程的方法：

调试应用:https://electronjs.org/docs/tutorial/application-debugging
注意：此方法只能调试渲染进程

在主进程的代码main.js处：

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})
  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`)

增长mainWindow.webContents.openDevTools();

以下：

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.webContents.openDevTools();
  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`)

不管你是用调试的方式，仍是用运行任务的方式，只要程序运行起来后，就能在你的程序运行的界面处默认打开以下图右边的Developer Tools调试窗口，和浏览器的F12调试窗口同样。会发现，即便经webpack打包，也能在调试时正常停在断点。

VScode调试时遇到的问题

当用electron github首页中介绍的electron/electron-quick-start 时，发现并不能用VScode来调试主进程或渲染进程，即便按提示，把"protocol": "legacy"改成"protocol": "inspector"也是解决不了问题,后来发现此工程用的是"electron": "^1.8.4"，而上面用的是"electron": "1.5.1"，而用不一样的electron版本时，所引用的nodejs的版本也是不同的，打印的log分别以下：

We are using Node.js 8.2.1, Chromium 59.0.3071.115, and Electron 1.8.4.

和

We are using node 7.4.0, Chromium 54.0.2840.101, and Electron 1.5.1.

初步怀疑和这个有关。

若是各位同窗有什么解决方法，麻烦给我留个言，谢谢！