VSCode 调试中的顺序启动

Question

鉴于对 this question 的部分回答和解决，我现在有以下启动配置来调试我的 react-redux + electron 应用程序。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Main",
      "program": "${workspaceFolder}/src/main.js",
      "protocol": "inspector",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": [
          "--remote-debugging-port=9229",
          "."
      ],
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      }
    },
    {
        "type": "node",
        "request": "launch",
        "name": "NPM",
        "runtimeExecutable": "npm",
        "runtimeArgs": [
          "run-script",
          "start"
        ],
        "port": 9229
    },
    {
        "type": "chrome",
        "request": "launch",
        "name": "Renderer",
        "url": "https://localhost:3000",
        "webRoot": "${workspaceFolder}/src",
        "runtimeExecutable": "C:/Users/[username]/AppData/Local/Programs/Opera developer/launcher.exe",
        "runtimeArgs": [
          "--remote-debugging-port=9229"
      ],
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "All",
      "configurations": [
        "Main",
        "NPM",
        "Renderer"
      ]
    }
  ]
}

所以它是这样工作的：NPM 配置启动 node.js 服务器，然后Renderer 和Main 分别调试前端部分和后端部分。

但是，当启动复合设置时，它们都会同时执行，https://localhost:3000/ 和选举应用程序都显示空白屏幕，直到服务器完全设置。

目前，一旦服务器启动就重新加载网页和电子客户端是可以的，但我只是好奇是否有办法制作顺序启动命令以使其更加优雅。有什么好主意吗？

Answer 1

我认为您可以通过附加而不是启动来使您的渲染器代码更加优雅。

例如，我在启动主程序时使用了一个复合，然后使用以下内容附加到渲染器（无需重新加载）。

 {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch",
      "cwd": "${workspaceRoot}/src/app",
      "runtimeExecutable": "${workspaceRoot}/src/app/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/src/app/node_modules/.bin/electron.cmd"
      },
      "runtimeArgs": [
        "${workspaceRoot}/src/app",
        "--remote-debugging-port=9222"
      ],
      "console": "integratedTerminal",
      "sourceMaps": true,
      "outFiles": [
        "${workspaceRoot}/src/app/out/**/*.js",
      ],
      "protocol": "inspector",
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Renderer",
      "trace": true,
      "webRoot": "${workspaceRoot}/src/app",
      "sourceMaps": true,
      "port": 9222,
      "timeout": 60000
    },
  ],
  "compounds": [
    {
      "name": "App Main & Renderer",
      "configurations": [
        "Launch App Main",
        "Attach to App Renderer"
      ]
    }
  ]
}