Question

我正在使用Quasar Framework构建电子应用程序。我在使用VS Code调试Electron的主要过程时遇到了一些麻烦。

当我使用quasar dev -m electron启动我的应用程序时，我可以看到调试器正在监听：

Debugger listening on ws://127.0.0.1:5858/d2fa14ad-cc55-42e6-a81b-a7c71e6e5650

然后我使用以下内容创建了一个launch.json配置：

{
    "type": "node",
    "request": "attach",
    "name": "Attach",
    "port": 5858
}

当我单击附加时，我可以看到消息Debugger attached，但是我在主进程文件上设置的所有断点都变成灰色，并显示消息Breakpoint set but not yet bound：

Answer 1

这是使用VS Code或WebStorm调试Quasar Electron App Main Process的方法。

Quasar不会从源代码运行electron-main.js。它在.quasar / electron文件夹中创建一个Webpacked js文件，与src文件没有任何关系。这就是为什么您不能在src文件中设置断点的原因。

文件是.quasar / electron文件夹，不过是您的电子项目的webpack。因此，您需要扩展webpack配置（extendWebpack）并添加源映射以允许您附加调试器。这是所需的配置：

cfg.devtool = ctx.dev ? "#cheap-module-eval-source-map" : "#source-map"

这是一个更完整的示例（仅需要上面的行）：

    electron: {
      bundler: "builder", // 'builder' or 'packager'

      extendWebpack(cfg) {
        cfg.devtool = ctx.dev ? "#cheap-module-eval-source-map" : "#source-map"
      },
   }

在命令行中运行以指定端口：

quasar dev --debug -m electron -- --remote-debugging-port=9222 --inspect-brk=5858

9222适用于Chrome用户界面 5858用于节点主进程（如果未设置，则为默认值）

将调试器连接到打开的端口，应该很好。您可以使用--inspect-brk = 5858使应用程序停止在主流程的第一行JavaScript，然后附加调试器。有关这些开关的更多信息，请参见： https://www.electronjs.org/docs/tutorial/debugging-main-process

我使用WebStorm进行了这项工作，并且我确信VS Code也可以进行这项工作。

您可以使用端口9222调试Chrome UI。在VS Code中，您可以更改launch.json附加到它：

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Attach to url with files served from ./out",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "<url of the open browser tab to connect to>",
            "webRoot": "${workspaceFolder}/out"
        }
    ]
}

（https://github.com/microsoft/vscode-chrome-debug）

如果您有许多Node模块，则可能需要在调试时将其从Webpack构建中排除。这是排除节点模块（https://www.npmjs.com/package/webpack-node-externals）

的配置

const nodeExternals = require("webpack-node-externals")


    electron: {
  bundler: "builder", // 'builder' or 'packager'
  extendWebpack(cfg) {
    // do something with Electron main process Webpack cfg
    // chainWebpack also available besides this extendWebpack
    cfg.resolve.modules.push(path.resolve(__dirname, "../../node_modules")) // lerna modules
    cfg.devtool = ctx.dev ? "#cheap-module-eval-source-map" : "#source-map"

    // this is externals for electron webpack main chain
    cfg.externals = [
      nodeExternals({
        modulesDir: "../../node_modules",
      }),
    ] // in order to ignore all modules in node_modules folder
  },

}

请注意，“ lerna”设置需要“ ../../”。如果项目旁边有节点模块，则需要从该目录（modulesDir: "node_modules"）中排除它。

Answer 2

我能够通过这种方式为“节点”获得一种“发射”：

        {
            "name": "Debug Main Process",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "program": "${workspaceFolder}/src-electron/electron-main.js",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "windows": {
              "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
            },
            "args" : ["."],
            "outputCapture": "std"
        }

在vscode中选择此选项进行调试并启动调试会话（F5）时，系统也会要求您附加该过程。

，并且您可以看到electron-main.js中的断点是很好的：

无法将调试器附加到Quasar主进程

2 个答案: