VS Code调试electron应用程序(主进程)

最新推荐文章于 2025-06-07 09:05:36 发布

Lady__Killer

最新推荐文章于 2025-06-07 09:05:36 发布

阅读量928

点赞数

CC 4.0 BY-SA版权

分类专栏：技术类

本文链接：https://blog.youkuaiyun.com/Lady__Killer/article/details/78490350

技术类专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何通过修改Electron应用的启动命令参数来启用调试模式，具体展示了如何在package.json文件中设置--inspect-brk参数以进行远程调试。

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

1、修改启动命令参数(package.json)

{
  "name": "Hello-World",
  "main": "main.js",
  "scripts": {
    "start": "electron . --inspect-brk=5858"
  }
} --inspect-brk=5858"
  }
}

--inspect-brk=5858

inspect

inspect

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lady__Killer

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

在VSCode中调试Electron应用的主进程代码

DpgrMl的博客

10-03

532

在VSCode的侧边栏中，点击调试图标（红色的正方形和白色的三角形）。然后，在VSCode的调试视图中，选择“Electron Main”作为调试配置。在调试过程中，你可以使用VSCode提供的调试控制按钮来控制程序的执行。例如，你可以使用暂停按钮来暂停程序的执行，使用继续按钮来继续执行程序，使用步入按钮来逐步执行代码，并使用停止按钮来停止调试会话。在开发过程中，调试应用程序的主进程代码是非常重要的。通过遵循以上步骤，你可以在VSCode中调试Electron应用程序的主进程代码。步骤3：配置调试选项。

第九讲使用VSCODE调试Electron程序

星火燎猿

08-19

1879

第九讲使用VSCODE调试Electron程序介绍调试主进程调试渲染进介绍前面学员反馈说程序执行的时候遇到问题没办法调试，这节课程主要给大家介绍如何利用vscode来调试我们的Electron程序。前面课程我们已经介绍过，Electron程序包括主进程和渲染进程两部组成。开发过程中调试对于开发人员来说是必不可少的，今天我们就来讲一讲如何利用Vscode调试Electron程序，让你在以后的开发中遇到问题能够快速定位并解决问题！调试主进程 首先我们打开vscode如下图所示点击左侧虫子一样的图片

1 条评论您还未登录，请先登录后发表或查看评论

VSCode调试Electron

weixin_71329368的博客

09-27

1275

使用vscode来调试electron主进程，实现断点调试、监视变量，跟踪代码执行，极大地提高开发效率。

使用VS Code调试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-Vue 开发笔记：使用 Visual Studio Code 配置进行主进程断点调试

AxCybersecurity的博客

09-17

497

Electron-Vue 是一个基于 Electron 和 Vue.js 的强大框架，用于构建跨平台的桌面应用程序。在开发过程中，调试是解决问题和提高代码质量的重要环节。通过使用 Visual Studio Code（简称 VS Code）的调试功能，我们可以方便地在 Electron-Vue 项目的主进程中设置断点并进行调试。本篇文章将详细介绍如何配置 VS Code 实现主进程断点调试。

VSCode 如何运行调试全局安装的 Electron

Likianta 的博客

04-05

4601

背景已安装 nodejs, npm, 以及 vscode npm 全局安装位置已变更为 “D:/programs/nodejs/npm_node_modules/” 已在全局安装 electron, 并未在项目下安装 electron 测试项目为 “Electron 初体验”, 路径位置: “D:/workspace/test_room/electron_foretaste” 需求与预期...

三国杀开源系列之九-vscode调试electron

MissYourKiss的专栏

01-28

996

好久没填这个系列的坑了，最近又朋友问，所以就更一篇。主要内容是写vscode调试electron的方法。这个noname的三国杀框架用js写的，没有任何参考文档，调试梳理代码非常麻烦。最开始使用了sublime，可以调试js，但是无法调试electron。后面网上查了下，最终决定使用vscode进行代码的开发和调试。【最终效果 - 主进程+渲染进程同时调试】【准备工作】 1、下载并安装vscode 2、下载并安装nodejs （具体教程看这个系列之...

electron调试

程序员日志

07-26

1378

electron 的调试分两步，界面的调试，和主进程的调试。本篇记录的主进程调试是vscode调试。

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

zy103118的博客

06-08

1896

vscode debug

vscode 配置electron主进程和渲染进程断点调试，通用模式

ty21000的博客

01-17

1535

vscode 配置electron主进程和渲染进程断点调试，通用模式。

electron 调试

问白的博客

03-23

9604

electron debugger 在开发过程中我们经常需要对某一功能进行调试，electron也不例外。 electron有主进程和渲染进程，所以调试部分也分为两大块，即调试主进程和渲染进程渲染进程调试渲染进程和调试浏览器的方法基本差不多。在运行electron 应用之后可以通过下面两种方式打开调试工具手动打开 View->Toogle Developer Tools的方式打开如下...

Electron调试主进程

顺其自然~专栏

04-01

2628

Electron 浏览器窗口中的 DevTools 只能调试在该窗口（即网页）中执行的 JavaScript。要调试在主进程中执行的 JavaScript，您需要使用外部调试器并使用--inspect或--inspect-brk开关启动 Electron。命令行开关使用以下命令行开关之一启用主进程的调试： --inspect=[port] inspect：检查，审查 Electron 将在指定的port上侦听 V8 检查器协议消息，外部调试器将需要在此端口上连接。默认port值为5858.

Electron教程3_使用VSCode来调试Electron

随风漂浪的博客

