使用 VSCode 调试 Electron 渲染器进程答案

【问题标题】：Debugging Electron renderer process with VSCode使用 VSCode 调试 Electron 渲染器进程
【发布时间】：2019-03-21 13:00:45
【问题描述】：

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

我一一浏览了指南，直到 “1. 将 renderer.js 的内容更新为” “调试渲染器进程” 部分。
但是当我尝试“2。当你的调试会话是......”时，VSCode 显示如下图，我无法将调试器附加到 Electron 进程。

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

【问题讨论】：

标签： javascript debugging google-chrome-extension visual-studio-code electron

【解决方案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);
});

我有 Minimal Electron Application 的 a customized version 解决了这个问题以及我开始使用 Electron 开发时遇到的其他一些问题。

【讨论】：

感谢您的建议@noseratio，该示例对我有用。很抱歉延迟批准您的答案。确实，最后我找不到如何将这种方法应用到我用 react-redux + electron 构建的项目中，尽管我猜应该更改“主要”调试配置。我会尝试一段时间寻找解决方案，或者可能会提出一个新问题。
@K.Makino，很高兴如果它有帮助，还有另一种方法是直接使用 Chrome DevTools 渲染器脚本（而不是在 VSCode 中调试）。
是的，我知道替代方案，但我更喜欢使用 VSCode，因为在调试过程中我可以很容易地指出问题出在哪里。