Electron项目调试技巧

已于 2023-12-08 14:58:04 修改
阅读量1.2k 收藏
点赞数
分类专栏： electron 文章标签： electron javascript 前端
于 2023-08-21 12:15:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013896513/article/details/132405825
版权

Electron的开发调试技巧

通过console.log进行输出打印帮助调试

主进程

console.log内容会在终端打印

渲染进程

console.log内容，会在相应渲染进程调试工具中打印。

打开渲染进程调试工具的方法

  1. 通过代码 globalShortcut.register给窗口注册快捷键打开调试工具，使用相应快捷键可以打开主窗口渲染进程的调试工具。
  2. 先用鼠标点一下相应窗口，再使用shift+ctrl+i快捷键可以打开相应窗口的调试工具。
  3. 通过代码的方式在BrowserWindow的webContents中调用openDevTool()来打开。

在这里插入图片描述

初心未变
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
electron 打开调试_【Electron】Electron 调试
weixin_39597318的博客
12-19 7363
electron有主进程和渲染进程，所以调试部分也分为两大块，即调试主进程和渲染进程一、调试渲染进程调试渲染进程和调试浏览器的方法基本差不多。在运行electron 应用之后可以通过下面两种方式打开调试工具1.手动打开View->Toogle Developer Tools的方式打开如下图：2.代码打开除了上述手动打开的方式之外，也可以通过代码自动打开调试的控制台。在主进程(一般默认的就是m...
electron 打开调试_Electron 应用调试指南
weixin_39849153的博客
12-19 1133
Electron 是一个基于 Node.js 和 Chromium 的开源框架，用于构建桌面应用，开发者可以使用 web 技术(HTML，JavaScript 和 CSS)完成整个应用的开发。许多知名桌面应用基于 Electron 实现，如 VSCode，Slack 和 GitHub Desktop 等。本文将介绍调试 Electron 应用的一些常用方法。开发环境调试Electron 应用进程分...
【实战】学习 Electron：构建跨平台桌面应用
程序边界
10-18 8747
Electron 最早由 GitHub 开发，它允许开发者使用 Web 技术来构建桌面应用程序。Electron 基于 Node.js 和 Chromium，这两个都是开源项目，因此 Electron 有着丰富的生态系统和文档支持。使用 Electron，开发者可以创建使用 HTML、CSS 和 JavaScript 构建的跨平台桌面应用程序，这些应用程序可以在 Windows、macOS 和 Linux 上运行。
使用VSCode调试Electron应用程序：一次卓越的开发体验
最新发布
gitblog_00061的博客
06-11 439
使用VSCode调试Electron应用程序：一次卓越的开发体验 项目地址:https://gitcode.com/octref/vscode-electron-debug 1、项目介绍 在寻找一个便捷、高效的方式来调试你的Electron应用吗？Debugging Electron in VSCode项目提供了一种全新的解决方案。这个开源项目专注于帮助开发者利用Visual Studio Cod...
Electron应用调试
HoYa_1的博客
07-04 2839
Electron是一个使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。它基于Node.js和Chromium，被Atom编辑器和许多其他应用程序使用。Electron兼容Mac、Windows和Linux，可以构建出三个平台的应用程序。相对而言，Electron 的维护成本较低，因而十分流行。VS Code、一些企业的即时通讯工具等，都使用了Electron。但存在性能问题，同时也引入了其他的安全问题。
electron 调试
问白的博客
03-23 8840
electron debugger 在开发过程中我们经常需要对某一功能进行调试，electron也不例外。 electron有主进程和渲染进程，所以调试部分也分为两大块，即调试主进程和渲染进程 渲染进程 调试渲染进程和调试浏览器的方法基本差不多。在运行electron 应用之后可以通过下面两种方式打开调试工具 手动打开 View->Toogle Developer Tools的方式打开 如下...
electron 打开调试_Electron学习笔记(二)
weixin_31110741的博客
12-19 816
一. remote模块有时候,我们需要在渲染的窗口中打开新的窗口,也就需要在渲染进程中使用主进程中的方法.当我们知道了Electron有主进程和渲染进程后，我们还要知道一件事，就是Electron的API方法和模块也是分为可以在主进程和渲染进程中使用。那如果我们想在渲染进程中使用主进程中的模块方法时，可以使用Electron Remote解决在渲染和主进程间的通讯。const btn = this...
【electron】 客户端调试小技巧
hzxOnlineOk的博客
06-16 2477
打开开发者工具 可以方便拦截electron内的请求，也可以通过f12的开发者工具中的source打断点。虽然在electron客户端内也能审查元素。PS：但是其有局限性，如果是窗体套窗体(webview)，就调试不到了，用浏览器自带的delTools可以方便拦截并且打断点调试2、通过在source的输入框（通过ctrl+p打开）输入“/行数321”可以快速定位到321行3、通过electron客户端新开窗体承载的webview。
1.1.6 Electron 打开调试框
mejian1992的博客
02-03 594
在主程序中添加一句话 mainWindow.webContents.openDevTools() 2 运行程序
基于 umijs + electron + ant-design-pro 的项目模板开发代码
03-12
8. **调试与测试**：了解如何在开发环境中调试Electron应用，以及如何编写和运行单元测试和集成测试，确保代码的质量和稳定性。 9. **性能优化**：探讨如何利用umi和Electron的特性进行性能优化，如代码分割、静态...
基于 Vue 的 Electron 项目搭建过程图文详解
11-20
在本文中，我们将深入探讨如何基于 Vue.js 搭建一个 Electron 项目，这是一个流行的桌面应用开发框架。首先，我们要确保已经安装了 Node.js 环境...继续学习和实践，你将能更好地掌握 Electron 和 Vue 结合的开发技巧。
electron 安装，调试，打包的具体使用
01-19
项目推荐 想要快速的了解 electron， 调试 electron， 打包 electron， 推荐项目electron-webpack-quick-start 快速开始 先安装 cross-env，用于设置环境变量。因为在后面安装electron， 需要下载， 默认的源在国内下载很慢，需要通过设置环境变量来切换下载地址 #安装cross-env，用于设置环境变量的 npm install cross-env -g Clone项目到本地 # Clone repository git clone https://github.com/electron-userland/electron-w
electron-learn.zip
07-27
6. **调试技巧**：学习如何使用Chrome DevTools对Electron应用进行调试，包括针对主进程和渲染进程的独立调试。 7. **安全考虑**：理解Electron应用的安全模型，防止恶意代码的注入和数据泄露，如限制`...
electron_three.js_vue.zip
12-17
开发者可以通过阅读源代码，学习到Electron应用的架构、Vue.js组件化开发以及Three.js的3D图形编程技巧。此外，TypeScript的使用可以提高代码质量和可维护性，而Vite则提供了更快的开发体验。通过运行和调试此项目，...
electron-resource.zip electron学习资源
03-19
6. **调试工具和技巧**：由于Electron应用的特性，调试可能比常规Web应用复杂。压缩包可能包含关于如何使用Chrome DevTools或其他工具进行调试的信息。 7. **性能优化指南**：随着应用复杂性的增加，性能优化变得至...
VS Code调试electron应用程序(主进程)
Lady__Killer的博客
10-25 785
  1、修改启动命令参数(package.json) { "name": "Hello-World", "main": "main.js", "scripts": { "start": "electron . --inspect-brk=5858" } } --inspect-brk=5858" } }        
前端学习之路Electron——打开调试模式
HarryHY的博客
04-17 5549
进入调试模式： mainWindow.webContents.openDevTools() main.js入口文件 var electron = require('electron') var app = electron.app var BrowserWindow = electron.BrowserWindow; var mainWindow = null ; app....
vscode断点调试_Electron 应用的调试
weixin_39953673的博客
11-23 655
本文介绍 Electron 应用开发过程中的调试render Processrender Process 的运行环境就是 Chrome 浏览器，所以 Devtools 就是理想的调试工具。可以通过在创建窗口时打开开发者工具：mainWindow.webContents.openDevTools();，或者在运行窗口的菜单栏点击 View-->Toggle Developer Tools。De...
electron增加页面返回_「技术分享」初探Electron，从入门到实践
weixin_39667652的博客
11-24 229
初探Electron，从入门到实践刘涛 —— GrapeCity SpreadJS 项目组资深开发工程师，在前端开发领域耕耘多年，热衷于研究前沿技术，专注于以实践方式提升开发效率。本期技术分享，我们将从“初探Electron”开始，通过线上直播的方式，深入解读 Electron 的入门技巧以及实践应用。线上直播地址：http://live.vhall.com/878864086在开始学习Elect...
electron 打开调试
06-06
如果你想在 Electron 应用程序中打开调试控制台，可以在主进程或渲染进程中使用以下代码： 在主进程中，可以在 `BrowserWindow` 对象实例中的 `webPreferences` 选项中设置 `devTools` 为 `true`，如下所示： ```javascript const { BrowserWindow } = require('electron') let mainWindow = new BrowserWindow({ webPreferences: { devTools: true } }) ``` 在渲染进程中，可以使用 `electron` 模块的 `remote` 对象来获取主进程中的 `BrowserWindow` 对象实例，并使用 `webContents` 对象的 `openDevTools` 方法打开开发者工具，如下所示： ```javascript const { remote } = require('electron') let mainWindow = remote.getCurrentWindow() mainWindow.webContents.openDevTools() ``` 这样就可以在 Electron 应用程序中打开调试控制台了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值