04-18

1402

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指南 - 调试主进程

weixin_34208185的博客

05-30

454

调试主进程 浏览器窗口的DevTools只能调试渲染进程的脚本（比如Web页面）。为了提供一种方法来调试主进程中的脚本，Electron提供了 --debug 以及 --debug-brk 的选项开关。命令行开关使用下列命令行切换到调试Electron的主进程模式： --debug=[port] 这个开关将使得Electron使用V8...

electron 如何打开主进程的控制台

03-08

<think>嗯，用户想知道如何在Electron中打开主进程的控制台。首先，我需要回忆一下Electron的结构。Electron有主进程和渲染进程，主进程通常运行Node.js代码，而渲染进程是浏览器窗口。控制台默认情况下可能只在渲染进程中可见，但主进程的输出可能隐藏在终端或者启动时的命令行窗口中。用户可能已经知道如何在渲染进程中打开DevTools，比如用webContents.openDevTools()，但主进程的控制台不太一样。主进程的控制台输出通常是在启动Electron应用的终端里显示的，比如在命令行运行electron . 的时候，console.log会输出在那里。但是用户可能想要一个可视化的控制台窗口，类似于浏览器开发者工具，方便调试。这时候可能需要用到第三方库，比如electron-debug，它提供了添加快捷键打开DevTools的功能，但主进程的调试可能需要其他方法。或者，可以通过在主进程中创建一个隐藏的BrowserWindow来输出日志，但这可能有点复杂。另一个方法是使用VS Code的调试功能，附加到Electron的主进程，这样可以直接在VS Code的调试控制台中看到输出。这需要配置launch.json文件，设置正确的调试参数，比如使用inspect-brk来启用调试端口。还有，Electron的app模块有一个whenReady事件，确保应用准备好后再执行代码。可能需要在这个事件回调中执行打开控制台的操作。比如，主进程中创建BrowserWindow实例后，调用webContents.openDevTools()，但那是针对渲染进程的。主进程本身并没有可视化的控制台，所以可能需要其他方式。或者，用户可能只是想在主进程中查看console.log的输出，这时候只需要在启动应用时保留终端窗口即可。例如，在Windows下通过cmd或PowerShell启动应用，或者在macOS/Linux的终端中运行，这样所有主进程的日志都会显示在终端里。如果用户希望有一个更友好的界面，可能需要自己实现一个日志窗口，将主进程的日志通过IPC发送到渲染进程，然后在渲染进程的窗口中显示出来。这可能涉及到较多的代码，比如使用ipcMain和ipcRenderer来传递日志信息。总结来说，主进程的控制台默认输出在启动它的终端中。如果要可视化，可能需要第三方工具或自己实现日志窗口。另外，调试主进程可以通过VS Code的调试器附加到进程，查看输出和变量。</think>在 Electron 中打开主进程的控制台输出可通过 **多种方式** 实现，以下是具体操作指南： --- ### 一、基础方法 - 终端直接查看 主进程的 `console.log` **默认会输出到启动应用的终端**（不需要额外配置）： ```bash # 启动应用时自动捕获日志 npm run start # 或直接执行 electron . ``` ![终端中的主进程日志](https://example.com/terminal-output.png)*通过启动命令的终端窗口查看输出* --- ### 二、可视化控制台方案 #### 方案 1：创建调试窗口（推荐）通过代码动态创建**独立控制台窗口**： ```typescript // 主进程 main.ts import { app, BrowserWindow } from 'electron'; function createDebugWindow() { const debugWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { devTools: true, nodeIntegration: true } }); // 加载空白页并打开开发者工具 debugWindow.loadURL('about:blank'); debugWindow.webContents.openDevTools(); } app.whenReady().then(() => { createDebugWindow(); // 创建主窗口后启动调试窗口 // 其他业务代码... }); ``` #### 方案 2：使用 `electron-debug` 库通过第三方库增强调试能力： ```bash npm install electron-debug --save-dev ``` ```typescript // 主进程启动脚本 require('electron-debug')({ showDevTools: 'undocked', // 自动打开独立调试窗口 devToolsMode: 'previous' // 保持上次的窗口布局 }); ``` --- ### 三、高级调试技巧 #### 1. 使用 VS Code 调试器配置 `.vscode/launch.json`： ```json { "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "args": ["--inspect=9229", "."], "outputCapture": "std" } ] } ``` 通过 `F5` 启动调试，可在 VS Code 的调试控制台查看所有主进程日志。 #### 2. 远程调试（适用于生产环境）启动应用时添加调试参数： ```bash electron --inspect=9229 --remote-debugging-port=8315 your-app ``` 访问 `chrome://inspect` 输入端口号连接。 --- ### 四、日志管理最佳实践 | 工具 | 功能特点 | 使用场景 | |-------------------|----------------------------------|-------------------------| | `winston` | 多传输器日志记录 | 生产环境日志分级存储 | | `electron-log` | 自动区分主/渲染进程日志 | 跨进程统一日志管理 | | `spectron` | 自动化测试时捕获日志 | E2E 测试场景 | --- ### 五、注意事项 1. **安全警告**：生产环境务必关闭调试功能 2. **性能影响**：开启开发者工具会使内存占用增加 30-50MB 3. **跨平台差异**：Windows 系统推荐使用 PowerShell 获取完整日志输出通过上述方法，可以灵活控制 Electron 主进程的调试信息输出方式。推荐开发阶段使用 `electron-debug` + VS Code 组合方案，生产环境采用 `winston` 进行日志管理。