如何調試電子偽反應打字稿的渲染過程？

Question

我已經使用電子偽造基於react-typescript模板生成了一個應用程序。 我已經為該應用程序編寫了一些vscode調試配置。 但是我只能調試Main進程，Renderer丟失了。 我已經安裝了chrome擴展調試器，並在之前使用它。 我想知道配置中缺少什么？

    {
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron: Main",
            "protocol": "inspector",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-win",
            "runtimeArgs": [
                "--remote-debugging-port=9223",
                "."
            ],
            "windows": {
                "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-win.cmd"
            }
        },
        {
            "name": "Electron: Renderer",
            "type": "chrome",
            "request": "attach",
            "port": 9223,
            "webRoot": "${workspaceFolder}",
            "timeout": 30000
        }
    ],
    "compounds": [
        {
            "name": "Electron: All",
            "configurations": [
                "Electron: Main",
                "Electron: Renderer"
            ]
        }
    ]
}

Answer 1

復制您的launch.json ，然后編寫一些代碼並設置斷點。 測試代碼位於app.tsx的末尾 ：

setTimeout(() => {
    let x = 0;            //break point here
    console.log(x);
}, 3000);

斷點工作正常。

我在launch.json中進行的另一個更改是：

"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-win",
"runtimeArgs": [
    ".",  //swap this line and the next line
    "--remote-debugging-port=9223"
]

Answer 2

我知道這是事實，但我想回答，以防其他人像今天一樣整天都在為這個問題而苦苦掙扎。

從matsu的博客中閱讀了關鍵信息后：

轉到main.js並注釋掉這一行：

mainWindow.webContents.openDevTools（）

遠程調試不適用於多個DevTools客戶端。 我們將在VS Code中使用調試器，而不是Electron的DevTools。

-

某些（全部？）電子偽造模板在啟動時會打開Chrome開發工具。 Chrome / Electron的局限性在於，僅支持與任何類型的調試器的一個連接（在此處的MSFT響應中進行了確認）。 我們只需要對此行進行注釋即可。

在您的main.js（或index.ts或其他）中：

 // Open the DevTools.
  if (isDevMode) {
    await installExtension(REACT_DEVELOPER_TOOLS);
    //mainWindow.webContents.openDevTools(); <--- comment this out
  }