vscode(visual studio code)下调试electron 类型程序，如何debug跟断点（调试主进程和渲染进程）

原创 已于 2022-06-08 11:22:39 修改 · 2.1k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vscode #electron #visual studio
于 2022-06-08 10:48:49 首次发布
本文介绍了如何调试Electron应用的主进程和渲染进程。对于主进程，详细阐述了从进入项目文件夹、打开Debug透视图，到配置运行配置文件、设置断点及启动调试的步骤。而对于渲染进程的调试，提到了win.webContents.openDevTools()的作用，并记录了个人尝试调试未果的情况。

声明：部分内容转载《Electron实战》书上内容：刘晓伦著 请买正版书查看

调试主进程的说明：

首先,进入你的项目文件夹

然后打开debug透视图

第一步配置debug程序的运行配置文件

打开debug环境的配置文件

第二步配置好后添加断点

第三步启动debug环境及程序

启动后如图所示

__________

总结：

配置好后-.>添加断点->启动

————————————————

下面是调试渲染进程的说明（下面的内容是我转载网上，调试渲染进程没好使，记下备忘）

 

win.webContents.openDevTools();代码的作用是：

 

 运行代码后

 

 

 

第九讲使用VSCODE调试Electron程序
星火燎猿
08-19 2033
第九讲使用VSCODE调试Electron程序介绍调试主进程调试渲染进 介绍 前面学员反馈说程序执行的时候遇到问题没办法调试，这节课程主要给大家介绍如何利用vscode来调试我们的Electron程序。前面课程我们已经介绍过，Electron程序包括主进程和渲染进程两部组成。开发过程中调试对于开发人员来说是必不可少的，今天我们就来讲一讲如何利用Vscode调试Electron程序，让你在以后的开发中遇到问题能够快速定位并解决问题！ 调试主进程 首先我们打开vscode如下图所示点击左侧虫子一样的图片
在VSCode中调试Electron应用的主进程代码
DpgrMl的博客
10-03 674
在VSCode的侧边栏中，点击调试图标（红色的正方形和白色的三角形）。然后，在VSCode的调试视图中，选择“Electron Main”作为调试配置。在调试过程中，你可以使用VSCode提供的调试控制按钮来控制程序的执行。例如，你可以使用暂停按钮来暂停程序的执行，使用继续按钮来继续执行程序，使用步入按钮来逐步执行代码，并使用停止按钮来停止调试会话。在开发过程中，调试应用程序的主进程代码是非常重要的。通过遵循以上步骤，你可以在VSCode中调试Electron应用程序的主进程代码。步骤3：配置调试选项。
Electron常见问题 33 - 如何在VSCode中打断点调试
liuzhen007的专栏
10-14 1704
目录 前言 正文 一、配置调试脚本 二、启动调试按钮 前言 从事Electron开发的同学，必备的技能之一就是启用调试功能，那么如何在VSCode中打断点进行代码调试呢，今天就来介绍一下。 正文 一、配置调试脚本 点击VSCode左侧的“运行”按钮，如下图所示： 选择“Node.js”选项，如下图： 这个时候VSCode会自动创建一个launch.json脚本，把下边的内容拷贝进去，保存即可。 { // 使用 IntelliSense 了解相关属性。 ...
第一篇：electron 主线程调试---vscode
z1067832450_的专栏
12-02 837
渲染进程可直接 打开：开发者工具 mac快捷键：option+command+i 以下是主线程调试 VSCode：参考资料使用 VsCode调试 | Electron 1，如下图选择运行与调试按钮：创建 launch.json launch.json 配置： { "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "nod...
vscode 配置electron主进程和渲染进程 断点调试，通用模式
ty21000的博客
01-17 1804
vscode 配置electron主进程和渲染进程 断点调试，通用模式。
Electron-Debug调试-VSCode
qq_31087241的博客
05-11 1641
创建launch.json debug -> Add Configuration 在launch.json中的configurations中新增调试配置 -> AddConfiguration => {} Node.js:Electron Main => {} Chrome : Attach 在Electron Main中新增调试指令 “runtimeArgs”:["–remote-debugging-prot=9222","."], *可选 "win.
vscode 调试参数_Visual Studio Code前端调试
weixin_39885412的博客
12-19 963
原标题：Visual Studio Code前端调试在 Build 2015 大会上，微软宣布推出免费跨平台的 Visual Studio Code 编辑器!Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插...
车载软件架构 --- 如何使用 VSCode 作为 TRACE32 的前端调试界面
Soly_kun的博客
04-28 982
车载软件架构 --- 如何使用 VSCode 作为 TRACE32 的前端调试界面
vscode 配置vue断点
limonero
08-17 2413
1、安装 1、vSCode 2、浏览器 3、浏览器的相应的 Debugger 扩展： Debugger for Chrome Debugger for Firefox 4、使用vue-cli命令创建项目 2、配置source map 1、Vue CLI 2： 请设置并更新 config/index.js 内的 devtool...
Electron开发桌面应用(2)：VSCODE调试Electron项目
热门推荐
ruyulin的博客
12-24 2万+
目的编写目的主要记录vscode如何调试electron项目。环境： nodejs 8.9.3 mpm 5.5.1 electron 1.7.10 vscode 1.19.1 具体步骤1.使用vscode打开electron项目2.点击debug 添加配置3.点击“添加配置”：4.打开launch.json点击右下角的添加配置，添加“electron 主”5.填配置完毕，修改launch.json
使用visualcode调试electron
qq_15419507的博客
11-06 467
使用visual code调试electron的一种最简单的办法
electron项目 用vscode 调试主进程和渲染进程
qq_36904182的博客
11-24 920
【代码】css 写0.5px的线。
VSCode调试Electron
weixin_71329368的博客
09-27 1494
使用vscode来调试electron主进程，实现断点调试、监视变量，跟踪代码执行，极大地提高开发效率。
vscode调试Electron项目
chduguxue的专栏
10-17 894
vscode中打开electron项目断点运行配置
vscode断点调试_Electron 应用的调试
weixin_39953673的博客
11-23 893
本文介绍 Electron 应用开发过程中的调试render Processrender Process 的运行环境就是 Chrome 浏览器，所以 Devtools 就是理想的调试工具。可以通过在创建窗口时打开开发者工具：mainWindow.webContents.openDevTools();，或者在运行窗口的菜单栏点击 View-->Toggle Developer Tools。De...
electron 调试
问白的博客
03-23 9932
electron debugger 在开发过程中我们经常需要对某一功能进行调试，electron也不例外。 electron有主进程和渲染进程，所以调试部分也分为两大块，即调试主进程和渲染进程 渲染进程 调试渲染进程和调试浏览器的方法基本差不多。在运行electron 应用之后可以通过下面两种方式打开调试工具 手动打开 View->Toogle Developer Tools的方式打开 如下...
vscode的electron主进程调试
qq_38184425的博客
01-13 584
.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": ".
使用VSCode调试Electron应用程序：一次卓越的开发体验
gitblog_00061的博客
06-11 859
使用VSCode调试Electron应用程序：一次卓越的开发体验 1、项目介绍 在寻找一个便捷、高效的方式来调试你的Electron应用吗？Debugging Electron in VSCode项目提供了一种全新的解决方案。这个开源项目专注于帮助开发者利用Visual Studio Code（VSCode）的强大功能，对基于Electron的应用进行深度调试。无论是初学者还是经验丰富的开发人员，...
【免费下载】 使用VS Code调试Electron应用的主进程与渲染进程
最新发布
gitblog_00670的博客
06-07 588
Electron作为跨平台桌面应用开发框架，其架构特点决定了调试方式的特殊性。本文将基于microsoft/vscode-recipes项目中的Electron调试指南，深入讲解如何使用VS Code高效调试Electron应用的主进程和渲染进程。 ## Electron进程架构基础 在开始调试前，我们需要理解Electron的两个核心进程： 1. **主进程**：运行在Node.js环境中...
VSCode 如何运行调试全局安装的 Electron
Likianta 的博客
04-05 4908
背景 已安装 nodejs, npm, 以及 vscode npm 全局安装位置已变更为 “D:/programs/nodejs/npm_node_modules/” 已在 全局 安装 electron, 并未在项目下安装 electron 测试项目为 “Electron 初体验”, 路径位置: “D:/workspace/test_room/electron_foretaste” 需求与预期...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值