[electron]vscode debug

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 偵錯。

參考

• http://electron.rocks/debugging-electron-in-vs-code/

用 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 做偵錯。

參考

• https://my.oschina.net/xpbug/blog/637864