electron调试

electron 调试

electron 的调试分两步，界面的调试，和主进程的调试。
界面调试类似浏览器F12，可是调试不到主进程。
主进程调试有vscode、命令行提示和外部调试器调试。
本篇记录的练习是vscode调试。命令行和外部调试器的方式可以参考官网：
https://www.electronjs.org/zh/docs/latest/tutorial/debugging-main-process

界面调试

1. 先npm start启动界面。
2. ctrl+shift+i 快捷键调出开发者模式，和浏览器类似。
3. 也可以通过过界面上的view–Toggle Developer Tools来打开。
4. main.js 可以添加mainWindow.webContents.openDevTools()，en…效果就是启动的时候默认打开了。

main.js在vscode中的调试

1. 先在vscode中安装debugger插件。
   
2. .vscode/launch.json文件添加如下内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."]
    }
  ]
}

3. 给main.js打上断点，F5启动debug模式，执行到监听事件后即可进入断点。