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 打開選項允許訪問文件網址 。
🔗：