Vite template - code editor debugger can't hit breakpoints

[lastonpl]

Pre-flight checklist

• [X] I have read the contribution documentation for this project.
• [X] I agree to follow the code of conduct that this project uses.
• [X] I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

6.4.2

Electron version

27.0.3

Operating system

Windows 11

Last known working Electron Forge version

No response

Expected behavior

Hitting a breakpoint when a debugger is attached. Just like it works in a webpack configuration.

Actual behavior

In app created with vite template (w/wo typescript) the debugger does not stop at breakpoints. Tested in vscode and webstorm. Of course, debugger configuration according to https://www.electronforge.io/advanced/debugging.

Steps to reproduce

Create a new app using a Vite or Vite + TypeScript template . Create debugger configuration in vscode (https://www.electronforge.io/advanced/debugging). Add breakpoint to a line in main.js/main.ts file. Start debugger.

Additional information

No response

[ReevMich]

same here, @lastonpl have you solved this?

[xhc-code]

I have the same problem.

I still have a doubt, because are there any similarities between the two commands electron-forge start and electron.? Why are parameters supported by electron . but not supported by parameters such as electron-forge start --no-sandbox?

There is also the electron. startup method that can enter the breakpoint, but the electron-forge start method does not enter any endpoint. Why is this?

[john-yick]

Any way to resolve this? I have also hit this issue following the instructions from the Electron-forge documentation https://www.electronforge.io/templates/vite I have node version 20 installed.

[shenlian-sc]

I am also facing this issue. Is there any solution? Or it is not possible to hit the breakpoint in the main flow when the vite is used?

[john-yick]

I am also facing this issue. Is there any solution? Or it is not possible to hit the breakpoint in the main flow when the vite is used?

I got it to work in the end by NOT using electron forge and instead doing the setup manually. I have it working now with electron / vite / vue / typescript

Key thing when setting it up manually was to follow the instructions from here: https://electron-vite.org/

Debugging works as expected on the main and the renderer. I can even put breakpoints in VSCode for the renderer and it will stop as expected.

These are my dependencies:

"dependencies": {
    "@electron-toolkit/preload": "^2.0.0",
    "@electron-toolkit/utils": "^2.0.0",
    "@headlessui/vue": "^1.7.16",
    "@heroicons/vue": "^2.0.18",
    "chokidar": "^3.5.3",
    "electron-store": "^8.1.0",
    "electron-updater": "^6.1.1",
    "jwt-decode": "^4.0.0",
    "pinia": "^2.1.7",
    "request": "^2.88.2",
    "sqlite": "^5.1.1",
    "sqlite3": "^5.1.6",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@electron-toolkit/eslint-config": "^1.0.1",
    "@electron-toolkit/eslint-config-ts": "^1.0.0",
    "@electron-toolkit/tsconfig": "^1.0.1",
    "@openapitools/openapi-generator-cli": "^2.7.0",
    "@rushstack/eslint-patch": "^1.3.3",
    "@types/node": "^18.17.5",
    "@vitejs/plugin-vue": "^4.3.1",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "autoprefixer": "^10.4.16",
    "electron": "27.1.2",
    "electron-builder": "^24.6.3",
    "electron-vite": "^1.0.27",
    "eslint": "^8.47.0",
    "eslint-plugin-vue": "^9.17.0",
    "less": "^4.2.0",
    "postcss": "^8.4.31",
    "prettier": "^3.0.2",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.1.6",
    "vite": "^4.4.9",
    "vue": "^3.3.4",
    "vue-tsc": "^1.8.8"
  }

[shenlian-sc]

Thanks, @john-yick It works with electron vite. It is really nice!

[lihuifree]

In launch.json add runtimeArg "runtimeArgs": ["--sourcemap"] In vite.config.js add build:{ sourcemap: true }

here is my vite.main.config.mjs

      export default defineConfig({
        build: {
          sourcemap: true,
          rollupOptions: {
            input: 'src/main.js',
          },
        },
      })

.vscode/launch.json

{
  "type": "node",
  "request": "launch",
  "name": "Electron Main",
  "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh",
  "windows": {
    "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.cmd"
  },
  // runtimeArgs will be passed directly to your Electron application
  "runtimeArgs": ["--sourcemap"],
  "cwd": "${workspaceFolder}",
  "console": "integratedTerminal"
}

`

[boldt]

sourcemap: true,

This is the important line!

"runtimeArgs": ["--sourcemap"],

This is not required.

[orange-pig]

This is a very important point missing from the official documentation. They assume that everyone uses JavaScript. If you use typescript, the main process debugging must generate a map file under .vite\build\ to allow the debugger to locate the breakpoint, so configure vite to generate sourcemap.

In vite.config.js add build:{ sourcemap: true }

@lihuifree You are an insightful person

[laa-1]

The solutions mentioned by several previous commenters are effective. In vite.main.config.mjs

import { defineConfig } from 'vite';

// https://vitejs.dev/config
export default defineConfig({});

modify to

import { defineConfig } from 'vite'

// https://vitejs.dev/config
export default defineConfig({
    build: {
        sourcemap: true,
    },
})

After that, you can use breakpoints normally in the code of the main process.

[matthewkeating]

I have the main process working but I cannot debug the renderer process. I'm new to vite and expect I'm missing something obvious. Any help would be greatly appreciated.

I've tried vite.renderer.config.mjs empty:

export default defineConfig({});

as well as with

export default defineConfig({
  build: {
    sourcemap: true,
  },
})

My launch.json is as follows:

{
      "name": "Debug Renderer Process",
      "port": 5173,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}",
      "timeout": 8000,
}

The error I am getting is as follows:

[matthewkeating]

Update from my post above:

For anyone else who might be having this problem, the configuration (in the launch.json) that seems to be working for me is as follows:

{
  "name": "Debug Renderer Process",
  "type": "chrome",
  "request": "launch",
  "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh",
  "runtimeArgs": [
    "--remote-debugging-port=5173"
  ],
  "webRoot": "${workspaceFolder}"
}

[an78mK89fy]

Thank you. Finally, you don't have to use console.log for debugging lol