【vue-进阶】你不知道的 vue-devtools

vue-devtools 使用了很长一段时间了，使用过程中发现 vue-devtools 下的 vuex面板功能很厉害，整个页面的状态可以任意切换到之前的一个时间节点，当时只知道时光穿梭这个概念，没有仔细研究，最近决定入坑研究下。

记的之前有个Vue项目的线上bug，由于是线上项目，不能直接使用 vue-devtools 来排查问题，经过探究找到处理办法。相信很有人都有 “如何使用 vue-devtools 查看线上项目” 的疑惑。

日常编程，有些开发者没有翻墙。假如没有翻墙，就不能直接到 chrome 商店搜索 vue-devtools 下载安装，那么 “不翻墙怎样安装 vue-devtools” 呢？

今天就来说说，这些你可能不知道的vue-devtools。

1. vue-devtools 的时间旅行 – time travel

时间旅行是一种很有趣想法。爱因斯坦的广义相对论说，时间旅行实际上是可能的。不过，到目前为止，时间旅行的机器还没有问世。

在前台中，Vuex 借鉴 Flux 单向数据流思想，采用集中式统一管理保存状态。但是这些状态不会随时间改变而变化。为了使状态，可能被捕获、重播或者重现，通过时间来回旅行。尤大开发了 vue-devtools 这样的工具，可以帮助我们的 Vue 应用可以实现这种时间旅行！

保证时光旅行的前提

Vuex 通过以下两个准则实现了这一点：

• 单一的状态树 store
• 只能通过 mutation 更改状态

vue-devtools 的视图面板

vue-devtools 的最新版 5.0beta 版为调试工具又带来新功能，添加了Routing 、Performance、Settings 面板，大大提高了我们的开发调试效率，不得不说是个神器。

v5.0beta

• Components 组件面板: 检查组件、按组件过滤、显示原始的组件名、可编辑组件的data；
• Vuex 状态面板: mutations记录、过滤mutations、state\getters\mutations\actions\props 检查器可折叠
• Events 事件面板: 事件历史、按组件搜索事件；
• Routing 路由面板: 查看路由历史记录、路径变更介绍；
• Performance 性能面板: 每秒帧数帧率、组件渲染的性能图表、组件各生命周期函数的耗时统计和分析；
• Settings 设置面板: 调整工具界面的主题、正规化组件名、调整工具的界面布局。

这次要讨论的时光旅行并是什么新特性，time travel 在 Vuex 状态面板，接下来我们来看看 Vuex 检查器

time travel 时间旅行（划重点）

Vuex 面板上有个神奇的功能：time travel。可以进行时光穿梭是由于，所有的状态变更只能通过 mutation 状态，并且每次状态的改变都会生产一个全新的 state 对象。把每次变更的 state 对象事件都记录下来，展示出一个 mutation 列表，当你想展示什么时间段的状态，只要要切换到那个时间段的 state 对象。

每次产生新state的时候，需要对原state对象进行深拷贝，保证每次状态变更原是state不变，操作新state。

time travel 的内部实现，流程如下。

主要分vue-devtools-master 源码中的 time travel 内部实现（v4.1.5）。

（1）触发time travel

vuex 面板左侧的 mutation 列表，每一行，鼠标放到该行的时候，会显示三个小图标，它们的功能是：commit 这次的 mutation 、重置 mutation 、对这次的状态时光旅行。

点击时钟小图标，触发 vue-devtools-master 2/src/devtools/views/vuex/VuexHistory.vue 下的 timeTravelTo 函数，该操作是一个 action 行为。

（2）触发 action

该 action 在 vue-devtools-master 2/src/devtools/views/vuex/VuexHistory.vue 中：

export function timeTravelTo ({ state, commit }, entry) {  travelTo(state, commit, state.history.indexOf(entry))}function travelTo (state, commit, index) {  const { history, base, inspectedIndex } = state  const targetSnapshot = index > -1 ? history[index].snapshot : base  // 更改当前 mutation 列表的选中行  bridge.send('vuex:travel-to-state', stringify(parse(targetSnapshot).state))  if (index !== inspectedIndex) {    commit('INSPECT', index)  }    // 触发commit 操作  commit('TIME_TRAVEL', index)}

timeTravelTo 调用的时候，执行 travelTo 方法，该方法主要做了两件事：一是告诉 vue-devtools，更改了vuex面板的时光旅行，选中的样式和状态你更改下；二是触发 commit 操作，去触发 mutation。

（3）触发 mutation

这部分的解决在 vue-devtools-master 2/src/devtools/views/vuex/module.js 中：

const mutaions = {'INSPECT' (state, index) {    state.inspectedIndex = index  },'TIME_TRAVEL' (state, index) {    state.activeIndex = index }}const getters = {  inspectedState ({ base, inspectedIndex }, getters) {    const entry = getters.filteredHistory[inspectedIndex]    const res = {}    if (entry) {      res.mutation = {        type: entry.mutation.type,        payload: entry.mutation.payload ? parse(entry.mutation.payload) : undefined      }    }    const snapshot = parse(entry ? entry.snapshot : base)    if (snapshot) {      res.state = snapshot.state      res.getters = snapshot.getters    }    return res  },  filteredHistory ({ history, filterRegex }) {    return history.filter(entry => filterRegex.test(entry.mutation.type))  }}

INSPECT 和 TIME_TRAVEL 会直接更改 inspectedIndex 和 activeIndex，当它们变更的时候会触发getter的 inspectedState 重新计算。确定进行这次的时光旅行，更改状态。

一次完整的时光旅行就完成了，怎样样？这些东西过一遍了解下原理，没想象中那么难吧。

2. 如何使用 Vue Devtools 调试Vue线上项目

线上的vue项目有bug，怎样使用 vue-devtools 调试。

获取Vue实例

通常情况下 vue 的源码都被打包到 vendor.xxx.js 文件中。

• 在chrome开发者工具 Sources 面板，搜索 prototype.$nextTick；
• 在前一行代码上打断点；
• 刷新页面，下一步执行几次;
• 在控制台中保存 vue 实例: dd = t;。

启用 vue-devtools 工具

• 在控制台中执行代码：dd.config.devtools = true; __VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', dd); （不报错继续进行下一步，否则重复第一步，打了断点，多执行几步，保证能获取到Vue实例）
• 关闭控制台，再打开，看到控制台中多了 Vue 面板
• 而后即可以尽情排查问题了。

3. 不翻墙，手动安装 vue-devtools

通常情况下假如我们想对 vue 项目，使用 vue-devtools 工具调试，可以到 chrome 商店，直接搜索 vue-devtools ，下载安装就好了，只是直接从chrome商店下载插件需要翻墙。假如不方便翻墙可以用下面的步骤手动安装。

ended.jpg

• 找到vue-devtools的github项目，克隆到本地；
• 进入到项目根目录，安装依赖 npm install 或者着 cpm install；
• 找到 vue-devtools/shells/chrome/manifest.json 文件，修改 persistent 为 true；
• 编译构建 npm run build；
• 打开chrome浏览器，输入 chrome://extensions 进入扩展程序页面，点击 加载已解压的扩展程序… 选择 vue-devtools>shells>chrome 文件夹 （记得打开开发者模式
• Vue.js devtools 就安装好了，点击扩展应用卡片上的 详细信息，勾选下面的三个选项。

详细信息

参考

Time travel in Redux

[译] 深度详情 Vue DevTools 5.0 新特性

怎么用Vue Devtools调上线的页面