Vue Devtools——vue開發調試神器

工欲善其事，必先利其器，vue2.0進階系列的知識更接近我們的實際開發所需，在開發過程中，有個好的調試工具是事半功倍的，Vue Devtools就是我們選擇的調試工具，它是一款chrome瀏覽器的插件。所以，我們先去chrome商店找到它並安裝。

安裝

用chrome瀏覽器訪問以下地址，就可以在chrome商店找到我們的Vue Devtools插件。

地址：

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

訪問後我們會看到：

點擊右上角「添加至CHROME」,開始安裝。

瀏覽器會對我們進行詢問提示，我們選擇：「添加擴展程序」。

安裝成功後，瀏覽器會提示我們

就這麼簡單！接下來我們就來動手寫點東西，簡單體驗一下Vue Devtools工具的方便。

Demo案例

同樣我們用WebStorm創建一個html頁面，並引入vue2.0+開發版的CND資源，我們使用官網推薦的unpkg，它會保持和npm發布的最新的版本一致。

CDN地址：

https://unpkg.com/vue@2.3.3/dist/vue.js

我們利用vue簡單的實現一個加法計算器，效果如下：

GIF/1K

下面附上我們的代碼，Html部分：

type="text"

v-model="augend">

+

type="text"

v-model="addend">

=

:value="sum">

清空數據

Javascript部分：

constapp=newVue({

el:"#app",

data:{

augend: ,

addend: ,

sum:

},

methods:{

calculate(){

this.sum=Number(this.augend)

+

Number(this.addend);

},

reset(){

this.sum=this.augend

=this.addend= ;

}

}

});

具體的代碼我們不展開講解，也十分簡單，只要你學習我們之前的《Vue2.0基礎》教程就能看得懂，我們這裡主要演示Vue Devtools調試工具。

我們訪問這個頁面，並打開開發者工具（F12）,瀏覽器會檢測到我們的頁面使用了Vue框架，就會出現Vue的pannel面板。

Components選項卡

打開Vue面板，點擊Components選項卡，我們會看到這個頁面的組件和它們的所有狀態，一覽無餘。

當我們的狀態改變的時候，Vue Devtools也會及時更新，相當的方便。

GIF/2K

（等等我，我是gif，載入有點慢）

Vuex選項卡

Vuex是Vue的核心插件之一，專門用來管理組件和應用的狀態，在後期我們學習到Vuex的時候就用到這個調試功能，今天在這裡先不展開講解。

Events選項卡

Events選項卡用來監視我們自定義的事件，（注意：不是原生的事件），它可以清晰地看到你觸發的每一個事件的詳細信息。

假設我們在上面的代碼基礎上，給reset方法加上了一個自定義事件：「reset」。

註：這句代碼對於業務功能上來說沒有任何意義，僅用於演示Events的作用。

reset(){

this.$emit( reset );

}

當我們點擊按鈕「清空數據」的時候，就會觸發自定義的reset事件，這個時候我們再看看Events的選項卡。

GIF/2K

（等等我，我是gif，載入有點慢）

Events選項卡會及時地展示我們所有觸發的自定義事件的詳情，對於調試十分方便。

Vue Devtools的安裝和使用並不難，大家先按照教程的方式先把它安裝並熟練，後面的章節我們會經常使用到這個調試Vue的神器。

WebStorm安裝包

在上一篇WebStrom主題包的文章中留言的同學說要一個能支持Vue語法的WebStorm安裝包，只要下載最新版的WebStorm即可支持，無需安裝任何插件。

由於時間關係，我已經為大家從jetbrains官網上下載了正版的安裝包。

Window版本

鏈接:http://pan.baidu.com/s/1eRI47IU

密碼:gbsf

Mac版本

鏈接:http://pan.baidu.com/s/1skJ4cWl

密碼:nz8y

需要的同學自行拿走吧！

推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！