debugging.md

Debugging

In Electron apps, the main and renderer processes have different debugging mechanisms:

• Renderer processes can be debugged using Chromium DevTools.
• The main process can be debugged via the --inspect and --inspect-brk command line flags.

This guide goes over Forge-specific ways of debugging the main process through the command line or with a code editor.

{% hint style="info" %} Each section in this guide assumes your package.json has a "start": "electron-forge start" script. {% endhint %}

For more general information on debugging Electron apps, see the main Electron docs on Application Debugging.

Debugging on the command line

You can specify the --inspect-electron flag when running electron-forge start. Internally, this will activate the Electron --inspectflag, and the main process will listen for a debugging client on port 5858.

npm run start -- --inspect-electron

Once your app is active, open chrome://inspect in any Chromium-based browser to attach a debugger to the main process of your app.

{% hint style="info" %} To add a breakpoint at the first line of execution when debugging, you can use Forge's --inspect-brk-electron flag instead. {% endhint %}

Debugging with VS Code

To debug the main process through VS Code, add the following Node.js launch configuration:

{% code title=".vscode/launch.json" %}

{
  "configurations": [
    {
      "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": [
        "foo",
        "bar"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal"
    }
  ]
}

{% endcode %}

Once this configuration is added, launch the app via VS Code's Run and Debug view to start debugging.

Debugging with WebStorm or Other Jetbrains IDEs

1. Access the Run > Debug... menu and select the Edit Configurations... option to open the Run/Debug Configurations window.
2. Click on the Add new configuration button (the + icon) in the upper-left corner and select the npm template.
3. In the Scripts dropdown menu, select start.
4. Click on Debug to start debugging your app.