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

Question

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

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

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

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

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

Answer 1

这就是我设置它的方式，并且效果很好。 然后我把我的断点放在webstorm中，它就可以了。

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

Answer 2

尝试通过node_modules中的电子可执行文件更改节点解释器。 它似乎对我很好;）

Answer 3

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

调试配置 JetBrains IDE

这些说明适用于 GitHub 上的电子反应样板代码库

JetBrains JS 调试仅适用于基于 Chrome 或 Chromium 的 Web 浏览器。 我只使用 Firefox，所以为此我安装了 Chromium for Linux。

在项目代码中启用调试

• 添加或修改$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 run config（截图）或终端启动应用程序，
然后在 JetBrains IDE 中运行jsdebug configuration （截图）。

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

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

截图

链接

WebStorm 调试 JetBrains 文档

JetBrains 2016 调试教程

笔记

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