Article Outline
4.0 Electron 调试
So begins a new age of knowledge
前言
作为初学Electron
的同学,官方文档就是最好的文档
渲染进程调试
渲染进程,即web页面,调试方式与我们平常开发web页面是方式是一样的, 都是使用DevTools进行调试
通过编程的方式在 BrowserWindow
的 webContents
中调用 openDevTool()
API来打开它们:
const { BrowserWindow } = require('electron')
let win = new BrowserWindow()
win.webContents.openDevTools()
有关DevTools的使用方式,google为我们提供了详细的文档, 方便我们调试我们的web页面
主进程调试
由于Electron的本质一个NodeJs程序,所以主进程的日志默认是在命令行输出的,就如同我们上一章节中的情况一样,那如果我们不仅想查看日志,还想调试怎么办呢?
DevTools调试
我们打开项目中的package.json, 在 scripts
中增加如下脚本:
"scripts": {
"start:debug": "electron . --inspect=5858 electron-qucik-start"
}
运行后,终端如下:
之后,打开我们的chrome浏览器, 输入网址chrome://inspect, 点击Configure按钮,确保配置项中有我们的端口
点击Done, 之后我们可以就可以看到我们
点击 inspect, 就可以打开一个调试主进程的DevTools, 在这里, 我们可以和调试渲染进程一样,在主进程的代码中打断点调试
vscode调试
如果你选择的代码编辑器是vscode的话,我们可以在vscode中增加调试脚本,使用vscode调试主进程
使用vscode打开项目根目录,增加一个.vscode/launch.json文件, 写入如下脚本
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"args" : ["."],
"outputCapture": "std"
}
]
}
使用vscode,在main.js中设置一些断点,按下f5,你应该能够捕获断点信息。
LAST TOPIC => Electron 进程通讯