Wrong debugging configuration

[stbnps]

Prerequisites

• Using yarn
• Using an up-to-date master branch
• Using latest version of devtools. Check the docs for how to update
• Tried solutions mentioned in #400
• For issue in production release, add devtools output of DEBUG_PROD=true yarn build && yarn start

Expected Behavior

The "Electron: All" launch configuration for VS Code should:

• Spawn a development web server ("Start Webpack Dev" task).
• Spawn Electron with the args: --inspect=5858 and --remote-debugging-port=9223.
• Attach the chrome debugger ("Electron: Renderer" configuration).

Current Behavior

The "Start Webpack Dev" task in .vscode/tasks.json is spawning electron itself, whereas the "Electron: Main" launch configuration in .vscode/launch.json is failing.

"Electron: Main" is failing because the yarn args should be:

"runtimeArgs": ["start:main", "--inspect=5858", "--remote-debugging-port=9223"],

instead of:

"runtimeArgs": ["start:main --inspect=5858 --remote-debugging-port=9223"],

When using "start:main --inspect=5858 --remote-debugging-port=9223", yarn fails because it cannot find a the command "start:main --inspect=5858 --remote-debugging-port=9223" (it is trying to use the whole string as the command name).

Since the "Electron: Main" configuration fails, no electron window should be visible, however an electron window does show up. This is because the following code at .erb/configs/webpack.config.renderer.dev.babel.js:

    before() {
      console.log('Starting Main Process...');
        spawn('npm', ['run', 'start:main'], {
          shell: true,
          env: process.env,
          stdio: 'inherit',
        })
          .on('close', (code) => process.exit(code))
          .on('error', (spawnError) => console.error(spawnError));
    },

Issues #2730 and #2714 may be related.

Steps to Reproduce

1. Launch "Electron: All" configuration

2. Look at the debug console, you will see that the yarn process has finished with an error.

3. If you try to place breakpoints on the renderer side, they won't fire.

Possible Solution (Not obligatory)

1. Use:

"runtimeArgs": ["start:main", "--inspect=5858", "--remote-debugging-port=9223"],

2. Delete:

    before() {
      console.log('Starting Main Process...');
        spawn('npm', ['run', 'start:main'], {
          shell: true,
          env: process.env,
          stdio: 'inherit',
        })
          .on('close', (code) => process.exit(code))
          .on('error', (spawnError) => console.error(spawnError));
    },

Context

I was trying to debug an app and breakpoints were not firing. That's when I went to the debug console and saw that the "Electron: Main" configuration was failing.

Your Environment

• Node version : v12.20.0
• electron-react-boilerplate version or branch : v2.3.0
• Operating System and version : Ubuntu 20.04

[lucahost]

Using the provided solution, I still get errors from Electron: Main telling that electron.app is not defined.
If I run the app via yarn start:main it does work however.

I don't get why the specified action in launch.json behaves different than calling yarn start:main from my cmd.

In the end, if I put conditional access to app -> app?.on I ultimately get the error message "Cannot connect to runtime process, timeout after 15000 ms. (ECONNREFUSED 127.0.0.1:9223)

..\main.dev.ts:161
_electron.app.on('window-all-closed', function () {
              ^

TypeError: Cannot read property 'on' of undefined

[lucahost]

I just found out that changing the "debug.javascript.usePreview": true value to true in the vscode settings file solved the issue for me.

[halsafar]

"I just lost 5 hours of my life on this. I want it back." Haha, thanks for the simple fix.

"Electron: Main" is failing because the yarn args should be:

"runtimeArgs": ["start:main", "--inspect=5858", "--remote-debugging-port=9223"],

instead of:

"runtimeArgs": ["start:main --inspect=5858 --remote-debugging-port=9223"],

Update: Well breakpoints work now but two instances of electron always launch. Using the Electron Main task. First window opens quickly, second window pops open about 10s later.

Had to do both of these. Now Electron Main, Renderer, All tasks work as expected.

Possible Solution (Not obligatory)

1. Use:

"runtimeArgs": ["start:main", "--inspect=5858", "--remote-debugging-port=9223"],

1. Delete:

    before() {
      console.log('Starting Main Process...');
        spawn('npm', ['run', 'start:main'], {
          shell: true,
          env: process.env,
          stdio: 'inherit',
        })
          .on('close', (code) => process.exit(code))
          .on('error', (spawnError) => console.error(spawnError));
    },

[stbnps]

Update: Well breakpoints work now but two instances of electron always launch. Using the Electron Main task. First window opens quickly, second window pops open about 10s later.

@halsafar If you don't delete the before() function, Webpack will be the one launching the main process, not VS Code (VS Code tried, but failed because of the "runtimeArgs" option). If you fix the "runtimeArgs" option, and delete the before() function, it will work as expected.

[guillemsola]

Hi, I was wondering why this has been closed with no solution

I'm on Windows and I was not able to make debug work for until I put this.

"runtimeArgs": ["start:main", "--inspect=5858", "--remote-debugging-port=9223"],

Maybe this is not affecting those who are on Mac?

[stbnps]

@guillemsola It affects Linux (Ubuntu 20.04) users, so I guess it affects Mac users too. I was surprised too when I found out that the issue was closed without solution.

I'm glad my fix worked for you!

[ImAliMoussa]

Thank you, new electron user here and this has solved my issue on Macbook Pro with Big Sur.

[HZSamir]

As this seems to be the default thread to discuss debugging, allow me to add my own two-cent.
The edit mentioned above (the edit to runtimeArgs and commenting before) is no longer enough to run debugging on the latest version 4 of this boilerplate. You need a small additional fix:
In tasks.json file, replace: "endsPattern": "(Compiled successfully|Failed to compile)\\.$"
with "endsPattern": "404s will fallback to"

To explain: the start:renderer task no longer outputs Compiled successfully, and so the task never starts.
Happy holidays to all.

[darkomenx]

Is there anybody to post his webpack config for launching basic Electron app pls ?

[khomin]

The same problem
Nothing is working

[rohitkrishna094]

I am still getting the same error even after June 2022 commit fix. Anyone else facing the problem? Might have to open another issue for this.

[wangjing013]

+1

[tscheney]

What was going on for me was that the renderer debugger was trying to attach before the main process was completely up. When I start the main process and wait until it is completely up and then start the renderer it works.

Ideally you'd try to attach the renderer after the main process comes completely up, but increasing the timeout value in the renderer configuration in the launch.json seems to work around the issue. I imagine that the there may be some consequence of making it arbitrarily large, but using a value of 100000 and 1000000 (I'm assuming that is in milliseconds meaning that would be 100 and 1000 seconds respectively) seems to not affect anything, other than making the remote debugger work.

[Kykim0818]

@tscheney 's comment work for me thanks!