electron 调试
electron 的调试分两步,界面的调试,和主进程的调试。
界面调试类似浏览器F12,可是调试不到主进程。
主进程调试有vscode、命令行提示和外部调试器调试。
本篇记录的练习是vscode调试。命令行和外部调试器的方式可以参考官网:
https://www.electronjs.org/zh/docs/latest/tutorial/debugging-main-process
界面调试
- 先npm start启动界面。
- ctrl+shift+i 快捷键调出开发者模式,和浏览器类似。
- 也可以通过过界面上的view–Toggle Developer Tools来打开。
- main.js 可以添加mainWindow.webContents.openDevTools(),en…效果就是启动的时候默认打开了。
main.js在vscode中的调试
- 先在vscode中安装debugger插件。
- .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" : ["."]}]
}
- 给main.js打上断点,F5启动debug模式,执行到监听事件后即可进入断点。