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 文件中添加斷點了：

配置文件中的一些要點解釋如下：configurations 中的兩項分別對應主進程和渲染進程。compounds 中指定了一個組合會話 All，選擇 All 將會同時啟動這兩個會話。

Renderer 配置中的 webRoot 參數直接使用了 ${workspaceFolder}，是因為在這個工程中，HTML 引用的靜態資源位于根目錄下。實際使用的時候需要更新到對應的路徑才會生效。

實際開發中可能會有編譯的流程，比如使用 TypeScript 配合打包工具 Webpack，最終生成的代碼與源代碼并不在一個路徑下。這種情況下需要產出 source map 來建立映射關系。

生產環境調試

生產環境的情況比開發環境要復雜一些。一般來說，我們希望有一個入口可以打開 devtools，以便在出現問題的時候能夠方便調試；而另一方面，這個入口與產品本身無關，我們希望它對用戶隱藏。一個比較常見的方案是：指定一套私有的快捷鍵，監聽對應事件并在回調中調用 JavaScript API 來打開 devtools，并將快捷鍵設置為復雜的組合，以降低用戶誤觸的概率。

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

下載最新版本安裝并打開 Debugtron 后，會檢測并展示所有已安裝的 Electron 應用：

點擊圖標后會進入調試環節。以 Electron Fiddle 為例，點擊圖標啟動后，面板左側會顯示可調試的會話列表，包括主進程和渲染進程，可以根據標簽來區分。右側會顯示主進程啟動的日志：

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

總結

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

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

總結

以上是生活随笔為你收集整理的electron 打开调试_Electron 应用调试指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。