json - VSCode调试中的顺序启动

Question

给出了关于this question的部分回答和解决，我现在具有以下启动配置来调试我的react-redux + electronic应用程序。

{
  "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/和选举应用程序都会显示空白屏幕，直到服务器完全设置好为止。

现在，服务器启动后就可以重新加载网页和 Electron 客户端了，但是我很好奇是否有一种方法可以使顺序发布的订单更加优雅。有什么好主意吗？

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"
      ]
    }
  ]
}