【问题标题】：How to debug electron applications with IntelliJ or WebStorm?如何使用 IntelliJ 或 WebStorm 调试电子应用程序？
【发布时间】：2015-09-02 08:46:18
【问题描述】：

我使用 IntelliJ 作为开发工具，我想知道如何调试 Electron 应用程序？

我知道有一个 standard way 可以调试 Electron 应用程序，但是这个方法是在我的 IDE 之外完成的。

我尝试使用以下方法创建一个新的“Node.js”“运行/调试配置”：

使用此设置，我的应用程序将启动，但如果我在 main.js 中设置断点，应用程序将永远不会在断点处停止（= 调试不起作用）。

【问题讨论】：

【解决方案1】：

我就是这样设置的，效果很好。然后我把我的断点放在 webstorm 里面，它就可以工作了。

在 webstorm 中创建一个新的运行时配置，如下所示。

【讨论】：

【解决方案2】：

尝试通过 node_modules 中的电子可执行文件更改您的节点解释器。这对我来说似乎工作正常；）

【讨论】：

您能详细说明一下吗？看来我无法让它工作（使用 WebStorm 10）。请列出所有道具，以便我进行测试:)
他的意思是你添加一个新的运行/调试配置，选择nodejs并将参数“节点解释器”更改为电子二进制文件。例如，在 OSX 上，如果您通过“npm install -g electron-prebuilt”安装了电子，例如“/usr/local/bin/electron”。比您可以启动和调试应用程序。我目前的问题是节点配置以 --debug-brk=[port] 开始，女巫适用于节点但不适用于电子，因为电子需要 --debug=[port] 否则它会在第一行暂停（bit.ly/1XHictg )。调试配置示例：imgur.com/DqPvLzk

【解决方案3】：

我在 IDE 中进行了调试，并为将来做了一些笔记我会放在这里以防它可以帮助某人（甚至是改进）。

调试配置 JetBrains IDE

JetBrains JS 调试仅适用于基于 Chrome 或 Chromium 的网络浏览器。我只使用 Firefox，所以为了让它工作，我安装了适用于 Linux 的 Chromium。

添加或修改$project_root/.erb/configs/webpack.config.renderer.dev.dll.ts
devtool: 'source-map',
mode: 'development',
添加或修改$project_root/tsconfig.json
"inlineSources": true,
"inlineSourceMap": true,
没有这条线也可以工作。添加或修改$project_root/src/main/main.ts
app.commandLine.appendSwitch('remote-debugging-port', '9229')

要在 JetBrains IDE 中进行调试，
首先使用 npm 启动应用程序开始运行配置（屏幕截图）或终端，
然后在 JetBrains IDE 中运行 jsdebug configuration（截图）。

当您运行 JavaScript Debug configuration 时，Chromium 实例会启动，并且调试器应该在您的 IDE 中的断点处停止。

肯定有改进的余地，因为我现在运行 2 个 GUI 实例，1 个以 run npm start 开头，1 个以 run JavaScript Debug configuration 开头，允许我在 IDE 中进行调试。

Electron 应用程序在 localhost:1212 上运行。这个信息是由于没有地址栏，因此在电子“浏览器”中不可见，但是可以在网上的webpack.config.renderer.dev.ts中发现 const port = process.env.PORT || 1212;.

【讨论】：