Отладка электронного рендерера с помощью VSCode

Question

Я попробовал этот документ , но столкнулся с проблемой.

Я прошел руководство по одному и все нормально, пока "1. Обновите содержимое рендерера.js в " in " Раздел отладки процесса визуализации ".
Но когда я пытаюсь " 2. Пока ваш сеанс отладки .... ", VSCode показывает изображение, как показано ниже, и я не могу присоединить отладчик к процессу Electron.

Список в изображении показывает вкладки моего браузера, но нет никакой опции, соответствующей запущенному электронному процессуОсновным отладчиком.
Как мне решить эту проблему?

Answer 1

У меня тоже была эта проблема.Похоже, что отладчику Chrome требуется время, чтобы подключиться к процессу Renderer.К тому времени, когда он подключен, скрипты внутри Renderer уже были выполнены.

Я решил эту проблему, отложив выполнение скрипта внутри renderer.js, например:

async function main() {
  const { ipcRenderer, remote } = require('electron');
  const isDevelopment = require('electron-is-dev');

  console.log(process.env);

  if (isDevelopment) {
    // this is to give Chrome Debugger time to attach to the new window 
    await new Promise(r => setTimeout(r, 1000));
  }

  // breakpoints should work from here on,
  // toggle them with F9 or just use 'debugger'
  debugger;

  // ...
}

main().catch(function (error) {
  console.log(error);
  alert(error);
});

У меня есть настроенная версия из МинимальнаяПриложение Electron , которое решает эту и несколько других проблем, с которыми я столкнулся, когда начинал разработку с Electron.