Electron 應用除錯指南

pd4d10發表於2019-11-11
除錯

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 應用除錯指南

點選圖示後會進入除錯環節。以 Electron Fiddle 為例，點選圖示啟動後，皮膚左側會顯示可除錯的會話列表，包括主程式和渲染程式，可以根據標籤來區分。右側會顯示主程式啟動的日誌：

Electron 應用除錯指南

在左側的會話列表中選擇一項，點選後會彈出對應的 devtools，可以在其中看到錯誤日誌並定位問題，和開發環境完全一致。同時也支援除錯多個應用，啟動多個應用後可以在 tab 區切換。

總結

Electron 的除錯方案已經比較完善，在開發環節，主程式和渲染程式都能夠很方便地開啟 devtools 進行除錯；而且這個工作流還可以深度整合到 VSCode 中，提升開發體驗。

對於生產環境的情況，可以使用 Debugtron 進行除錯，無需在客戶端整合額外的程式碼即可獲得與開發環境基本一致的功能。

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

相關文章