🎬 HoRain 云小助手：个人主页
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
目录
⛳️ 推荐
VS Code 必装插件推荐
Chrome DevTools 调试（渲染进程）
启用 DevTools
实例
可以调试的内容
提示
Electron 主进程调试技巧
方法 1：使用 VS Code 内置调试器
方法 2：命令行远程调试
常见调试技巧汇总
进阶工具推荐
Electron 开发工具推荐使用 VS Code，如果你还不熟悉 VS Code 可以参考我们的 VS Code 教程。
VS Code 下载地址：https://code.visualstudio.com/。
VS Code 本身就是用 Electron 构建的，因此它对 Electron 开发有天然的支持优势：
- 内置终端集成
- 强大的调试功能
- 丰富的插件生态
- Git 集成
- IntelliSense 智能提示
- 完全免费且开源
VS Code 必装插件推荐
| 插件名称 | 作用说明 |
|---|---|
| ElectronSnippets | 提供 Electron API 的代码片段和自动补全 |
| Prettier – Code Formatter | 统一代码风格，自动格式化 |
| ESLint | 检查语法错误和风格问题 |
| Debugger for Chrome | 让你在 VS Code 里调试前端渲染进程 |
| Node.js Modules Intellisense | 自动提示 Node.js 模块函数 |
| Path Intellisense | 文件路径智能提示 |
| npm Intellisense | 自动提示 npm 包名 |
| Auto Rename Tag / Auto Close Tag | HTML 标签智能补全 |
| GitLens | 提升 Git 代码版本可视化体验 |
Chrome DevTools 调试（渲染进程）
Electron 的渲染进程其实就是一个Chromium 浏览器页面，
所以你可以像调网页一样，用 Chrome DevTools 直接调试。
启用 DevTools
在main.js中创建窗口时添加：
实例
const win = new BrowserWindow({
width: 800,
height: 600
});
win.loadFile('index.html');
// 打开开发者工具
win.webContents.openDevTools();
可以调试的内容
- HTML / CSS / JS 代码
- 网络请求（Network）
- 控制台日志（Console）
- DOM 结构
- 性能分析（Performance）
- 内存泄漏（Memory）
提示
渲染进程调试几乎与 Chrome 一致，因此：
- 你可以使用
console.log()输出调试信息 - 也能直接使用 Chrome 的快捷键（
Cmd + Option + I/Ctrl + Shift + I）打开 DevTools
Electron 主进程调试技巧
主进程不是网页，而是 Node.js 环境，调试方式与网页不同。
方法 1：使用 VS Code 内置调试器
在项目根目录创建.vscode/launch.json文件。
内容如下（可直接用）：
{ "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}" } ] }然后在
main.js中设置断点，点击调试 ▶️ 即可。
方法 2：命令行远程调试
启动时加上参数：
electron . --inspect=5858
然后在 Chrome 地址栏打开：
chrome://inspect
即可远程连接主进程，像调 Node.js 一样断点调试。
常见调试技巧汇总
| 调试目标 | 工具/方法 | 说明 |
|---|---|---|
| 窗口界面卡顿 | Chrome DevTools → Performance | 分析渲染耗时、JS 执行瓶颈 |
| 窗口闪退 | 在主进程加 try/catch 或使用electron-log日志记录 | 捕获主进程异常 |
| IPC 通信异常 | 在ipcMain/ipcRenderer中加日志 | 调试主从通信 |
| 文件路径错误 | 使用path.join(__dirname, 'xxx') | 避免相对路径问题 |
| 打包调试 | 使用electron-builder --dir先构建目录模式 | 可直接运行调试 |
进阶工具推荐
| 工具 | 用途 |
|---|---|
| Electron Forge | 官方推荐的脚手架工具，快速创建、打包项目 |
| Electron Builder | 功能强大的打包与发布工具 |
| Electron Reload | 文件修改后自动刷新应用 |
| Spectron | 用于自动化测试 Electron 应用 |
| Devtron | Electron 官方调试扩展，分析应用内部状态 |
| React / Vue DevTools | 如果用前端框架，调试组件状态非常方便 |
用 VS Code 写，用 DevTools 看，用 launch.json 调，用 Builder 打包 —— 这就是一个专业 Electron 开发者的完整工具链。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
