vscode调试Electron项目

本文介绍了如何配置和使用 launch.json 文件来调试 Electron 主进程。通过修改文件内容,包括设置 runtimeExecutable 和 protocol,确保断点能在 JavaScript 代码中正常工作。理解 Intellisense 提供的属性提示,并遵循相关链接提供的指南,对于提升 Electron 应用的开发效率至关重要。
摘要由CSDN通过智能技术生成

打开项目文件夹,调试运行时选择创建launch.json文件 ,文件内容修改如下:

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron Main",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "program": "${workspaceFolder}/app/index.js",
            "protocol": "inspector" //添加默认的协议是legacy,这个协议导致不进入断点
        },
    ]
}

debug运行可以断点到js文件里。

 

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、付费专栏及课程。

余额充值