如何使用IntelliJ或WebStorm调试Electron应用程序？

Question

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

我知道有一种标准方式来调试Electron应用程序，但是这种方法是在我的IDE外完成的。

我尝试创建一个新的“Node.js”“运行/调试配置”，其中包括：

• Node解释器：<path to node>
• 工作目录：<path to my application root folder>
• JavaScript文件：node_modules/.bin/electron
• 应用程序参数：.

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

- Anthony O.

Answer 1

这是我如何设置的，它非常有效。然后我只需在WebStorm中放置我的断点，并且它就会工作。

在WebStorm中创建一个新的运行时配置，看起来像这样。

- frosty

---

我有一个类似的设置，可以运行，但调试不起作用。 - Graham Wheeler

和 @GrahamWheeler 一样。有人找到解决方案了吗？ - CamHart

Answer 2

尝试通过node_modules中的electron可执行文件更改您的节点解释器。 对我来说，它似乎运行良好 ;)

- HollyPony

---

你能否详细说明一下？似乎我无法使其工作（使用WebStorm 10）。请列出所有的属性，以便我进行测试 :) - Andrey Popov

他的意思是，您需要添加一个新的运行/调试配置，选择nodejs，并将参数“node interpreter”更改为electron二进制文件。例如，在OSX上，如果您通过“npm install -g electron-prebuilt”安装了electron，则应该使用“/usr/local/bin/electron”。然后，您可以启动和调试应用程序。目前我的问题是，节点配置以--debug-brk = [port]开始，这适用于节点，但不适用于electron，因为electron需要--debug = [port]，否则它会停在第一行（http://bit.ly/1XHictg）。调试配置示例：https://imgur.com/DqPvLzk - nhu

Answer 3

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

JetBrains IDE调试配置

这些说明适用于GitHub上的electron-react-boilerplate代码库

JetBrains JS调试仅适用于基于Chrome或Chromium的Web浏览器。 我只使用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配置

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

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

肯定还有改进的空间，因为我现在运行了2个GUI实例，一个是使用run npm start启动的，另一个是使用run JavaScript Debug configuration启动的，它允许我在IDE中进行调试。

截图

链接

WebStorm调试JetBrains文档

JetBrains 2016调试教程

注意事项

Electron应用正在localhost:1212上运行。这个信息在电子"浏览器"中不可见，因为没有地址栏，但可以在webpack.config.renderer.dev.ts文件的const port = process.env.PORT || 1212;代码行中发现。

- progonkpa