Electron 主和渲染器进程调试配置

Question

我正在使用那个 repo https://github.com/SimulatedGREG/electron-vue 并尝试像这样设置 VS Code 调试配置

{ //main
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"sourceMaps": true
},
{
"name": "Debug Renderer Process",
"type": "chrome",
"request": "attach",
"url": "http://localhost:9080",
"webRoot": "${workspaceRoot}/src"
}

并收到类似

的消息

Invalid responce {
"description": "node.js instance",
"devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:5858/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e",
"faviconUrl": "https://nodejs.org/static/favicon.ico",
"id": "0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e",
"title": "node",
"type": "node",
"url": "file://",
"webSocketDebuggerUrl": "ws://127.0.0.1:5858/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e"
}

对于主要和 connect ECONNREFUSED 127.0.0.1:9229 用于渲染进程。

我知道 webpack 3 和 webpack-dev-server 2 提供主程序和渲染程序，但找不到调试配置。

使用像chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:5858/6c1d575a-d0f6-4ffa-9465-065ebc3d302c这样的链接使用Chrome调试主进程有效，但想使用VS Code。

我做错了什么？有人可以分享 VS Code 或 WebStorm 的调试配置吗？

Answer 1

所以要弄清楚这真的很痛苦，主要是因为 vue 电子样板对主进程和渲染器进程进行了一些内部管理。第一个挑战是尽可能可靠地附加到子进程（主）。第二个挑战是确保断点在会话和类似的事情中持续存在。这个答案根本不关注渲染器进程，因为你可以在 devtools 控制台中调试它。

将这两个配置放在你的launch.json中，并在package.json的dev脚本中添加--no-lazy来修复断点。如果您只是在寻找解决方案，您可能可以在此处停止阅读。如果它不起作用，请继续阅读。

{
    "type": "node",
    "request": "launch",
    "name": "Electron: Main (npm)",
    "cwd": "${workspaceFolder}",
    "outFiles": ["${workspaceFolder}/**/*.js"],
    "runtimeExecutable": "npm",
    "runtimeArgs": ["run-script", "dev"],
    "outputCapture": "std",
    "smartStep": true,
    "sourceMaps": true,
    "protocol": "inspector",
    "port": 5858,
    "timeout": 20000
},
{
    "name": "Electron: Main (attach)",
    "type": "node",
    "request": "attach",
    "cwd": "${workspaceFolder}",
    "outFiles": ["${workspaceFolder}/**/*.js"],
    "skipFiles": ["init.js"],
    "smartStep": true,
    "sourceMaps": true,
    "protocol": "inspector",
    "port": 5858,
    "timeout": 20000
}

无需额外操作即可执行第一个。它将通过 npm 运行脚本，并使用检查端口 5858 直接附加到子进程。

第二个脚本让您从终端运行npm run dev，然后附加。如果您更习惯使用它，使用它可能会很方便。

现在我将解释为什么我使用了所有设置，以防万一发生变化并且您想知道这是否已过时。

"cwd": "${workspaceFolder}",

如果不这样做，我将无法可靠地运行会话。但有时它仍然有效。

"outFiles": ["${workspaceFolder}/**/*.js"],

没有这个我无法调试任何文件。

"outputCapture": "std",

如果我没有这个集合，我没有从dev-runner.js 得到任何输出。

“smartStep”：真，

当我重新启动会话时（尤其是使用 npm 变体），断点未设置并变黑。这个选项实际上修复了它，但是看着this issue，我怀疑你通常不应该使用这个选项。

“sourceMaps”：真，

如果您看到乱码，您可能需要添加以下内容：

/**
 * Adjust mainConfig for development settings
 */
if (process.env.NODE_ENV !== 'production') {
    mainConfig.devtool = 'source-map' // <- THIS
    mainConfig.plugins.push(
        new webpack.DefinePlugin({
            __static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
        })
    )
}

这个选项有助于解决这个问题。

“协议”：“检查员”，

也可以。旧版不起作用。

“端口”：5858，

这是子进程的端口，由dev-runner.js产生

“超时”：20000

由于我们正在等待子进程完成生成，因此启动和附加可能需要超过 10 秒的时间。我将它设置为 20 秒，但如果你的电脑足够快，你可以随意降低它。 （默认为 10 秒）

前沿软件领域的更多参考资料。

• VS 代码版本：1.21
• 电子版：1.8.7
• 铬：v59
• 节点：8.2.1

Answer 2

您可能需要在带有最新电子二进制文件的 vs 代码中使用新的检查协议。它看起来像

{
   "type":"node",
   "request":"launch",
   "name":"Electron Main",
   "runtimeExecutable":"${workspaceRoot}/node_modules/.bin/electron",

   "args":[
      "${workspaceRoot}/main.js",
      "--remote-debugging-port=9333" //Set debugging port for renderer process
   ],
   "protocol":"inspector" //Specify to use v8 inspector protocol
}

重要的是您指定使用检查而不是旧节点调试的协议。我之前在https://kwonoj.github.io/en/post/multi-target-dbg-electron-vscode/ 写过总结。