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

已于 2022-06-08 11:22:39 修改
阅读量1.6k 收藏 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透视图，到配置运行配置文件、设置断点及启动调试的步骤。而对于渲染进程的调试，提到了win.webContents.openDevTools()的作用，并记录了个人尝试调试未果的情况。

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

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

调试主进程的说明：

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

然后打开debug透视图

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

打开debug环境的配置文件

第二步配置好后添加断点

第三步启动debug环境及程序

启动后如图所示

__________

总结：

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

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

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

 

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

 

 运行代码后

 

 

 

Electron常见问题 33 - 如何在VSCode中打断点调试
liuzhen007的专栏
10-14 1478
目录 前言 正文 一、配置调试脚本 二、启动调试按钮 前言 从事Electron开发的同学，必备的技能之一就是启用调试功能，那么如何在VSCode中打断点进行代码调试呢，今天就来介绍一下。 正文 一、配置调试脚本 点击VSCode左侧的“运行”按钮，如下图所示： 选择“Node.js”选项，如下图： 这个时候VSCode会自动创建一个launch.json脚本，把下边的内容拷贝进去，保存即可。 { // 使用 IntelliSense 了解相关属性。 ...
Electron-Vue 开发笔记：使用 Visual Studio Code 配置进行主进程断点调试
AxCybersecurity的博客
09-17 420
Electron-Vue 是一个基于 Electron 和 Vue.js 的强大框架，用于构建跨平台的桌面应用程序。在开发过程中，调试是解决问题和提高代码质量的重要环节。通过使用 Visual Studio Code（简称 VS Code）的调试功能，我们可以方便地在 Electron-Vue 项目的主进程中设置断点并进行调试。本篇文章将详细介绍如何配置 VS Code 实现主进程断点调试。
Electron-Debug调试-VSCode
qq_31087241的博客
05-11 1455
创建launch.json debug -> Add Configuration 在launch.json中的configurations中新增调试配置 -> AddConfiguration => {} Node.js:Electron Main => {} Chrome : Attach 在Electron Main中新增调试指令 “runtimeArgs”:["–remote-debugging-prot=9222","."], *可选 "win.
如何使用 VS Code 的调试工具进行断点调试
02-02 2553
在 Python 开发中，调试是定位和修复问题的关键环节。作为一款轻量、功能强大的编辑器，Visual Studio Code（VS Code） 提供了直观、灵活的调试工具，让开发者可以轻松设置断点、检查变量状态、逐步执行代码等。无论是初学者还是经验丰富的开发者，VS Code 的调试功能都能显著提高调试效率。本文将详细介绍如何在 VS Code 中使用调试工具进行断点调试，从基础操作到进阶技巧，帮助你快速上手并掌握调试工具的核心功能。
[乱说]Electron Debug with VS Codee
沉舟侧畔千帆过 病树前头万木春
11-22 685
Electron Debug with VS Code目的 实现用VScode 调试Electron的主进程和渲染进程 前提条件 安装VSCode 安装Debugger for Chrome(不一定要装Chrome浏览器)调主进程不用此插件 安装Electron 操作流程 生成Launch.json 在左边栏打到调试页，找到调试设置（一个小齿轮）选node.js生成，之后就可以在.vscode
使用visualcode调试electron
qq_15419507的博客
11-06 317
使用visual code调试electron的一种最简单的办法
vscode 配置electron主进程和渲染进程 断点调试，通用模式
ty21000的博客
01-17 1383
vscode 配置electron主进程和渲染进程 断点调试，通用模式。
Visual Studio Code 1.69.1 （VSCodeSetup-arm64-1.69.1.exe)
08-04
### Visual Studio Code 1.69.1 (VSCodeSetup-arm64-1.69.1.exe) #### 概述 Visual Studio Code (简称 VSCode) 是一款由微软开发的开源、跨平台的源代码编辑器。它以其轻量级、高性能的特点深受开发者喜爱。在版本...
Visual Studio Code 1.67.2（code-stable-x64-1652813090.tar.gz）
05-28
下面将详细介绍Visual Studio Code的主要特点和功能，以及如何在Linux系统上安装和使用。 首先，Visual Studio Code的核心特性之一是其丰富的扩展支持。用户可以通过内置的扩展市场安装各种插件，以增强对特定编程...
【软件安装】Visual Studio Code安装教程VScode安装教程
qq_39150957的博客
01-11 1155
本文讲述了如何在官网下载并安装Visual Studio Code（VScode）
Windows 系统下使用Python与Visual Studio Code搭建高效开发环境指南
最新发布
qq_37491737的博客
03-23 391
Windows下使用Python与Visual Studio Code搭建高效开发环境指南
三国杀开源系列之九-vscode调试electron
MissYourKiss的专栏
01-28 964
好久没填这个系列的坑了，最近又朋友问，所以就更一篇。主要内容是写vscode调试electron的方法。 这个noname的三国杀框架用js写的，没有任何参考文档，调试梳理代码非常麻烦。最开始使用了sublime，可以调试js，但是无法调试electron。后面网上查了下，最终决定使用vscode进行代码的开发和调试。 【最终效果 - 主进程+渲染进程 同时调试】 【准备工作】 1、下载并安装vscode 2、下载并安装nodejs （具体教程看这个系列之...
VS Code调试electron应用程序(主进程)
Lady__Killer的博客
10-25 900
  1、修改启动命令参数(package.json) { "name": "Hello-World", "main": "main.js", "scripts": { "start": "electron . --inspect-brk=5858" } } --inspect-brk=5858" } }        
