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

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 主进程的方法。

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 UI 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 中的断点很好：