electron vue-devtools 安装

首先需要安装vue-devtools 有三种安装方式
- electron-devtools-installer
- 本地chrome插件安装包
- github下载自己打包安装

// electron 13.0版本之后 addDevToolsExtension已经弃用// 改为session.defaultSession.loadExtension // 在 Electron 13 中移除BrowserWindow.addExtension(path)BrowserWindow.addDevToolsExtension(path)// 用...来代替session.defaultSession.loadExtension(path)// 在 Electron 13 中移除BrowserWindow.removeExtension(name)BrowserWindow.removeDevToolsExtension(name)// 用...来代替session.defaultSession.removeExtension(extension_id)// 在 Electron 13 中移除BrowserWindow.getExtensions()BrowserWindow.getDevToolsExtensions()// 用...来代替session.defaultSession.getAllExtensions()

所以之前各种百度出来的方法都不能用了，专门出一个避坑指南！！

electron-devtools-installer

安装 electron-devtools-installer

yarn add electron-devtools-installer

导出模块

import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';

在 ready 事件中注册

app.on('ready', () => {  // ... 其他配置项  installExtension(VUEJS_DEVTOOLS)})

本地chrome插件安装

如果你的本地chrome已经安装过vue-devtools了，并且不想再去github上下载进行打包折腾，那就用这个方法
- chrome://extensions/ 进入插件管理页面，勾选开发者模式，找到对应插件的 id
- 通过 chrome://version/ 可以查看浏览器的信息，浏览器所有插件的路径都在。
- 找到的vue-tools插件id 在插件路径里面的 Extensions 文件夹查找对应的id
- 把里面所有文件都复制到项目中的新建文件夹（你也可以不在项目中新建目录直接贴你本地的目录，协同开发的话添加到项目中比较好，不用每个人都修改配置文件） 然后再 Electron入口文件里面进行配置
```
  // 我是放到项目的根目录 \devTools\chrome\  app.on('ready', () => {    // import { app, BrowserWindow, shell, ipcMain, session } from 'electron'    // 需要引入 session    // BrowserWindow.addDevToolsExtension 已弃用    // 使用session.defaultSession.loadExtension    // 添加vue插件    session.defaultSession.loadExtension(      resolve(__dirname, '../../../devTools/chrome')      // 这个是项目中新建插件目录，把所有的文件都复制进来    )  })
```

然后你就可以在electron上面愉快的使用 vue-devTools了！！！

github下载打包安装

去vue-devtools 下载zip包或者从github克隆vue-devtools

  git clone https://github.com/vuejs/vue-devtools

切换到add-remote-devtools分支，因为main分支没有shells目录，编译需要shells目录

  git checkout add-remote-devtools

然后进行依赖下载

   npm install

修改shells/chrome目录下的manifest.json，将如下的persistent的值由false->true

  // manifest.json  "background": {      "scripts": [        "build/background.js"      ],      "persistent": true  //<=修改后  },

打包

  npm run build

把打包好的\shells目录下面的文件复制到你的项目中新建文件夹

  // 我是放到项目的根目录 \devTools\chrome\  app.on('ready', () => {    // import { app, BrowserWindow, shell, ipcMain, session } from 'electron'    // 需要引入 session    // BrowserWindow.addDevToolsExtension 已弃用    // 使用session.defaultSession.loadExtension    // 添加vue插件    session.defaultSession.loadExtension(      resolve(__dirname, '../../../devTools/chrome')      // 这个是项目中新建插件目录，把所有的文件都复制进来    )  })