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

相关推荐
一路向北he4 小时前
trae或者vscode定义了文件,但是文件不亮是灰的
ide·vscode·编辑器
Mr_Mao10 小时前
告别选型困难!集 VueUse、ahooks、Mantine 于一身:286 个 Hook 的 ReaUse 来了
前端·javascript·react.js
默_笙11 小时前
🚙 一条腿走路会摔:ES 关键词检索、混合召回与 ReRank 裁判
前端·javascript
dsyyyyy110111 小时前
Vue 3 Watch 监视完全指南
前端·javascript·vue.js
bro_Java66613 小时前
《栈与队列:数据结构的“双生花”》
java·数据结构·编辑器
u01110267513 小时前
Vue 3 实现图片裁剪框:拖动、缩放与固定宽高比
前端·javascript·vue.js
0nirvana014 小时前
从普通 script 到 ESM:一文搞懂 JavaScript 模块、IIFE 和 window
javascript
wshzd15 小时前
LLM之Agent(104)|DeepSeek-Harness(十三)ReactLoopAgent 总览:kick → turn → step
开发语言·前端·javascript
u01110267516 小时前
网页图片编辑器如何添加文字:字体、换行与导出一致性
图像处理·人工智能·ai作画·编辑器
web打印社区16 小时前
远程打印:WebSocket 与 HTTP 轮询怎么选
前端·vue.js·websocket·网络协议·http·electron·pdf