VSCode调试Electron

使用vscode来调试electron主进程,实现断点调试、监视变量,跟踪代码执行,极大地提高开发效率。

  1. 在vscode代码编辑器中左侧找到运行或调试

  2. 上方下拉框添加配置

  3. 点击添加配置后,会在根目录的.vscode目录下存在launch.json文件,在文件中进行启动调试环境配置

  4. 点击了添加配置后,应该会自动打开.vscode/lauch.json文件,默认会存在一份配置,若运行失败,可以自行配置,顺序不能变:

    json 复制代码
    {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "node-terminal",
                "name": "Electron Main",
                "request": "launch",
                "command": "npm run electron:serve",
                "cwd": "${workspaceFolder}",
            },
        ]
    }

    可以修改command命令,为dev环境下启动electron的命令

    配置完之后点击运行完成启动调试环境:

    启动调试程序后,可以在调试的工具栏操作

通过使用VSCode调试Electron应用,开发者可以更加轻松地管理项目的代码和调试流程。VSCode强大的调试工具和Electron的结合,使得开发跨平台桌面应用程序变得更加直观和高效。无论你是新手还是经验丰富的开发者,VSCode和Electron的组合都是一个强大的工具链,能够帮助你快速构建和发布高质量的应用程序。

相关推荐
军军君0144 分钟前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
xiaoqi9222 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
qq_177767372 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
2603_949462102 小时前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter
wuhen_n2 小时前
JavaScript内存管理与执行上下文
前端·javascript
摇滚侠3 小时前
IDEA 定义返回值快捷键
java·ide·intellij-idea
Hi_kenyon3 小时前
理解vue中的ref
前端·javascript·vue.js
jin1233223 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos
2501_920931704 小时前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
橙露5 小时前
React Hooks 深度解析:从基础使用到自定义 Hooks 的封装技巧
javascript·react.js·ecmascript