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 TagHTML 标签智能补全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控制台日志ConsoleDOM 结构性能分析Performance内存泄漏Memory提示渲染进程调试几乎与 Chrome 一致因此你可以使用console.log()输出调试信息也能直接使用 Chrome 的快捷键Cmd Option I/Ctrl Shift I打开 DevToolsElectron 主进程调试技巧主进程不是网页而是 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 . --inspect5858然后在 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 应用DevtronElectron 官方调试扩展分析应用内部状态React / Vue DevTools如果用前端框架调试组件状态非常方便用 VS Code 写用 DevTools 看用 launch.json 调用 Builder 打包 —— 这就是一个专业 Electron 开发者的完整工具链。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