electron 中如何安装或更新 vuejs-devtool 最新稳定版

手上正在开发的项目是vue3.0

通过添加 vue-cli-plugin-electron-builder 插件生成 electron 项目，项目在开发过程中发现 beta版的 vuejs-devtool 果然不稳定会出现卡死现象

vuejs-devtool 开发工具 是由 vue-cli-plugin-electron-builder 内引用 electron-devtools-installer 来安装生成

由此产生了更新 electron-devtools-installer 来达到更新 vuejs-devtool 的目的

结果失败了。查了 electron-devtools-installer 插件项目源码后才发现，原来1年没更新了，源文件中引入的vuejs-devtool一直就是 beta 版

还好源码比较简单，就三个主要文件

那就手动来更新一波

=========================================================================
分析：
插件在 background.js 内默认生成如下代码，就是为了在开发启动项目时安装 vuejs-devtool 的

import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'

app.on('ready', async () => {
    if (isDevelopment && !process.env.IS_TEST) {
      // 安装 vue devTool，
      try {
        await installExtension(VUEJS3_DEVTOOLS)
      } catch (e) {
        console.error('Vue Devtools failed to install:', e.toString())
      }
    }
}）

插件安装的 vuejs-devtool 版本默认安装的是 beta 版

beta版不稳定，在数据量多的页面时会导致开发过程中切换到 vuejs-devtool timeline 标签下调试的时候会卡死整个调式工具！！！,

并且重启项目 electron 打开的 vuejs-devtool 依然还是在卡的界面，只能通过修改 .loadUrl() 加载一个普通简单或空白网页来重新打开 vuejs-devtool 插件
非常麻烦

好消息是 vuejs-devtool 已有稳定版，我们需要通过 installExtension 手动安装最新版 vuejs-devtool

electron-devtools-installer 官网也有说明

https://github.com/MarshallOfSound/electron-devtools-installer

----------------------------------------------------------------------------

插件帮我们做了以下步骤
源码就在项目的 src/downloadChromeExtension.ts 内

1. 在 store.google.com 找到相应的插件
2. 下载并解压 ctx 包放到本地路径
3. electron识别出插件

----------------------------------------------------------------------------
下载 .crx 插件包解压后的路径是

还有

如果没有讲科学的上网，开发时打开 yarn electron:serve 启动 有可能会非常慢，通过源码我们会发现
这一句
downloadChromeExtension(chromeStoreID, forceDownload, attempts - 1)
如果失败会重复5次尝试下载，这是导致启动慢的原因。

一定要上网一定要讲科学

我们需要改的就是在 store.google.com 上找到插件 vuejs-devtool 对应的插件 id 如图地址栏红框内的就是 chrome 插件的 id

把 chrome 插件的 id 按以下方式传给 installExtension

installExtension({ id: 'nhdogjmejiglipccpnnnanhbledajbpd', electron: '>=1.2.1' })

完成，运行后插件会自动从下载并安装

成功运行 yarn electron:serve 的画面, 可以看到 vuejs-devtool 更新了出现了新的欢迎界面 ^_^

最后用 electron-devtools-installer 插件安装或更新其它开发插件如：React Developer Tools 也是也是照猫画虎，道理一样的

---

转载入注明博客园池中物 willian12345@126.com sheldon.wang

github: https://github.com/willian12345