使用 VSCode 调试 Electron 渲染器进程

Question

我尝试了这个文档 - 电子调试（主进程和渲染器进程） - 但遇到了问题。

我一一浏览了指南，一切都很好，直到“1.将renderer.js的内容更新为“渲染器进程的调试”部分中的“”。
但是当我尝试 “2.虽然您的调试会话是...”，VSCode 显示如下图所示的图像，并且我无法将调试器附加到 Electron 进程。

图像中的列表显示了我的浏览器的选项卡，但没有与主调试器启动的电子进程相对应的选项。
我该如何解决这个问题？

Answer 1

我也遇到这个问题了。看来，Chrome 调试器需要时间才能附加到渲染器进程。当它连接时，渲染器内的脚本已经被执行。

我通过延迟

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 开发时遇到的一些其他问题。