电子主程序和渲染器过程调试配置 [英] Electron main and renderer process debug configuration
问题描述
我正在使用该仓库 https://github.com/SimulatedGREG/electron-vue
并尝试建立像这样的VS Code调试配置
I'm using that repo https://github.com/SimulatedGREG/electron-vue and trying to set up VS Code debug configurations like this
{ //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
用于渲染过程。
for main and
connect ECONNREFUSED 127.0.0.1:9229
for render processes.
我知道main和renderer proc由 webpack 3 和 webpack-dev-server 2 提供服务，但找不到调试配置。
I know that both main and renderer procs are served by webpack 3 and webpack-dev-server 2 but cannot find debug configurations.
使用Chrome浏览器使用 chrome-devtools：//devtools/bundled/inspector.html？experiments = true& v8only = true& ; ws = 127.0.0.1：5858 / 6c1d575a-d0f6-4ffa-9465-065ebc3d302c 可以运行，但想使用VS代码。
Debugging main process using Chrome using link like chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:5858/6c1d575a-d0f6-4ffa-9465-065ebc3d302c works but want to use VS Code.
什么是我做错了吗？有人可以共享VS Code或WebStorm的调试配置吗？
What am I doing wrong? Can somebody share debug configurations for VS Code or WebStorm?
推荐答案
所以这真的很麻烦，主要是因为vue电子样板对主要和渲染过程进行了一些内部管理。第一个挑战是尽可能可靠地附加到子进程（主进程）。第二个挑战是确保断点在各个会话之间保持不变，并且诸如此类。这个答案根本不集中在渲染器过程上，因为您可以在devtools控制台中对其进行调试。
So this was a real pain to figure out, mainly because the vue electron boilerplate does some in-house management of the main and renderer process. The first challenge is to attach to the child process (main) as reliably as possible. The second challenge is to make sure breakpoints persist across sessions and things like that. This answer doesn't focus on the renderer process at all, because you can just debug that in the devtools console.
将这两个配置放入您的 launch.json ，然后将-no-lazy 添加到 dev 脚本中 package.json 修复断点。如果您只是在寻找解决方案，则可以在这里停止阅读。如果没有用，请继续阅读。
Put these two configurations in your launch.json, and add --no-lazy to the dev script in package.json to fix breakpoints. If you're just looking for the solution, you can probably stop reading here. If it didn't work, keep on reading.
{
"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附加到子进程。
The first one can be executed with no additional actions needed. It will run the script via npm, and attach directly to the sub process with inspect port 5858.
第二个脚本使您可以运行 npm run dev ，然后附加。
The second script lets you run npm run dev from a terminal, and then attach. It may be convenient to use this one, if you're more used to it.
现在，我将解释为什么我使用了所有设置，以防万一情况有所变化，并且使用起来更方便。您想知道这是否已过时。
Now I will explain why I have used all the settings, in case things change and you're wondering if this is outdated.
如果不这样做，我将无法可靠地运行会话。
I could not reliably run the session without doing this. It still worked sometimes though.
没有此功能，我无法调试任何文件。
I could not debug any files without this on.
如果我没有此设置，我不会从 dev-runner.js 得到任何输出。
I did not get any output from dev-runner.js if I didn't have this set.
当我重新启动会话时（尤其是使用npm变体），断点未设置且变黑。该选项实际上已修复它，但看起来是此问题 ，我怀疑您通常不应该使用此选项。
When I restarted the session (especially using the npm variant), the breakpoints got unset and black. This option actually fixed it, but looking an this issue, I suspect you shouldn't normally have to use this option.
如果看到乱码，则可能需要添加以下内容：
If you're seeing gibberish code, you may want to add the following:
/**
* 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, '\\\\')}"`
})
)
}
此选项对此有所帮助。
也可能。传统不起作用。
Might as well. Legacy doesn't work.
这是子进程的端口，由 dev-runner.js
This is the port of the child process, spawned by dev-runner.js
由于我们正在等待子进程完成生成，因此启动然后附加可能需要10秒钟以上的时间。我将其设置为20秒，但是如果您的PC足够快，则可以随意降低它。 （默认值为10s）。
Since we're waiting for a child process to finish spawning, it may take longer than 10 seconds to launch and then attach. I set it to 20 seconds, but you are free to lower it if your PC is fast enough. (default is 10s)
前沿软件世界中的其他参考。
Further references in the world of bleeding edge software.
- VS代码版本：1.21
- 电子版本：1.8.7
- 铬：v59
- 节点：8.2.1
- VS Code version: 1.21
- Electron version: 1.8.7
- Chromium: v59
- Node: 8.2.1
这篇关于电子主程序和渲染器过程调试配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
