vue-devtools
🔧 检视组件结构
我们可以使用 vue-devtools 很方便地检验页面的组件结构，包括组件的列表、嵌套关系，以及每个组件的内部数据成员的值。为此，我们做一个简单的布局结构，界面如下：
其中嵌套了一个 header 和一个 content 组件，content 组件内还有 c1，c2 两个组件嵌套其中。嵌套结构为：
->ROOT
->header
->content
->c1
->c2
代码：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<hdr></hdr>
<ctnt><c1></c1><c2></c2></ctnt>
</div>
<script>
var hdr = {
'template':'<div>{{title}}</div>',
data () {
return {title: 'header'}
}
}
var ctnt = {
'template':'<div>{{title}}<slot></slot></div>',
data () {
return {title: ''}
}
}
var c1 = {
'template':'<div class="c1">{{title}}</div>',
data () {
return {title: 'c1'}
}
}
var c2 = {
'template':'<div class="c2">{{title}}</div>',
data () {
return {title: 'c2'}
}
}
var app = new Vue({
components:{
hdr,ctnt,c1,c2
}}
)
app.$mount('#app')
</script>
<style type="text/css">
.c1{
border: solid 1px blue ;
float: left;
}
.c2{
border: solid 1px green;
float: left;
}
</style>
可以使用 chrome 直接打开文件，并记得在插件内配置 vue-devtools，允许它访问文件网址。随后打开 Chrome devtools，点开 vue 面板。可以看到：
- 组件的树形结构在左边展示。
- 点击此树形结构的组件项目，可以在右侧看到组件的数据成员值，且在用户界面上，对应的组件会被加亮。
vue-devtools 检视组件的能力，查看 vue 组件内部，从而可以帮助我们调试程序。
🔧 检视 vuex 的时间旅行能力
vuex 时间旅行能力：
- 通过vuex的执行的操作会被记录下来。
- 可以选择操作记录，返回回退到此操作时的状态。
因为 vuex，状态的时间旅行称为可能。举例说，比如我的一个状态值为 0，做了四次加 1，如果我选择回退到第二次操作，那么状态值会恢复到 2。
使用一个简单的 web 服务把此页面共享出去。
// vuex.html
var http = require('http');
var fs = require('fs');
var file = 'vuex.html'
var index = fs.readFileSync(file);
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(index);
}).listen(8080);
你需要首先安装 vue-devtools ，然后访问 localhost:8080，可以看到 vue-devtools 的 V 型图标从默认的灰色变成彩色，点击此图标，会提示：
Vue.js is detected on this page. Open Chrome Devtools and look for the Vue panel.
按此提示，打开 Chrome Devtools，查看 Vue 面板，可以在右上方看到 Vuex。点击它就可以开始状态的时间旅行了。
- 点击按钮
+四次，可以看到左边的列表（状态列表）变成 5 条，从 Base State 到 4 个 inc。界面数字变成 4。 - 点击第二个
inc，就可以看到状态列表内变成 3 条，从 Base State 到 2 个 inc。 - 而界面上的数字变成
2。 - 多点几次可以看到状态值
counter确实是可以在多个操作中拣选的。
注意：这次我们使用了一个简单的 node 服务器来伺服 vuex.html，而不是直接通过 file:// 协议打开文件。后者确实可以使用，但是 vue-devtools 并不能检测到此 demo 采用了 vue。如果想要它可以检测的话，必须在 chrome 插件页针对 vue-devtools 打开选项允许访问文件网址 。
🔗：