Electron development tools

For Electron development tools, VS Code is recommended. If you are not familiar with VS Code, you can refer to ourVS Code tutorial。

VS Code download URL:https://code.visualstudio.com/。

VS Code itself is built with Electron, so it has a natural advantage in supporting Electron development:

  • Built-in terminal integration
  • Powerful debugging features
  • Rich plugin ecosystem
  • Git Integration
  • IntelliSense smart suggestions
  • Completely free and open source

VS Code must-have plugin recommendations

Plugin Name Function Description
Electron Snippets Provides code snippets and auto-completion for Electron APIs
Prettier – Code Formatter Unify code style, auto-format
ESLint Check syntax errors and style issues
Debugger for Chrome Lets you debug the frontend renderer process in VS Code
Node.js Modules Intellisense Automatically prompts Node.js module functions
Path Intellisense Intelligent file path suggestions
npm Intellisense Automatically suggest npm package names
Auto Rename Tag / Auto Close Tag HTML tag smart completion
GitLens Enhances the Git code version visualization experience

Chrome DevTools Debugging (Renderer Process)

Electron's renderer process is actually aChromium browser page，
So you can debug it directly with Chrome DevTools, just like debugging a web page.

Enable DevTools

Inmain.jsWhen creating a window, add:

Example

const win = new BrowserWindow({
  width: 800,
  height: 600
});
win.loadFile('index.html');

// Open DevTools
win.webContents.openDevTools();

What can be debugged

  • HTML / CSS / JS code
  • Network requests (Network)
  • Console logs (Console)
  • DOM Structure
  • Performance analysis (Performance)
  • Memory leaks (Memory)

Hint

Renderer process debugging is almost identical to Chrome, therefore:

  • You can useconsole.log()Output debugging information
  • You can also directly use Chrome's keyboard shortcuts (Cmd + Option + I / Ctrl + Shift + IOpen DevTools

Electron main process debugging tips

The main process is not a web page, but a Node.js environment, so the debugging approach differs from web pages.

Method 1: Use VS Code's built-in debugger

Create in the project root directory.vscode/launch.jsonFile.

The content is as follows (can be used directly):

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron 主进程调试",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/electron/dist/electron.js",
      "args": ["."],
      "outputCapture": "std",
      "runtimeExecutable": null,
      "cwd": "${workspaceFolder}"
    }
  ]
}

then inmain.jsSet breakpoints in it, then click Debug ▶️.

Method 2: Command-line remote debugging

Add parameters at startup:

electron . --inspect=5858

Then open in Chrome's address bar:

chrome://inspect

You can remotely connect to the main process and debug with breakpoints just like debugging Node.js.

Summary of common debugging tips

Debug Target Tools/Methods Description
Window interface lag Chrome DevTools → Performance Analyze rendering time and JS execution bottlenecks
Window Crashes Add try/catch in the main process or useelectron-logLogging Capture main process exceptions
IPC communication errors InipcMain / ipcRendererAdd Logging Debug master-slave communication
File path error Usagepath.join(__dirname, 'xxx') Avoid relative path issues
Package and Debug Usageelectron-builder --dirBuild directory mode first Can be run and debugged directly

Advanced tool recommendations

Tools Purpose
Electron Forge Officially recommended scaffolding tool for quick project creation and packaging
Electron Builder Powerful packaging and publishing tool
Electron Reload Automatically refresh the app after file modifications
Spectron Used for automated testing of Electron applications
Devtron Electron's official debugging extension for analyzing the application's internal state
React / Vue DevTools If you use a frontend framework, debugging component state is very convenient

Write with VS Code, inspect with DevTools, debug with launch.json, and package with Builder — this is the complete toolchain of a professional Electron developer.

other extensions