使用VSCode调试Electron渲染器进程

Question

我尝试了this document，但遇到了问题。

我一步一步地完成了指南，直到“ 1为止一切都很好。在 “渲染器过程的调试”中将renderer.js的内容更新为“ ” 部分。
但是当我尝试“ 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);
});

我有a customized version的最小电子应用程序，可以解决此问题以及我开始使用Electron开发时遇到的其他一些问题。