Debugging Electron renderer process with VSCode

Question

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?

Answer 1

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.