node.js - 无法将调试器附加到 Quasar 主进程

Question

我正在使用 Quasar Framework 构建 Electron 应用程序.
我在使用 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 文件夹只不过是您的 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 用于 Node 主进程(如果你没有设置它是默认的)
将您的调试器附加到打开的端口，它应该很好。您可以使用 --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 构建中排除。这是排除 Node 模块的配置( 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 设置需要“../../”。如果项目旁边有 Node 模块，则需要将其从该目录中排除( modulesDir: "node_modules" )。