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 用于渲染过程。

我知道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代码。

我做错了什么？有人可以共享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，然后附加。如果您更习惯使用它，可能会方便使用它。

现在我将解释为什么我已经使用了所有设置，万一事情发生变化，你想知道这是否已经过时。

＆＃34; cwd＆＃34;：＆＃34; $ {workspaceFolder}＆＃34;，

如果不这样做，我无法可靠地运行会话。尽管如此，它仍然有效。

＆＃34; outFiles＆＃34;：[＆＃34; $ {workspaceFolder} / ** / * .js＆＃34;]，

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

＆＃34; outputCapture＆＃34;：＆＃34; std＆＃34;，

如果我没有这个设置，我没有从dev-runner.js获得任何输出。

＆＃34; smartStep＆＃34;：true，

当我重新启动会话时（特别是使用npm变体），断点未设置且为黑色。这个选项实际上修复了它，但看了this issue，我怀疑你通常不必使用这个选项。

＆＃34; sourceMaps＆＃34;：true，

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

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

此选项有助于此。

＆＃34; protocol＆＃34;：＆＃34;督察＆＃34;，

也可能。遗产不起作用。

＆＃34; port＆＃34;：5858，

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

生成

＆＃34;超时＆＃34;：20000

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

世界上最先进的软件。

VS Code版本：1.21
电子版：1.8.7
Chromium：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
}

重要的是你指定使用inspect而不是旧节点调试的协议。我刚才在https://kwonoj.github.io/en/post/multi-target-dbg-electron-vscode/撰写了摘要。

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

2 个答案: