- 開發環境
- Node.js
- Vscode
- vscode安裝Debugger for Chrome
- 創建開發目錄（也是解決方案）
- 執行初始化命令，創建electronpicture工程，並添加main.js和index.html文件
npm init
- 安裝electron
npm install electron -dev
- 如果安裝失敗，則可能需要將參數unsafe-perm設置爲true
npm install electron --unsafe-perm=true
- 如果網速較慢可以添加–verbose來顯示下載速度
npm install --verbose electron
- 如果最後一直裝不上，可以直接下載Release進行開發
工程目錄結構如下
4. 添加測試頁面
index頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>This is test pag!</p>
</body>
</html>
main.js頁面
const { app, BrowserWindow, ipcMain } = require('electron');
//const edge = require('electron-edge-js');
const path = require('path');
let win;
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 400
}),
win.loadFile(path.join(__dirname, 'index.html'));
//打開頁面調試功能
win.webContents.openDevTools();
}
app.on('ready', createWindow)
- 配置啓動調試
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"compounds": [{
"name": "Electron",
"configurations": [
"Electron Main",
"Electron Renderer"
]
}],
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron Main",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"args": [
"${workspaceRoot}/main.js",
"--remote-debugging-port=9333" //Set debugging port for renderer process
],
"protocol": "inspector" //Specify to use v8 inspector protocol
},
{
"type": "node",
"request": "attach",
"name": "Electron Renderer",
"protocol": "inspector",
"port": 9333
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\main.js"
}
]
}
最終效果圖
- 至此一個工程項目就搭建完成了，可以調試主進程和渲染進程，熟悉頁面調試的也可以使用頁面（chrome）的調試功能，開關見代碼註釋。