使用VSCode调试Electron渲染器进程 [英] Debugging Electron renderer process with VSCode

问题描述

我尝试了

解决方案

我也遇到了这个问题。看来，Chrome调试器要花一些时间才能连接到Renderer进程。到连接时，Renderer内部的脚本已经执行。

我已经通过延迟 renderer.js 内部的脚本执行来解决此问题，如下所示：

 异步函数main（）{
 const {ipcRenderer，remote} = require（'electron' ）; 
 const isDevelopment = require（'electron-is-dev'）; 
 
 console.log（process.env）; 
 
 if（isDevelopment）{
 //这是为了让Chrome调试器有时间连接到新窗口
等待新的Promise（r => setTimeout（r，1000） ）; 
} 
 
 //断点应该从这里开始，
 //用F9切换它们，或者只使用'debugger'
调试器； 
 
 // ... 
} 
 
 main（）。catch（function（error）{
 console.log（error）; 
 alert（error）; 
}）; 
  

我有 最小电子应用程序的自定义版本，它解决了此问题以及我开始使用Electron开发时遇到的其他一些问题。

I tried this document, but hit a problem.

I went through the guide one by one and it is all fine until "1. Update the contents of renderer.js to" in "Debugging of the renderer process" section.
But when I try "2. While your debug session is....", VSCode shows the image like below and I cannot attach the debugger to the Electron process.

The list in the image shows the tabs of my browser but there's no option corresponding to the electron process launched by the Main debugger.
How do I solve this issue?

解决方案

I had that problem too. It appears, it takes time for Chrome Debugger to attach to the Renderer process. By the time it is connected the scripts inside Renderer have already been executed.

I've solved this issue by delaying the script execution inside renderer.js, like this:

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);
});

I have a customized version of Minimal Electron Application which solves this and a few other problems I faced when I started developing with Electron.

这篇关于使用VSCode调试Electron渲染器进程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！