vue-devtools 具体使用配置详情
- 安装
- - chrome浏览器
  - firefox浏览器
  - electron-开发 electron-vue项目添加vue-devtools插件
- 启用配置
- devtools使用
- - 组件结构、组件实时数据、查看DOM、打开组件到编辑器
  - vuex 历史记录
  - 事件发生历史记录
  - 路由发生历史记录
  - 组件性能监测
  - 组件性能查看组件使用次数
  - vue-devtools插件错误

vue-devtools 具体使用配置详情

vue-devtools 是vue开发者常用的开发工具，方便跟踪实时数据、组件等变化及查找； vuex、事件、路由等历史追溯。

安装

chrome浏览器

vue-devtools 安装方式有三种，请按当前自己的情况使用：

编译安装
1. 到github下载：
```
下载相应的包 5.1.1及以下版本 或 5.2.0及以上版本  vue-devtools tag 5.2.0及以上版本有使用本地私有包的骚操作，所以以下会有特别说明。
```
2. 在vue-devtools目录下安装依赖包
```
cd vue-devtools
npm install
```
3. chrome插件参数配置
  manifest.json参数详解
  vue-devtools 5.1.1及以下版本文件位置: 项目根目录下\shell\chrome\manifest.json
  vue-devtools 5.2.0及以下版本文件位置: 项目根目录下\packages\shell-chrome\manifest.json
```
  ..."devtools_page": "devtools-background.html","background": {"scripts": ["build/background.js"],"persistent": false  // 改为true  使vue-devtools插件能够常驻后台  也可以不改},...
```
4. 编译代码
  vue-devtools 5.1.1及以下版本
```
npm run build
```
  vue-devtools 5.2.0及以后版本有本地私有包的骚操作，需要根据以下操作执行
  
  待更新
5. 打开谷歌浏览器的设置—>扩展程序，并勾选开发者模式
6. 然后将刚刚编译后的
  vue-devtools 5.1.1及以下版本工程中的shells目录下，chrome的整个文件夹直接拖拽到当前浏览器中，并选择启用，即可将插件安装到浏览器。
  vue-devtools 5.2.0及以后版本 待更新
通过下载安装包
1. 访问该地址：vue调试工具插件，vue调试工具chrome新版插件下载vue调试工具插件。直接点击推荐下载，相关文件就会下载下来。
2. 打开谷歌浏览器，地址栏输入chrome://extensions 或者点击右上角 ==》选择更多工具按钮 ==》选择扩展程序
  
  然后将之前解压的Vue.js Devtools_5.3.3_chrome.zzzmh.cn.crx文件拖拽到扩展程序界面，按照对应提示点击确认即可。
通过chrome网上应用商店
商店地址: https://chrome.google.com/webstore/category/extensions?hl=zh-CN 查找安装

firefox浏览器

打开firefox浏览器，使用快捷键【Ctrl+Shift+A】打开组件管理列表，并搜索vue

点击安装
重启浏览器打开项目

vue-js-devtools - firefox扩展组件地址

electron-开发 electron-vue项目添加vue-devtools插件

如果有编译成功的或chrome安装过的找到资源路径：
chrome 查找如下

＃mac
/Users/zhang/Library/Application Support/Google/Chrome/Default/Extensions/上边的ID
# windows
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\{插件ID}\

Chrome 插件ID查看

electron插件管理
注意：只有在app模块的ready事件触发之后，才可以调用BrowserWindow.addDevToolsExtension API

佐料菜已经准备齐全准备下锅,在electron主线程里面：

### 本人脸黑 其他地址加载路径有问题，被迫将插件拷贝到项目内部
const { app, BrowserWindow... } = require('electron')
const path = require('path')
const dev_tools_path = path.join(__dirname, '/5.3.3_0')
....
// 加载扩展
app.on('ready', () => {// 新增的：安装vue-devtoolsBrowserWindow.addDevToolsExtension(dev_tools_path);
});

重新启动Electron项目就能看到熟悉的界面了

启用配置

配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。

// Before you create app
Vue.config.devtools = process.env.NODE_ENV === 'development'// After you create app
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor;// then had to add in ./store.js as well.
Vue.config.devtools = process.env.NODE_ENV === 'development'

devtools使用

组件结构、组件实时数据、查看DOM、打开组件到编辑器

为了能在浏览器中直接打开组件到编辑器中编辑需要有如下配置（莫名的mac不用配置）：
1.在Vue项目中，安装launch-editor-middleware软件包并修改您的Webpack配置
npm i -D launch-editor-middleware
2. 导入包
var openInEditor = require('launch-editor-middleware')
3. 在该devServer选项中，注册/__open-in-editor HTTP路由
devServer: { before (app) { app.use('/__open-in-editor', openInEditor()) } }
4. 配置要启动的编辑器。您还可以使用editor选项指定编辑器应用程序。请参阅支持的编辑器列表。
openInEditor('code')
官方配置原文

vuex 历史记录

事件发生历史记录

路由发生历史记录

组件性能监测

组件性能查看组件使用次数

vue-devtools插件错误

新版vue devTools(6.0.0及以上)在旧项目中打开会出现vuex报错，关闭调试工具时正常
vue.esm.js?efeb:627 [Vue warn]: Error in v-on handler: “TypeError: sub is not a function”
TypeError: sub is not a function
at eval (vuex.esm.js

解决方法是对插件进行设置，具体设置如下：
1、打开调试工具->选择vue面板->选择Vuex插件设置

2、设置 Plugin settings 禁用 Legacy Actions