Debugging

electron-vite supports debugging both the main process and the renderer process code.

TIP

When you customize the build output directory via the --outDir CLI argument, the debugger configuration should also add this argument. But this is not needed when customizing via build.outDir of the configuration file.

VSCode

Add a file .vscode/launch.json with the following configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
      },
      "runtimeArgs": ["--sourcemap"],
      "env": {
        "REMOTE_DEBUGGING_PORT": "9222"
      }
    },
    {
      "name": "Debug Renderer Process",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}/src/renderer",
      "timeout": 60000,
      "presentation": {
        "hidden": true
      }
    }
  ],
  "compounds": [
    {
      "name": "Debug All",
      "configurations": ["Debug Main Process", "Debug Renderer Process"],
      "presentation": {
        "order": 1
      }
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
      },
      "runtimeArgs": ["--sourcemap"],
      "env": {
        "REMOTE_DEBUGGING_PORT": "9222"
      }
    },
    {
      "name": "Debug Renderer Process",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}/src/renderer",
      "timeout": 60000,
      "presentation": {
        "hidden": true
      }
    }
  ],
  "compounds": [
    {
      "name": "Debug All",
      "configurations": ["Debug Main Process", "Debug Renderer Process"],
      "presentation": {
        "order": 1
      }
    }
  ]
}

Then set some breakpoints in (main process or renderer process) source code. And go to the Debug view and ensure Debug All is selected. You can then press F5 to start debugging.

NOTE

You can also choose Debug Main Process to only debug the main process. Since renderer debugging can only be attached, so it is not possible to debug renderer alone.

WebStorm

Create a Npm run configuration. Use the following settings for main process debugging:

Setting	Value
Command	run
Scripts	dev
Arguments	-- --sourcemap --remote-debugging-port=9222

Also Create a Attach to Node.js/Chrome run configuration. Use the following settings for renderer process debugging:

Setting	Value
Host	localhost
Port	9222

Then run these configuration in debug mode.

V8 Inspector, e.g. Chrome DevTools

electron-vite also supports debugging without IDEs. Use one of the following commands to launch electron-vite.

# Electron will listen for V8 inspector.
electron-vite --inspect --sourcemap

# Like --inspect but pauses execution on the first line of JavaScript.
electron-vite --inspect-brk --sourcemap

# Electron will listen for V8 inspector.
electron-vite --inspect --sourcemap

# Like --inspect but pauses execution on the first line of JavaScript.
electron-vite --inspect-brk --sourcemap

Once electron-vite starts, you can use Chrome DevTools for this by opening chrome://inspect on browser and connecting to V8 inspector.

NOTE

If you want to debug the source code instead of the bundled code, you should append the --sourcemap option.