How to debug electron renderer in WebStorm

[lionelhorn]

Describe the bug

Hello,

I've seen #19 but it's related to debugging the main process.

I'm trying to debug the renderer process from webstorm.

I've used pnpm create @quick-start/electron to scaffold my project.
I managed to set breakpoint in the node side of the application and it works properly from within webstorm with the following configuration.

For instance on

But i'm not able to get breakpoints to break on for instance.

How can it be configured?

Electron-Vite Version

1.0.17

Electron Version

21.3.3

Vite Version

4.0.4

Validations

• Follow the Code of Conduct.
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alex8088]

@lionelhorn
Renderer process debugging is currently not supported, but a solution has been found and will be supported in the next version. It won't take long.

[alex8088]

new ver 1.0.20 is out! check out https://evite.netlify.app/guide/debugging.html#webstorm

[vacnex]

@alex8088
Just see new launch.json, if i have sub folder in renderer so i need create new config with diff port and path to view for new render process, then put new one to configurations in compound?
correct me if i wrong

[alex8088]

Usually specifying the root of the renderer process code is fine.

[alex8088]

webstorm-electron-vite-debugging.mp4