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

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

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

VSCode调试中的顺序启动

1 个答案: