【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调上线的页面
发表评论 (审核通过后显示评论)：