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 进程和 渲染进程。

我知道 main 和 renderer proc 都由提供服务webpack 3，webpack-dev-server 2但找不到调试配置。

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

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

Answer 1

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

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

{
    "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 变体）时，断点未设置且为黑色。这个选项实际上修复了它，但是看着这个问题，我怀疑你通常不应该使用这个选项。

"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, '\\\\')}"`
        })
    )
}

此选项对此有所帮助。

"protocol": "检查员",

不妨。遗产不起作用。

“端口”：5858，

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

“超时”：20000

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

前沿软件领域的进一步参考。

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