調試渲染進程
調試渲染進程使用 Chrome 開發者工具,打開方式:
-
Ctr+Shift+I
-
使用代碼打開:
// Open the DevTools. mainWindow.webContents.openDevTools()
可能的問題:
- 開發者工具提示:
Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) @ security-warnings.ts:180
在main.js 中添加
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
調試主進程
Node Inspector
(略)
Visual Studio Code 中調試主進程
1 創建Build
在VSC中頂部菜單欄中選擇"終端\配置任務",在彈出框中,選擇“npm:start”,這時,VSC自動生成 tasks.json
文件:
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"problemMatcher": [],
"label": "npm: start",
"detail": "electron ."
}
]
}
2 創建 launch任務
在VSC左側Debug欄,點擊‘創建launch.json’文件,在彈出框中選擇‘Node.js’,這時,VSC自動生成launch.json
文件:
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息,請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動程序",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\main.js"
}
]
}
把上面的文件清空。
修改為:
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息,請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動程序",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"args": ["."]
}
]
}
或者
自動生成:
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息,請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron Main",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"program": "${workspaceFolder}/main.js",
"skipFiles": [
"<node_internals>/**"
]
}
]
}
3 調試主進程(main.js)
在主進程(main.js)中打一個斷點,然后按F5,即可運行調試了