Electron - 除錯

我們的應用程式執行著兩個程序——主程序和渲染器程序。

由於渲染器程序是在我們的瀏覽器視窗中執行的，我們可以使用 Chrome 開發者工具來除錯它。要開啟開發者工具，請使用快捷鍵“Ctrl+Shift+I”或<F12>鍵。您可以檢視如何使用開發者工具此處。

開啟開發者工具後，您的應用程式外觀如下面的螢幕截圖所示：

除錯主程序

Electron 瀏覽器視窗中的開發者工具只能除錯在該視窗中執行的 JavaScript 程式碼（即網頁）。要除錯在主程序中執行的 JavaScript 程式碼，您需要使用外部偵錯程式並使用--debug或--debug-brk開關啟動 Electron。

Electron 將在指定的埠上偵聽 V8 偵錯程式協議訊息；外部偵錯程式需要在此埠上連線。預設埠為 5858。

使用以下命令執行您的應用程式：

$ electron --debug = 5858 ./main.js

現在您需要一個支援 V8 偵錯程式協議的偵錯程式。為此，您可以使用 VSCode 或 node-inspector。例如，讓我們按照以下步驟設定 VSCode。請按照以下步驟進行設定：

下載並安裝VSCode。在 VSCode 中開啟您的 Electron 專案。

新增一個檔案.vscode/launch.json，其中包含以下配置：

{
   "version": "1.0.0",
   "configurations": [
      {
         "name": "Debug Main Process",
         "type": "node",
         "request": "launch",
         "cwd": "${workspaceRoot}",
         "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
         "program": "${workspaceRoot}/main.js"
      }
   ]
}

注意 - 對於 Windows，請使用"${workspaceRoot}/node_modules/.bin/electron.cmd"作為runtimeExecutable。

在main.js中設定一些斷點，並在除錯檢視中開始除錯。當您遇到斷點時，螢幕將如下所示：

VSCode 偵錯程式功能非常強大，將幫助您快速糾正錯誤。您還可以使用node-inspector等其他選項來除錯 Electron 應用程式。