Electron开发使用Vue Devtools

Stella981 等级 349 0 0

转自 [https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/]

2.2 安装步骤 首先在Chrome中安装Vue Devtools; 在Chrome中打开about:extensions,并且开启开发者模式,这样就可以获取扩展程序的ID,记住这个ID,例如我这边的值是nhdogjmejiglipccpnnnanhbledajbpd,下面需要用到。 打开文件管理器或者Finder,导航到Chrome保存扩展程序的文件夹: 在Windows上:%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions 在Linux可能是(看不同的版本): /.config/google-chrome/Default/Extensions/ ~/.config/google-chrome-beta/Default/Extensions/ ~/.config/google-chrome-canary/Default/Extensions/ ~/.config/chromium/Default/Extensions/ 在Mac上是:/Library/Application Support/Google/Chrome/Default/Extensions 在上面的文件夹中找到刚才获取的ID对应的那个文件夹,打开,记录下文件夹中存在的文件夹名字,一般是版本号。这样就获取了最终需要使用的文件夹地址。例如我这边这个地址是:~/Library/Application Support/Google/Chrome/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/3.1.2_0。 在Electron应用中添加如下代码:

app.on('ready', createWindow)

function createWindow() {
    ...
    // Open the DevTools.
    if (process.env.NODE_ENV === 'development') {
           BrowserWindow.addDevToolsExtension('/Users/ybx/AppData/Local/Google/Chrome/User Data/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/4.1.5_0')
    }
    ...
}
收藏
评论区

相关推荐

【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
Vue3现状报告及未来规划
近况158 万周活跃用户(通过 devtools 插件来统计),940 万的月下载量。对比去年Devtools:110 万 158 万(+43.6%) NPM:620 万 940 万(+51.6%)Vue 3.0 One Piece自那之后,Vue3 逐渐趋于稳定,继续探索用户体验。Vue Router 4.0已经稳定。Vuex 4.0已经稳定。生态慢慢
electron:桌面应用程序的革命
“ 你也许不了解electron,但你应该了解或使用过atom、vscode、xmin zend,没错他们所使用的开发技术就是electon,通过前端技术开发桌面应用程序,刚开始接触electron时,考虑最多的是性能问题,不过作为一个vscode、xmin zen重度使用者的我来说,基本上对其性能的担心减少了很多,并且发现了基于vue框架构造electro
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持
(原)Electron+vue 应用实战
1.electron架构思考 ============== 在做electron桌面开发中,Electron+vue当下算是性价比的比较高的。但是electron算是小众开发,遇到问题,基本上就是掉进深坑,爬好久才出来。 为了做一个项目,我翻遍了国内好多网站。看到一篇好的文章。[Electron 应用实战 (架构篇)](https://www.oschi
3、electron打包生成exe文件
打包方式1:DOS窗口命令打包 --------------- DOS 下,输入 npm install electron-packager -g**全局安装**我们的打包神器: cnpm install electron-packager -g 在项目文件夹下面,也就是根目录下面打开DOS执行打包命令: electron-packa
AudioContext方法播放音频
`const fs = require('fs'); const electron = require('electron'); const dataPath = (electron.app || electron.remote.app).getPath('userData'); const fPath =` ${dataPath}/file/unzip\`
Electron中通过asar打包后ffi
在使用Electron开发完应用程序后,需要打包生成各平台对应的可执行文件供用户使用。 这里以Mac平台为例,最简单的打包方案是使用**electron-packager**来对应用程序进行打包操作,如执行最简单的指令`electron-packager .`执行完成后会在同级目录生成`${appName}-${platfomr}-${arch}`目录如e
Electron开发使用Vue Devtools
转自 \[[https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Forchidflower.oschina.io%2F2017%2F03%2F29
Electron开发实战之记账软件20——主进程调试
> 代码仓库: [https://github.com/hilanmiao/LanMiaoDesktop](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fhilanmiao%2FLanMiaoDesktop "https://github.com/hilanmia
Electron环境配置
最近好多Mac桌面程序都是套了个Electron的壳,之前玩过node-webkit,所有想体验一下,但是在配置环境中遇到了一些问题,主要是Npm的连接问题,还有Electron安装的问题,通过下面两步就可以安装,记录一下。 1. npm配置淘宝源 npm config set registry https://registry.npm.tao
Electron踩坑记录
心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 安装 -- 在国内安装`electron`的时候,可能会因为网络原因遇到卡在`Building fresh packages...`(yarn)或者是卡在`nod
vue dev
原文链接: [vue dev-tools 源码安装](https://my.oschina.net/ahaoboy/blog/3044489) 下载 ![](https://oscimg.oschina.net/oscnet/39bf20ca599d466fb1a50a7e64312e4fd90.jpg) 解压后安装依赖 cnpm i
vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder)
目标 搭建vue + electron的工程 主要步骤 构建初始化工程 创建vue3 工程使用vuecli 工具创建一个vue3工程vue ui使用网页创建,注意vue版本选3.0,构建工具选择yarn::: tip 选择yarn工具:::::: tip 手动选择依赖:::::: tip 开启vuex vuerouter eslint less 等功能
PDF.js Electron Viewer
模板开始 Electron React 项目。bash 获取模板git clone depth1 \https://github.com/electronreactboilerplate/electronreactboilerplate \electronpdfviewercd electronpdfviewer 设定仓库git remote seturl