Vue(七)：vue-devtools

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 打开选项允许访问文件网址 。

---

????：

• Vue.js 小书
• 上一篇：Vue.js(六)：插件
• 下一篇：Vue.js(八)：webpack