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

Posted 2023-04-18

【中文标题】如何使用 IntelliJ 或 WebStorm 调试电子应用程序？

【英文标题】：How to debug electron applications with IntelliJ or WebStorm?

【发布时间】：2015-09-02 08:46:18

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

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

【讨论】：

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

与@GrahamWheeler 相同。有人找到解决方案了吗？

【参考方案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

这些指令适用于代码库 electron-react-boilerplate on GitHub

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

在项目代码中启用调试

添加或修改$project_root/.erb/configs/webpack.config.renderer.dev.dll.tsdevtool: 'source-map',mode: 'development',

添加或修改$project_root/tsconfig.json"inlineSources": true,"inlineSourceMap": true,

没有这条线也可以工作。添加或修改$project_root/src/main/main.tsapp.commandLine.appendSwitch('remote-debugging-port', '9229')

JetBrains IDE 配置

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

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

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

截图

链接

WebStorm debugging JetBrains docs

JetBrains 2016 debugging tutorial

注意事项

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