Electron开发桌面应用(2)：VSCODE调试Electron项目

最新推荐文章于 2024-09-27 10:57:05 发布
最新推荐文章于 2024-09-27 10:57:05 发布
阅读量2.1w 收藏 22
点赞数 2
CC 4.0 BY-SA版权
分类专栏： election 文章标签： 桌面应用 调试 nodejs electron调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ruyulin/article/details/78885246
本文详细介绍了如何使用Visual Studio Code（VSCode）调试Electron桌面应用。内容包括设置环境（nodejs、npm、electron、vscode版本），具体调试步骤如打开项目、添加配置、修改launch.json文件以解决断点问题，以及最终成功在主进程(main.js)中实现断点调试。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目的

编写目的主要记录vscode如何调试electron项目。

环境：

  • nodejs 8.9.3
  • mpm 5.5.1
  • electron 1.7.10
  • vscode 1.19.1

具体步骤

1.使用vscode打开electron项目

这里写图片描述

2.点击debug 添加配置

这里写图片描述

3.点击“添加配置”：

最低0.47元/天 解锁文章

200万优质内容无限畅学
Electron桌面应用开发：CSS Modules的最佳实践
AI架构全栈开发实战笔记
06-13 863
样式冲突（不同组件同名类名互相覆盖）可维护性差（修改样式时需全局搜索，容易影响其他模块）团队协作时的“样式污染”问题（多人修改同一文件导致冲突）本文聚焦Electron与CSS Modules的集成方案，覆盖从环境配置到实战应用的全流程，帮助开发者掌握“模块化CSS”的最佳实践。本文从“为什么需要CSS Modules”出发，逐步讲解核心概念、Electron集成方案、实战案例，最后总结最佳实践和常见问题。Electron。
VS Code是用Electron框架开发的
DpgrMl的博客
09-24 681
Electron是一个基于Chromium和Node.js的开源框架，用于构建跨平台的桌面应用程序。VS Code利用了Electron的这些特性，使得它可以在多个操作系统上运行，并提供类似于Web浏览器的用户界面。除了Electron，VS Code还使用了许多其他的开源组件和库来实现其丰富的功能，例如Monaco编辑器、Node.js和TypeScript等。通过这些组件的集成，VS Code提供了强大的代码编辑和调试功能，以及丰富的扩展生态系统。的文件作为应用程序的主界面。
Electron教程3_使用VSCode来调试Electron
随风漂浪的博客
04-18 1406
Electron教程3_使用VSCode来调试Electron1. 使用VSCode打开项目的文件夹2. 点击debug 功能3. 自动创建launch.json 文件4. 修改launch.json中的启动内容5. 重新启动debug功能，启动electron项目 1. 使用VSCode打开项目的文件夹 2. 点击debug 功能 3. 自动创建launch.json 文件 4. 修改l...
VSCode调试Electron
最新发布
weixin_71329368的博客
09-27 1278
使用vscode来调试electron主进程，实现断点调试、监视变量，跟踪代码执行，极大地提高开发效率。
使用VSCode调试Electron应用程序：一次卓越的开发体验
gitblog_00061的博客
06-11 737
使用VSCode调试Electron应用程序：一次卓越的开发体验 1、项目介绍 在寻找一个便捷、高效的方式来调试你的Electron应用吗？Debugging Electron in VSCode项目提供了一种全新的解决方案。这个开源项目专注于帮助开发者利用Visual Studio Code（VSCode）的强大功能，对基于Electron的应用进行深度调试。无论是初学者还是经验丰富的开发人员，...
vscode调试Electron项目
chduguxue的专栏
10-17 835
vscode中打开electron项目断点运行配置
vscode的electron主进程调试
qq_38184425的博客
01-13 480
.vscode目录添加tasks.json文件 { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "electron-debug", "type": "process", "command": ".
Electron 桌面应用开发从基础到进阶
郊眠寺
03-16 4073
本文介绍了一些 Electron 的进阶知识，包括使用主进程和渲染进程、使用模块、使用开发工具、调试、部署和热更新。通过掌握这些知识，你可以更好地管理和开发 Electron 应用程序，提高开发效率，为用户提供更好的体验。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
Angular+Electron+VSCode的桌面应用开发入门笔记（1）
热门推荐
yr7942793的博客
03-26 2万+
第一部分 Electron开发入门笔记 GitHub 的 Electron 框架（以前叫做 Atom Shell）允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用。它是 io.js 运行时的衍生，专注于桌面应用而不是 web 服务端。 Electron 丰富的原生 API 使我们能够在页面中直接使用 JavaScript 获取原生的内容。 本文学习的主要知识来
探索 Electron：将 Web 技术带入桌面应用
ztK63LrD的博客
06-29 4242
Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
VSCode创建 electron 项目
bigblack12321的博客
10-31 2010
VSCode创建 electron 项目vue+vite项目
vscode调试Electron+ts
qq_43478653的博客
05-14 943
调试Electron+js: https://www.electronjs.org/zh/docs/latest/tutorial/debugging-vscode。
在VSCode中调试Electron应用的主进程代码
DpgrMl的博客
10-03 541
在VSCode的侧边栏中，点击调试图标（红色的正方形和白色的三角形）。然后，在VSCode的调试视图中，选择“Electron Main”作为调试配置。在调试过程中，你可以使用VSCode提供的调试控制按钮来控制程序的执行。例如，你可以使用暂停按钮来暂停程序的执行，使用继续按钮来继续执行程序，使用步入按钮来逐步执行代码，并使用停止按钮来停止调试会话。在开发过程中，调试应用程序的主进程代码是非常重要的。通过遵循以上步骤，你可以在VSCode中调试Electron应用程序的主进程代码。步骤3：配置调试选项。
Electron-Debug调试-VSCode
qq_31087241的博客
05-11 1509
创建launch.json debug -> Add Configuration 在launch.json中的configurations中新增调试配置 -> AddConfiguration => {} Node.js:Electron Main => {} Chrome : Attach 在Electron Main中新增调试指令 “runtimeArgs”:["–remote-debugging-prot=9222","."], *可选 "win.
第九讲使用VSCODE调试Electron程序
星火燎猿
08-19 1883
第九讲使用VSCODE调试Electron程序介绍调试主进程调试渲染进 介绍 前面学员反馈说程序执行的时候遇到问题没办法调试，这节课程主要给大家介绍如何利用vscode来调试我们的Electron程序。前面课程我们已经介绍过，Electron程序包括主进程和渲染进程两部组成。开发过程中调试对于开发人员来说是必不可少的，今天我们就来讲一讲如何利用Vscode调试Electron程序，让你在以后的开发中遇到问题能够快速定位并解决问题！ 调试主进程 首先我们打开vscode如下图所示点击左侧虫子一样的图片
使用visualcode调试electron
qq_15419507的博客
11-06 348
使用visual code调试electron的一种最简单的办法
VSCode 如何运行调试全局安装的 Electron
Likianta 的博客
04-05 4618
背景 已安装 nodejs, npm, 以及 vscode npm 全局安装位置已变更为 “D:/programs/nodejs/npm_node_modules/” 已在 全局 安装 electron, 并未在项目下安装 electron 测试项目为 “Electron 初体验”, 路径位置: “D:/workspace/test_room/electron_foretaste” 需求与预期...
VS Code调试electron应用程序(主进程)
Lady__Killer的博客
10-25 929
  1、修改启动命令参数(package.json) { "name": "Hello-World", "main": "main.js", "scripts": { "start": "electron . --inspect-brk=5858" } } --inspect-brk=5858" } }        
VSCode自动化：实现点击VSCode图标——基于Electron框架的应用程序的UI自动化
zc180248的博客
07-10 1767
VSCode的界面元素跟谷歌浏览器一样，可以使用selenium来进行定位和模拟用户操作。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值