Vue Devtools大法好
這是一篇小白friendly教程
Vue Devtools是一款谷歌瀏覽器插件，專門為調試vue而設計。假設你做了一個vue應用，當你在調試的過程中，打開的控制台是這樣的：
滿眼都是data-v的這種標簽，你的組件在什么位置，可能要一個一個標簽點開之后找，你的應用的數據是什么狀態，可能要靠console打印出來，給我們的調試帶來了很大的不便。。那有沒有什么好辦法呢？燈燈燈燈！就是這款Vue Devtools。
安裝
打開這個Vue Devtools，然后安裝。安裝完成后，按F12，然后就發現下面這個多出來的標簽：
沒錯，就是它了，假如在一個vue項目下打開，就會看到：
看到的是組件樹,而不是DOM樹，旁邊還有選中組件的data數據,computed等，以及組件所在文件夾的路徑，一下子就看透了這個組件，是不是覺得豁然開朗😄。
vuex選項卡和time travel
右邊除了components組件選項卡，還有vuex選項卡，vuex是vue的核心插件之一，用來管理應用狀態。點進去一看，app的狀態一目了然有沒有：
值得一談的還有強大的time travel功能，可以看到在調試過程中發生的狀態變化，比如在上面這張圖中，vuex中有一個save_diary的操作，是一個向vuex的store對象的commitMutation,用來保存輸入的md字符串。將應用從初始狀態到后來的狀態都記錄了下來。
events
events是用來監視組件的自定義事件的。以我的todolist小項目為例，如下圖所示：
當我點擊buttonA時，comepoent組件的視圖由todolist組件變成write組件(官方教程：動態組件)。組件樹如下：
由於buttonA屬於newitem組件下的，所以通過newitem組件來切換另一個組件的視圖。需要自定義一個事件，這里稱為toggleview事件，代碼如下：
template(app.vue文件中監聽toggleview事件)
<newitem @toggleview='toggleview'></newitem>
script:(newitem組件觸發toggle view事件)
toggle: function() {
this.iswrite = !this.iswrite;
this.$emit('toggleview');
}
//toggle函數由buttonA觸發
點擊buttonA,看到vue devtools中的events選項發生變化（將newitem組件選中）：
事件面板中標出了事件的來源，事件名，類型等信息。
警察叔叔，事情就是這樣的。