javascript - Debugging Electron renderer process with VSCode - Stack Overflow

admin管理员组

文章数量:1393052

I tried this document -- Electron debugging (main and renderer process) -- 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 tried this document -- Electron debugging (main and renderer process) -- 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?

• javascript
• debugging
• google-chrome-extension
• visual-studio-code
• electron

Share Improve this question Follow edited Dec 30, 2023 at 17:24 ChrisW 56.2k1414 gold badges123123 silver badges234234 bronze badges asked Oct 16, 2018 at 22:31 kemakinokemakino 1,12211 gold badge1414 silver badges3838 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

I solved this problem by letting the Renderer wait untill the main is ready.

So adding this into your main.js:

// ...
mainWindow.webContents.on('did-finish-load', () => {
  mainWindow.webContents.send('main-process-loaded');
});
// ...

And this into your renders index.js:

correctly
ipcRenderer.on('main-process-loaded', () => {
  root.render(<App />);
});

For whom still face that problem and don't want to change the code, you can edit launch.json at the render section and increase the timeout :

{
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "webRoot": "${workspaceFolder}",
      "timeout": <increased-timeout>
}

本文标签： javascriptDebugging Electron renderer process with VSCodeStack Overflow