Electron DevTools扩展

最新推荐文章于 2024-05-15 09:45:13 发布
最新推荐文章于 2024-05-15 09:45:13 发布
阅读量452 收藏
点赞数 1
分类专栏： Electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45195200/article/details/117264896
版权

为了使调试更容易，Electron 原生支持 Chrome DevTools 扩展。对于大多数 DevTools 的扩展，我们可以直接下载源码，然后通过 BrowserWindow.addDevToolsExtension 加载它们。Electron 会记住已经加载了哪些扩展，所以不需要每次创建一个新 window 时都调用 BrowserWindow.addDevToolsExtension。

如何加载一个DevTools扩展程序

要在 Electron 中加载一个扩展，需要在 Chrome 浏览器中下载它，找到它在系统目录中位置，然后调用BrowserWindow.addDevToolsExtension(extension) 来加载它。

示例：

下面以 React Developer Tools 为例：

首先我们需要在 Chrome 中安装 React Developer Tools 。打开 chrome://extensions，找到扩展程序的 ID，形如 fmkadmapgofadopljbjfkapdkoienihi 的 hash 字符串。找到 Chrome 扩展程序的存放目录：

  • 在 Ｗindows 下为 %LOCALAPPDATA%\Google\Chrome\User Data\De
最低0.47元/天 解锁文章
大前小白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
electron 打开调试_Electron 调试工具介绍：Electron DevTools扩展
weixin_39762441的博客
12-19 1219
对于大多数DevTools的扩展，你可以直接下载源码，然后通过BrowserWindow.addDevToolsExtensionAPI 加载它们。Electron会记住已经加载了哪些扩展，所以你不需要每次创建一个新window时都调用BrowserWindow.addDevToolsExtensionAPI。$cd/some-directory$gitclone--recurs...
探索未来桌面应用的无限可能 —— 使用 Electron Chrome Extension 开源项目
最新发布
gitblog_00029的博客
06-16 461
探索未来桌面应用的无限可能 —— 使用 Electron Chrome Extension 开源项目 项目地址:https://gitcode.com/getstation/electron-chrome-extension 在现代软件开发领域中，集成与扩展性成为提升用户体验的关键因素之一。今天，我们将深入探讨一个令人兴奋的开源项目——Electron Chrome Extension，它为Ele...
使用Electron DevTools Installer提升开发效率
gitblog_00085的博客
05-15 457
使用Electron DevTools Installer提升开发效率 项目地址:https://gitcode.com/MarshallOfSound/electron-devtools-installer 项目介绍 Electron DevTools Installer 是一个强大的工具，旨在简化在Electron应用中安装和管理DevTools扩展的过程。这个库让你免去下载、查找文件夹和配置...
Electron.js指南——DevTools扩展
幽灵 逐梦--专栏
10-20 1230
DevTools扩展 Electron支持Chrome DevTools扩展程序，该扩展程序可用于扩展devtools的功能，以调试流行的Web框架。 如何加载DevTools扩展 本文档概述了手动加载扩展程序的过程。您也可以尝试使用electron-devtools-installer这个第三方工具，直接从Chrome WebStore下载扩展程序。 要在Electron中加载扩展程序，您需要在Chrome浏览器中下载扩展程序，找到其文件系统路径，然后通过调用BrowserWindow.a..
Electron 配置 Vue Devtools
lijianfei1989的专栏
10-18 1936
Electron + Vue3 + Vite + TypeScript，Vue Devtools官网配置方案因本人配置方式不对，测试无效，网上找了些资料，记录留存。
为 Electron 安装 vue-devtools 扩展
grootbaby
11-07 2519
在SPA逐渐成为构建优秀交互体验应用的主流方式后，使用 Electron开发跨平台的软件是一个优秀的解决方案。 下面简单介绍一下 Electron-vue 安装 vue-devtool的方式。 安装步骤 1、下载 vue-devtools.crx，把文件名后缀改成 zip后解压放在项目工程目录下 （找不到或者懒得下可以直接克隆我的仓库后，把这个文件夹给复制出来，我已经解...
推荐一款神器：`electron-devtools-installer`
gitblog_00026的博客
04-09 425
推荐一款神器：electron-devtools-installer 项目地址:https://gitcode.com/GPMDP/electron-devtools-installer 在Web开发的领域中，Electron框架为开发者提供了一种构建跨平台桌面应用的强大工具。而electron-devtools-installer是一个针对Electron应用的辅助库，让你能够轻松地在你的Ele...
electron+vue(react、angular)如何安装DevTools
feel
11-26 1347
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 开发中 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入
【electron】手把手教你在 electron 环境下使用 vue-devtools，附详细报错解决办法
kinghzking的专栏
10-12 2738
Vue Devtools 是一款由 Vue.js 官方开发的开发工具，旨在帮助开发者更轻松地调试和开发 Vue.js 应用程序。这个问题半年前就发现了，当时没有解决掉，后来经常想到该问题，最近想到通过Edge浏览器可以下载最新的插件，省去了各种可能遇到的坑，最终解决问题。总之，Vue Devtools 是 Vue.js 开发者必备的工具之一，可以帮助开发者更高效地开发和调试 Vue.js 应用程序。遇到问题，多搜索，多思考，结合现有知识，找到合适的方案。这个就不说了，简单方便，但是获取的不一定是最新的。
vue electron 下载Vue-devtools ChromeExtension扩展失败
zxstrive的专栏
07-26 1789
vue electron 下载Vue-devtools ChromeExtension扩展失败
devtron：[寻找维护人员] Electron DevTools扩展
02-04
扩展程序可帮助您检查，监视和调试应用程序。 产品特点 需求图可帮助您在主流程和渲染器流程中可视化应用程序的内部和外部库依赖关系。 IPC监视器可跟踪和检查渲染器与应用程序中的主要进程之间发送和接收的消息。...
electron-devtools-installer:确保Chrome DevTools扩展到Electron的简便方法
04-29
Electron DevTools安装程序 这是将DevTool扩展安装到Electron中的简便方法。 您不必费心去下载扩展程序，找到正确的文件夹，然后为每个人的计算机配置路径。安装npm install electron-devtools-installer --save-dev...
vue.js devtools
03-30
7. **调试Vue Native应用**：Vue.js Devtools也支持与Electron或Cordova结合的Vue原生应用，使你能够在桌面或移动环境下调试Vue代码。 8. **安装和更新**：Vue.js Devtools可以通过Chrome Web Store轻松安装，并...
vuedevtools安装.zip
10-31
1. 首先，你需要在浏览器中安装Vue DevTools扩展。对于Chrome和Firefox，可以分别从Chrome Web Store和Mozilla Add-ons Marketplace搜索“Vue.js Devtools”并添加到浏览器。 2. 安装完成后，打开一个新的或已有的...
Vue.js devtools-用于调试Vue.js应用程序的Chrome devtools扩展。-Vue.js开发
05-27
vue-devtools安装获取Chrome扩展/（beta通道）获取Firefox插件/（beta通道）获取独立的Electron应用程序（与任何vue-devtools安装一起使用）获取Chrome扩展/（beta通道）获取Firefox插件/（beta）通道）获取独立的...
Electron 简介
热门推荐
天空之外
04-30 1万+
本教程我们来学习 Electron 的基础知识，下面我们先来学习一下什么是 Electron。 Electron是什么 Electron 是是 GitHub 开发的一个开源框架。它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。 Electron 可以用于构建具有 HTML、CSS、JavaScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序可以打包到 Mac、Windows 和
Electron 安装
天空之外
05-06 5131
本节我们来学习 Electron 的安装。要安装 Electron ，首先需要保证本地已经安装好了 Node.js。 Node.js的安装 Node.js 的官网地址为：https://nodejs.org/en/，进入官网页面如下所示： 推荐下载 LTS 版本，下载好后，执行安装程序，根据引导完成安装即可。 安装完成后，我们需要确认 Node.js 是不是可以正常工作。可以通过在命令行工具中输入如下命令来检测是否安装成功： $ node -v $ npm -v 如下图所示，如果这两个命令均显示版本号则
Electron 键盘快捷键
天空之外
05-28 2842
本节我们学习 Electron 中的键盘快捷键。在 Electron 中，键盘快捷键被称作加速器，它们能够分派到运用程序菜单中的操纵上，也能够全局分派，所以纵然你的运用程序没有取得键盘核心，它们也能够被触发。 Electron 中有主进程和渲染进程这两种进行，所以我们可以分别在主进程中注册快捷键和在渲染进程中注册快捷键。 主进程注册快捷键 在主进程注册快捷键有两种方式，一种是利用 Menu 模块来模拟快捷键，二就是全局快捷键。 本地快捷键 我们可以使用 Electron 中的 Menu 模块来配置键盘快捷
vue-devtools.zip
06-22
vue-devtools.zip 是一个 Vue.js 开发者工具的压缩包，包括本地端调试器和浏览器扩展。它可以帮助开发者调试 Vue 应用程序，提供强大的调试工具，如实时编辑，状态快照，事件跟踪以及细粒度排序和筛选组件树等功能。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值