YouTip

Electron development tools recommend using VS Code. If you are not familiar with VS Code, you can refer to our (#).\n\nVS Code download address: [https://code.visualstudio.com/](https://code.visualstudio.com/).\n\nVS Code itself is built with Electron, so it has a natural advantage in supporting Electron development:\n\n* Built-in terminal integration\n* Powerful debugging features\n* Rich plugin ecosystem\n* Git integration\n* IntelliSense smart hints\n* Completely free and open source\n\n### Recommended Must-Have VS Code Plugins\n\n| Plugin Name | Description |\n| --- | --- |\n| **Electron** Snippets | Provides code snippets and auto-completion for the Electron API |\n| **Prettier – Code Formatter** | Unifies code style, automatically formats |\n| **ESLint** | Checks syntax errors and style issues |\n| **Debugger for Chrome** | Lets you debug the frontend rendering process in VS Code |\n| **Node.js Modules Intellisense** | Auto-completes Node.js module functions |\n| **Path Intellisense** | Smart hints for file paths |\n| **npm Intellisense** | Auto-completes npm package names |\n| **Auto Rename Tag / Auto Close Tag** | Smart completion for HTML tags |\n| **GitLens** | Enhances Git version control visualization experience |\n\n* * *\n\n## Chrome DevTools Debugging (Rendering Process)\n\nElectron's rendering process is essentially a **Chromium browser page**,\n\nso you can debug it directly with Chrome DevTools just like debugging a webpage.\n\n### Enabling DevTools\n\nAdd the following when creating the window in `main.js`:\n\n## Instance\n\nconst win =new BrowserWindow({\n\n width:800,\n\n height:600\n\n});\n\n win.loadFile('index.html');\n\n// Open developer tools\n\n win.webContents.openDevTools();\n\n### Debuggable Content\n\n* HTML / CSS / JS code\n* Network requests (Network)\n* Console logs (Console)\n* DOM structure\n* Performance analysis (Performance)\n* Memory leaks (Memory)\n\n### Tips\n\nRendering process debugging is almost identical to Chrome, therefore:\n\n* You can use `console.log()` to output debug information\n* You can also directly use Chrome's keyboard shortcuts (`Cmd + Option + I` / `Ctrl + Shift + I`) to open DevTools\n\n* * *\n\n## Electron Main Process Debugging Tips\n\nThe main process is not a webpage, but a Node.js environment, so the debugging method is different from webpages.\n\n### Method 1: Use VS Code's Built-in Debugger\n\nCreate a `.vscode/launch.json` file in the project root directory.\n\nThe content is as follows (can be used directly):\n\n{ "version": "0.2.0", "configurations": [ { "name": "Electron Main Process Debugging", "type": "node", "request": "launch", "program": "${workspaceFolder}/node_modules/electron/dist/electron.js", "args": ["."], "outputCapture": "std", "runtimeExecutable": null, "cwd": "${workspaceFolder}" } ]}\n> Then set a breakpoint in `main.js` and click debug ▶️ to start.\n\n### Method 2: Command Line Remote Debugging\n\nAdd parameters when starting:\n\nelectron . --inspect=5858\nThen open in the Chrome address bar:\n\nchrome://inspect\nThis will allow you to remotely connect to the main process and debug with breakpoints just like debugging Node.js.\n\n* * *\n\n## Common Debugging Tips Summary\n\n| Debugging Target | Tool/Method | Description |\n| --- | --- | --- |\n| Window interface lag | Chrome DevTools → Performance | Analyze rendering time, JS execution bottlenecks |\n| Window crash | Add try/catch in the main process or use `electron-log` for logging | Catch main process exceptions |\n| IPC communication exception | Add logs in `ipcMain` / `ipcRenderer` | Debug main and renderer communication |\n| File path error | Use `path.join(__dirname, 'xxx')` | Avoid relative path issues |\n| Packaging debugging | Use `electron-builder --dir` to build in directory mode first | Can be run and debugged directly |\n\n* * *\n\n## Advanced Tool Recommendations\n\n| Tool | Purpose |\n| --- | --- |\n| **Electron Forge** | Officially recommended scaffolding tool, quickly create and package projects |\n| **Electron Builder** | Powerful packaging and publishing tool |\n| **Electron Reload** | Automatically refresh the application after file modifications |\n| **Spectron** | For automated testing of Electron applications |\n| **Devtron** | Official Electron debugging extension, analyzes application internal state |\n| **React / Vue DevTools** | If using frontend frameworks, very convenient for debugging component states |\n\n> Write with VS Code, inspect with DevTools, debug with launch.json, package with Builder —— this is the complete toolchain of a professional Electron developer.