electron debug
因為 electron 本身有兩個行程， vscode 所以在 debug 的時候，在 main.js 這裡沒有問題，但是在 renderer.js 這裡就比較多問題。我搜尋了一下解法。
用 vscode 做 debug
我把原始教程 electron-quick-start 叫做 electron-quick-start-vanilla。要使用 vscode 對它做偵錯。
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動程式",
"program": "${workspaceRoot}/main.js",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"runtimeArgs": [
".",
"--enable-logging"
],
"env": {},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"type": "node",
"request": "attach",
"name": "附加至處理序",
"port": 5858
}
]
}因為我是在 windows 環境所以才是 electron.cmd，如果是其他 os 就是 electron 即可。
這樣子的設定能做到：
1. 在 vscode 中，main.js 設中斷點可停下來，console.log 能寫到 vscode 的偵錯視窗，無法寫到 devTool 的偵點視窗。
2. renderer.js 設中斷點停不下來，console.log 能寫到 vscode 的偵錯視窗，也會寫到 devTool 的偵錯視窗。
3. 可以在 devTool 的 Source 視窗對 renderer.js 做中斷點偵錯。console.log 可寫到 devTool 的偵錯視窗。
4. 在 vscode 按下綠色三角之後，renderer.js 不在 Sources 頁籤裡，此時在程式主畫面要按 ctrl-r 重載程式，renderer.js 就會被載入 Sources 頁籤，就可以在 devTool 裡偵錯了。
小結：main.js 在 vscode 偵錯，renderer.js 在 devTool 偵錯。
參考
用 vscode 加 Debuger for Chrome 做 debug
要安裝 extension Debuger for Chrome， launch.js 改成如下：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Renderer Process",
"type": "chrome",
"request": "launch",
//"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
// Use the following for Windows
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"runtimeArgs": [
"${workspaceRoot}/main.js",
"--remote-debugging-port=9222"
],
"webRoot": "${workspaceRoot}"
}
]
}這樣子的設定能做到：
1. 在 vscode 中，main.js 中斷點與 console.log 都無法寫到 vscode 的偵錯視窗裡。
2. 在 vscode 按下綠色三角之後，console.log 能寫到 vscode 的偵錯視窗，再按 ctrl-r 之後，renderer.js 的中斷點就可在 vscode 裡正常工作，據說是第一趟是 electron 啟動，remote debugger 還沒連上。
3. 因為 remote debugger 要連上，所以 electron 裡的 devTool 要關掉。不然 remote debug 會無法 attach。所以，DOM inspection 就沒辦法用了。
小結：這樣子用 vscode 專門偵錯 renderer.js 的部份。
參考
- http://code.matsu.io/1
- https://github.com/octref/vscode-electron-debug
- http://electron.rocks/debugging-electron-in-vs-code-revised/ 這個提供的 launch.js 不合用。
vscode 對 react jsx 加 webpack 做 debug
因為現在多數的前端開發，都會需要用到 babel 轉譯成 javascript，以及用到 webpack 做自動工作(例如打包)，所以，以上的方法還需要做改進。xpbug 的方法是採用 main.js 用 vscode 偵錯，ui.js (renderer.js) 用 devTool 偵錯。
快速建構
下載原始碼
>git clone https://github.com/xpbug/electron-react-webpack.git然後安裝所需套件
>npm install生成程式，產生 app 目錄
>node node_modules\webpack\bin\webpack.js執行程式
>node_modules\.bin\electron app然後就可以在 devTool 裡對 ui.js 做偵錯，因為是轉譯過的，所以要對 webpack:///./src/ui/ui.js 做偵錯。這裡人比較好看得懂。
至於一步一步製作的方法，就請至 xpbug 的部落格參考。
這樣子的設定能做到：
1. 在 vscode 對 main.js 做偵錯，在 devTool 裡對 ui.js 做偵錯。
