vue-devtools 具体使用配置详情

vue-devtools 具体使用配置详情

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

安装

chrome浏览器

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

1. 编译安装

   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及以后版本 待更新

2. 通过下载安装包

   1. 访问该地址：vue调试工具插件 ，下载vue调试工具插件。直接点击推荐下载，相关文件就会下载下来。

   2. 打开谷歌浏览器，地址栏输入chrome://extensions 或者 点击右上角 ==》选择更多工具按钮 ==》选择扩展程序

      然后将之前解压的Vue.js Devtools_5.3.3_chrome.zzzmh.cn.crx文件拖拽到扩展程序界面，按照对应提示点击确认即可。

3. 通过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-devtools
  BrowserWindow.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 历史记录

事件发生历史记录

路由发生历史记录

组件性能监测

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