Electron 應用調試指南

Electron 是一個基於 Node.js 和 Chromium 的開源框架，用於構建桌面應用，開發者可使用 web 技術（HTML，JavaScript 和 CSS）完成整個應用的開發。許多知名桌面應用基於 Electron 實現，如 VSCode，Slack 和 GitHub Desktop 等。本文將介紹調試 Electron 應用的一些經常使用方法。

開發環境調試

Electron 應用進程分爲主進程和渲染進程，其底層實現分別對應於 Node.js 和 Chromium。因此調試 Electron 應用的方式也基本等價於這二者的結合，目前社區提供的方案已經比較完善了。

調試主進程

Electron 主進程是一個 Node.js 進程。Node.js 在 8 以後引入了 --inspect 參數用於調試，一樣也適用於 Electron 主進程：

./node_modules/.bin/electron . --inspect
複製代碼

默認會監聽 9229 端口，應用啓動後，在 Chrome 瀏覽器（或其餘基於 Chromium 開發的瀏覽器）中打開 chrome://inspect 便可看到對應的調試會話，點擊會話連接便可打開 devtools 進行調試。

另外，能夠在命令行參數中指定端口號，實現同時調試多個應用中的多個進程而不產生衝突：

./node_modules/.bin/electron . --inspect=1234
複製代碼

調試渲染進程

僅從調試的角度來看，Electron 的渲染進程能夠簡單地理解爲是 Chromium 的一個窗口。因此基本和 Chrome 瀏覽器中的調試網頁方式是一致的，即 focus 到當前窗口後，使用 Ctrl+Shift+I（macOS 下是 Cmd+Option+I）快捷鍵便可打開 devtools。使用上也是一致的。

快捷鍵的方式在某些特殊狀況下可能沒法達到預期效果，好比窗口是隱藏的，沒法 focus 到窗口。此時能夠在代碼中使用 Electron 提供的 JavaScript API 來打開 devtools：

const mainWindow = new BrowserWindow();

mainWindow.loadURL("file://path/of/index.html");
mainWindow.webContents.openDevTools();
複製代碼

上述演示代碼會在加載 HTML 文件以後執行打開 devtools 的操做。在實際使用中，將其放置到須要的位置便可。

在 VSCode 中調試

上述方法均會打開 devtools 界面，全部的調試操做均在 devtools 中進行。對於某些操做好比代碼斷點調試，能夠進一步與編輯器或 IDE 相結合，提高開發體驗。如下將簡要介紹如何在 VSCode 進行調試。

以 Electron 官方的模板 electron-quick-start 爲例，首先須要爲 VSCode 安裝一個擴展：Debugger for Chrome（用於調試渲染進程）。克隆代碼倉庫到本地並安裝依賴：

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start
npm install
複製代碼

而後在倉庫中添加文件 .vscode/launch.json，內容以下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Main",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": ["--remote-debugging-port=9222", "."],
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      }
    },
    {
      "name": "Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }
  ],
  "compounds": [
    {
      "name": "All",
      "configurations": ["Main", "Renderer"]
    }
  ]
}
複製代碼

而後在 VSCode 左側選擇 debug 面板，啓動 All 這一項開始調試，此時就能夠在 main.js 或 renderer.js 文件中添加斷點了。

配置文件中的一些要點解釋以下：

1. configurations 中的兩項分別對應主進程和渲染進程。compounds 中指定了一個組合會話 All，選擇 All 將會同時啓動這兩個會話。
2. Renderer 配置中的 webRoot 參數直接使用了 ${workspaceFolder}，是由於在這個工程中，HTML 引用的靜態資源位於根目錄下。實際使用的時候須要更新到對應的路徑纔會生效。
3. 實際開發中可能會有編譯的流程，好比使用 TypeScript 配合打包工具 Webpack，最終生成的代碼與源代碼並不在一個路徑下。這種狀況下須要產出 source map 來創建映射關係。

生產環境調試

生產環境的狀況比開發環境要複雜一些。通常來講，咱們但願有一個入口能夠打開 devtools，以便在出現問題的時候可以方便調試；而另外一方面，這個入口與產品自己無關，咱們但願它對用戶隱藏。一個比較常見的方案是：指定一套私有的快捷鍵，監聽對應事件並在回調中調用 JavaScript API 來打開 devtools，並將快捷鍵設置爲複雜的組合，以下降用戶誤觸的機率。

快捷鍵方案確實有必定可行性，不過並無從根本上解決這個問題。因此這裏推薦使用 Debugtron 進行調試。Debugtron 是一個調試生產環境 Electron 應用的工具，無需在客戶端集成任何代碼。它自己也基於 Electron 構建，支持多個平臺。

下載最新版本安裝並打開 Debugtron 後，會檢測並展現全部已安裝的 Electron 應用：

點擊圖標後會進入調試環節。以 Electron Fiddle 爲例，點擊圖標啓動後，面板左側會顯示可調試的會話列表，包括主進程和渲染進程，能夠根據標籤來區分。右側會顯示主進程啓動的日誌：

在左側的會話列表中選擇一項，點擊後會彈出對應的 devtools，能夠在其中看到錯誤日誌並定位問題，和開發環境徹底一致。同時也支持調試多個應用，啓動多個應用後能夠在 tab 區切換。

總結

Electron 的調試方案已經比較完善，在開發環節，主進程和渲染進程都可以很方便地打開 devtools 進行調試；並且這個工做流還能夠深度集成到 VSCode 中，提高開發體驗。

對於生產環境的狀況，可使用 Debugtron 進行調試，無需在客戶端集成額外的代碼便可得到與開發環境基本一致的功能。

原文連接：github.com/pd4d10/blog…