Electron的代碼調試

剛接觸Electron，嘗試調試程序時，竟無從下手，因此把這個過程作了下記錄

參考工程

根據Electron的官方文檔：使用 VSCode 進行主進程調試:https://electronjs.org/docs/tutorial/debugging-main-process-vscode

下載相應的github工程：github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

用VSCode導入工程

1:安裝VSCode

2:在VSCode的菜單「將文件夾添加到工做區」中把上面的工程導入

以下圖，點左下角的調試選擇箭頭圖標，能看到下面兩個選擇：

Debug Main Process(主進程調試)

Debug Renderer Process(渲染進程調試)

這兩個選擇和工程文件夾下的.vscode\launch.json的內容對應，以下圖

VScode調試主進程

選上圖的Debug Main Process，就能使代碼停在主進程代碼main.js中設置的斷點，以下圖：

VScode調試渲染進程

選上圖的Debug Renderer Process，以下面渲染進程代碼render.js所示，當你點擊程序顯示的界面時，會觸發click事件，就能使代碼停在設置的斷點中，以下圖：

在上面的工程中用VSCode調試渲染進程是ok的，但嘗試用webpack給代碼打包後，發如今代碼中設置的斷點會停不了，因此接着介紹下面的另外一種調試渲染進程的方法

DevTool調試渲染進程

在Electron的官方文檔中找到另外一種調試渲染進程的方法：

調試應用:https://electronjs.org/docs/tutorial/application-debugging
注意：此方法只能調試渲染進程

在主進程的代碼main.js處：

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})
  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`)
複製代碼

增長mainWindow.webContents.openDevTools();

以下：

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.webContents.openDevTools();
  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`)
複製代碼

不管你是用調試的方式，仍是用運行任務的方式，只要程序運行起來後，就能在你的程序運行的界面處默認打開以下圖右邊的Developer Tools調試窗口，和瀏覽器的F12調試窗口同樣。會發現，即便經webpack打包，也能在調試時正常停在斷點。

VScode調試時遇到的問題

當用electron github首頁中介紹的electron/electron-quick-start 時，發現並不能用VScode來調試主進程或渲染進程，即便按提示，把"protocol": "legacy"改成"protocol": "inspector"也是解決不了問題,後來發現此工程用的是"electron": "^1.8.4"，而上面用的是"electron": "1.5.1"，而用不一樣的electron版本時，所引用的nodejs的版本也是不同的，打印的log分別以下：

We are using Node.js 8.2.1, Chromium 59.0.3071.115, and Electron 1.8.4.
複製代碼

和

We are using node 7.4.0, Chromium 54.0.2840.101, and Electron 1.5.1.
複製代碼

初步懷疑和這個有關。

若是各位同窗有什麼解決方法，麻煩給我留個言，謝謝！