VSCode调试Electron

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

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

    在这里插入图片描述

  2. 上方下拉框添加配置

    在这里插入图片描述

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

    在这里插入图片描述

  4. 点击了添加配置后,应该会自动打开.vscode/lauch.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的组合都是一个强大的工具链,能够帮助你快速构建和发布高质量的应用程序。

VSCode Electron是一种使用VSCode作为开发工具和Electron作为应用框架的开发环境。通过VSCode Electron,可以使用VSCode调试功能来开发、运行和调试Electron应用程序。 在使用VSCode运行Electron项目之前,你需要确保已经安装了Node.js、npm以及VSCode本身。接下来,你需要在VSCode中打开你的Electron项目文件夹。 你可以使用以下步骤来启动VSCode Electron项目: 1. 打开VSCode,并点击菜单中的“文件”>“打开文件夹”选项。 2. 在文件浏览器中,选择你的Electron项目文件夹,比如"D:/workspace/test_room/electron_foretaste"。 3. 在VSCode编辑器中,你可以看到项目的目录结构,包括index.html、package.json和main.js等文件。 4. 确保你已经在全局安装了Electron,你可以运行以下命令进行全局安装:npm install -g electron。 5. 接下来,你可以点击VSCode调试按钮,选择“启动调试”或按下F5键来运行你的Electron项目。 6. 预期情况下,你应该能够看到Electron应用程序的界面在VSCode中启动,如你所期望的那样。 总结起来,通过VSCode Electron可以方便地使用VSCode作为开发工具来开发、运行和调试Electron应用程序。你只需要打开项目文件夹,确保已经全局安装了Electron,并点击调试按钮或按下F5来启动你的项目。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [VSCode 如何运行调试全局安装的 Electron](https://blog.csdn.net/Likianta/article/details/89048938)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值