使用VSCode调试Electron应用程序：一次卓越的开发体验
gitblog_00061的博客
06-11 696
使用VSCode调试Electron应用程序：一次卓越的开发体验 去发现同类优质开源项目:https://gitcode.com/ 1、项目介绍 在寻找一个便捷、高效的方式来调试你的Electron应用吗？Debugging Electron in VSCode项目提供了一种全新的解决方案。这个开源项目专注于帮助开发者利用Visual Studio Code（VSCode）的强大功能，对基于Ele...
VSCode调试Electron
weixin_71329368的博客
09-27 1125
使用vscode来调试electron主进程，实现断点调试、监视变量，跟踪代码执行，极大地提高开发效率。
electron项目 用vscode 调试主进程和渲染进程
qq_36904182的博客
11-24 719
【代码】css 写0.5px的线。
Electron教程3_使用VSCode来调试Electron
随风漂浪的博客
04-18 1366
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_39953673的博客
11-23 741
本文介绍 Electron 应用开发过程中的调试render Processrender Process 的运行环境就是 Chrome 浏览器，所以 Devtools 就是理想的调试工具。可以通过在创建窗口时打开开发者工具：mainWindow.webContents.openDevTools();，或者在运行窗口的菜单栏点击 View-->Toggle Developer Tools。De...
vscode的electron主进程调试
qq_38184425的博客
01-13 442
.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调试Electron 的ui
09-24
Visual Studio Code是一款强大的代码编辑器，对于 Electron 应用程序的调试支持非常全面。如果你想在 VSCode 中调试 Electron UI (用户界面)，可以按照以下步骤操作： 1. 安装插件：首先，安装 `Debugger for Chrome` 插件，它允许你在 VSCode 中调试基于 Chromium 的应用，包括 Electron。可以在 Extensions Market 搜索并安装它。 2. 设置配置文件：在 `.vscode` 文件夹下创建或编辑 `launch.json` 文件，配置启动配置。你需要添加针对 Electron 的配置，例如： ```json { "version": "0.2.0", "configurations": [ { "name": "Debug Electron App", "type": "chrome", "request": "launch", "url": "http://localhost:8080", // 你的Electron应用的端口 "webRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] } ``` 3. 启动调试：在 VSCode 调试视图（Ctrl + Shift + D 或者 F5），选择“Debug Electron App”配置，然后点击“Start Debugging”。 4. 断点和控制：设置断点在源代码中，当运行到断点处会暂停。你可以单步执行、查看变量值、检查堆栈等标准调试功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值