Chrome浏览器及electron-vue项目添加vue-devtools插件的方法步骤

Step 1：Chrome浏览器添加vue-devtools插件

① 下载vue-devtools源码压缩包：https://github.com/vuejs/vue-devtools
② 浏览器地址栏输入chrome:version转到关于版本，查看“个人资料路径”（浏览器配置文件的存放位置），将zip中的vue-devtools-dev文件夹解压到该路径下

③ Git Bash进入vue-devtools-dev工程目录，安装依赖：

$ npm install

安装完成后编译程序：

$ npm run build

编译成功后，在目录\vue-devtools-dev\shells\chrome\下找到manifest.json文件，将"persistent": false改为"persistent": true

④ 浏览器地址栏输入chrome://extensions转到扩展程序，启用“开发者模式”，点击“加载已解压的扩展程序”按钮，选择目录\vue-devtools-dev\shells\下的chrome文件夹，插件添加成功！

Step 2：electron-vue项目添加vue-devtools插件

① 在项目目录\ev-demo\src\main\下找到index.dev.js文件，添加2行代码：

const { BrowserWindow } = require('electron')

BrowserWindow.addDevToolsExtension('C:/Users/89693/AppData/Local/Google/Chrome/User Data/Default/vue-devtools-dev/shells/chrome')
// chrome文件夹所在的完整路径地址

② 运行项目，控制台出现Vue标签，即可使用vue-devtools啦！

---

以上。