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

已于 2022-06-08 11:22:39 修改
阅读量1.2k 收藏 1
点赞数
分类专栏： nodejs 文章标签： vscode electron visual studio
于 2022-06-08 10:48:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zy103118/article/details/125179959
版权

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

调试主进程的说明：

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

然后打开debug透视图

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

打开debug环境的配置文件

第二步配置好后添加断点

第三步启动debug环境及程序

启动后如图所示

__________

总结：

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

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

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

 

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

 

 运行代码后

 

 

 

brave_zhao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Electron常见问题 33 - 如何在VSCode中打断点调试
liuzhen007的专栏
10-14 1355
目录 前言 正文 一、配置调试脚本 二、启动调试按钮 前言 从事Electron开发的同学，必备的技能之一就是启用调试功能，那么如何在VSCode中打断点进行代码调试呢，今天就来介绍一下。 正文 一、配置调试脚本 点击VSCode左侧的“运行”按钮，如下图所示： 选择“Node.js”选项，如下图： 这个时候VSCode会自动创建一个launch.json脚本，把下边的内容拷贝进去，保存即可。 { // 使用 IntelliSense 了解相关属性。 ...
【electron】 客户端调试小技巧
hzxOnlineOk的博客
06-16 2454
打开开发者工具 可以方便拦截electron内的请求，也可以通过f12的开发者工具中的source打断点。虽然在electron客户端内也能审查元素。PS：但是其有局限性，如果是窗体套窗体(webview)，就调试不到了，用浏览器自带的delTools可以方便拦截并且打断点调试2、通过在source的输入框（通过ctrl+p打开）输入“/行数321”可以快速定位到321行3、通过electron客户端新开窗体承载的webview。
第一篇：electron 主线程调试---vscode
z1067832450_的专栏
12-02 659
渲染进程可直接 打开：开发者工具 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应用程序：一次卓越的开发体验
最新发布
gitblog_00061的博客
06-11 404
使用VSCode调试Electron应用程序：一次卓越的开发体验 项目地址:https://gitcode.com/octref/vscode-electron-debug 1、项目介绍 在寻找一个便捷、高效的方式来调试你的Electron应用吗？Debugging Electron in VSCode项目提供了一种全新的解决方案。这个开源项目专注于帮助开发者利用Visual Studio Cod...
Electron教程3_使用VSCode来调试Electron
随风漂浪的博客
04-18 1243
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...
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
Electron-Debug调试-VSCode
qq_31087241的博客
05-11 1368
创建launch.json debug -> Add Configuration 在launch.json中的configurations中新增调试配置 -> AddConfiguration => {} Node.js:Electron Main => {} Chrome : Attach 在Electron Main中新增调试指令 “runtimeArgs”:["–remote-debugging-prot=9222","."], *可选 "win.
[乱说]Electron Debug with VS Codee
沉舟侧畔千帆过 病树前头万木春
11-22 644
Electron Debug with VS Code目的 实现用VScode 调试Electron的主进程和渲染进程 前提条件 安装VSCode 安装Debugger for Chrome(不一定要装Chrome浏览器)调主进程不用此插件 安装Electron 操作流程 生成Launch.json 在左边栏打到调试页，找到调试设置（一个小齿轮）选node.js生成，之后就可以在.vscode
vscode断点调试_Electron 应用的调试
weixin_39953673的博客
11-23 652
本文介绍 Electron 应用开发过程中的调试render Processrender Process 的运行环境就是 Chrome 浏览器，所以 Devtools 就是理想的调试工具。可以通过在创建窗口时打开开发者工具：mainWindow.webContents.openDevTools();，或者在运行窗口的菜单栏点击 View-->Toggle Developer Tools。De...
vscode的electron主进程调试
qq_38184425的博客
01-13 358
.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": ".
Visual Studio Code 1.67.2（code-stable-x64-1652813090.tar.gz）
05-28
下面将详细介绍Visual Studio Code的主要特点和功能，以及如何在Linux系统上安装和使用。 首先，Visual Studio Code的核心特性之一是其丰富的扩展支持。用户可以通过内置的扩展市场安装各种插件，以增强对特定编程...
Visual Studio Code
05-30
**Visual Studio Code (VS Code)** 是一款由微软开发的免费、开源的代码编辑器，它在程序员社区中广受欢迎，尤其适用于跨平台的开发工作。VS Code 支持Windows、macOS以及Linux操作系统，提供了丰富的功能，使得它...
visual studio code for linux 经典的开发工具
11-13
Visual Studio Code（简称VS Code）是一款由微软开发的免费、开源的代码编辑器，支持多种操作系统，包括Linux。作为一款跨平台的开发工具，VS Code在Linux环境中的应用同样广泛，为开发者提供了丰富的功能和高效的...
VSCode软件，软件编辑工具
03-31
VSCode（Visual Studio Code）是一款由微软开发的免费、开源的源代码编辑器，它支持多种编程语言，并具有丰富的功能和高度可扩展性。这款软件是现代开发人员日常工作中不可或缺的工具之一，尤其受到Web开发者和...
vscode ide portable
05-30
Visual Studio Code（简称VSCode）是一款由微软开发的免费、开源的代码编辑器，它具有强大的功能和灵活性，适用于多种操作系统，包括Windows、macOS和Linux。"vscode ide portable" 提到的是便携式版本的VSCode，这...
electron项目 用vscode 调试主进程和渲染进程
qq_36904182的博客
11-24 602
【代码】css 写0.5px的线。
三国杀开源系列之九-vscode调试electron
MissYourKiss的专栏
01-28 848
好久没填这个系列的坑了，最近又朋友问，所以就更一篇。主要内容是写vscode调试electron的方法。 这个noname的三国杀框架用js写的，没有任何参考文档，调试梳理代码非常麻烦。最开始使用了sublime，可以调试js，但是无法调试electron。后面网上查了下，最终决定使用vscode进行代码的开发和调试。 【最终效果 - 主进程+渲染进程 同时调试】 【准备工作】 1、下载并安装vscode 2、下载并安装nodejs （具体教程看这个系列之...
vscode调试Electron项目
chduguxue的专栏
10-17 686
vscode中打开electron项目断点运行配置
electron 使用vscode调试debug的配置代码
07-23 852
{ “version”: “0.2.0”, “configurations”: [ { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceRoot}", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { "runt
electron 渲染进程向主进程发送消息处理程序
04-29
在 Electron 中，渲染进程和主进程之间的通信可以通过 IPC（进程间通信）机制实现。以下是渲染进程向主进程发送消息的处理程序示例： 在渲染进程中，使用 `ipcRenderer` 模块的 `send` 方法来发送消息： ```javascript const { ipcRenderer } = require('electron'); ipcRenderer.send('message-type', 'message-data'); ``` 在主进程中，使用 `ipcMain` 模块的 `on` 方法来监听消息，然后使用 `event.sender.send` 方法向渲染进程发送回复消息： ```javascript const { ipcMain } = require('electron'); ipcMain.on('message-type', (event, data) => { // Handle message here console.log(data); // Send reply message event.sender.send('reply-message-type', 'reply-message-data'); }); ``` 这样，渲染进程就可以通过 IPC 机制向主进程发送消息，并且主进程可以接收并处理这些消息，并向渲染进程发送回复消息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值