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的组合都是一个强大的工具链,能够帮助你快速构建和发布高质量的应用程序。

相关推荐
谢尔登30 分钟前
【Node.js】Koa2 整合接口文档
node.js
daqinzl30 分钟前
Electron工具Electron Fiddle
electron·fiddle
弄不死的强仔33 分钟前
可被electron等调用的Qt截图-录屏工具【源码开放】
前端·javascript·qt·electron·贴图·qt5
PegasusYu34 分钟前
Electron使用WebAassembly实现CRC-8 MAXIM校验
electron·webassembly·crc·crc校验·crc8·crc-8·maxim
霸王蟹1 小时前
el-table组件样式如何二次修改?
前端·javascript·vue.js·笔记·学习·前端框架
泪不是Web妳而流2 小时前
【HTML入门】Sublime Text 4与 Phpstorm
网络·经验分享·编辑器·html·学习方法·sublime text·phpstorm
struggle20252 小时前
helm-dashboard为Helm设计的缺失用户界面 - 可视化您的发布,它提供了一种基于UI的方式来查看已安装的Helm图表
开发语言·ui·计算机视觉·编辑器·知识图谱
涛ing7 小时前
32. C 语言 安全函数( _s 尾缀)
linux·c语言·c++·vscode·算法·安全·vim
十八朵郁金香7 小时前
【VUE案例练习】前端vue2+element-ui,后端nodo+express实现‘‘文件上传/删除‘‘功能
前端·javascript·vue.js
LCG元8 小时前
Vue.js组件开发-实现全屏图片文字缩放切换特效
前端·javascript·vue.js