Как отладить процесс рендеринга электронагревательной реакции-машинописи?

Question

Я использовал электронную кузницу, чтобы сгенерировать базу приложений по шаблону реагирующего текста.Я написал несколько конфигов отладки vscode для этого приложения.Но я только мог отладить основной процесс, 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

Я знаю, что это далеко за фактом, но я хотел ответить, если кто-то еще борется с этой проблемой, как я был весь день сегодня.

После прочтения ключевой информации из Блог matsu :

Перейдите в main.js и закомментируйте эту строку:

mainWindow.webContents.openDevTools ()

Удаленная отладка неработать с несколькими клиентами DevTools.Мы будем использовать отладчик в VS Code вместо DevTools Electron.

-

Некоторые (все?) Шаблоны для электронной кузницы открывают инструменты Chrome dev при запуске.Ограничением Chrome / Electron является то, что поддерживается только одно соединение с отладчиком любого вида (подтверждено в ответе от MSFT здесь ).Нам просто нужно прокомментировать эту строку.

В вашем main.js (или index.ts или что-то еще):

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

Answer 2

Скопировал ваш launch.json , затем напишите некоторый код и установите точку останова.Тестовый код помещается в конце app.tsx :

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

Точка останова работает нормально.

Еще одно изменение, которое я сделал при запуске .json :

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