Electron main 和 renderer 进程调试配置

Question

我正在使用该存储库 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 使用 link 调试主进程，就像 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

您可能需要在带有最新电子二进制文件的 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/ 上写过关于这个的总结。

Answer 2

所以这真的很难弄清楚，主要是因为 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, '\\')}"`
        })
    )
}

此选项对此有所帮助。

"protocol": "inspector",

也可以。旧版不起作用。

"port": 5858,

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

生成

"timeout": 20000

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

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

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

Electron main 和 renderer 进程调试配置

Electron main and renderer process debug configuration

debugging

node.js

webstorm

electron

visual-studio-code