第十三节：Vue Devtools——vue开发调试神器

工欲善其事，必先利其器，vue2.0进阶系列的知识更接近我们的实际开发所需，在开发过程中，有个好的调试工具是事半功倍的，Vue Devtools就是我们选择的调试工具，它是一款chrome浏览器的插件。所以，我们先去chrome商店找到它并安装。

安装

用chrome浏览器访问以下地址，就可以在chrome商店找到我们的Vue Devtools插件。

地址：

[url=]https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd[/url]

访问后我们会看到：

点击右上角“添加至CHROME”,开始安装。

浏览器会对我们进行询问提示，我们选择：“添加扩展程序”。

安装成功后，浏览器会提示我们

就这么简单！接下来我们就来动手写点东西，简单体验一下Vue Devtools工具的方便。

Demo案例

同样我们用WebStorm创建一个html页面，并引入vue2.0+开发版的CND资源，我们使用官网推荐的unpkg，它会保持和 npm 发布的最新的版本一致。

CDN地址：

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

我们利用vue简单的实现一个加法计算器，效果如下：

下面附上我们的代码，Html部分：

1. <div id="app">
   
2.     <input  @keyup="calculate"
   
3.             type="text" 
   
4.             v-model="augend">
   
5.     <span>+</span>
   
6.     <input  @keyup="calculate" 
   
7.             type="text" 
   
8.             v-model="addend">
   
9.     <span>=</span>
   
10.     <input  type="text" 
    
11.             :value="sum">
    
12.     <br>
    
13.     <br>
    
14.     <button @click="reset">
    
15.     清空数据
    
16.     </button>
    
17. </div>

复制代码

Javascript部分：

1. <script>
   
2.     const app = new Vue({
   
3.      el:"#app",
   
4.      data:{
   
5.          augend:'',
   
6.          addend:'',
   
7.          sum:''
   
8.      },
   
9.      methods:{
   
10.          calculate(){
    
11.              this.sum = Number(this.augend) 
    
12.                       +
    
13.                        Number(this.addend);
    
14.          },
    
15.          reset(){
    
16.             this.sum = this.augend 
    
17.                      = this.addend = '';
    
18.          }
    
19.         }
    
20.     });
    
21. </script>

复制代码

具体的代码我们不展开讲解，也十分简单，只要你学习我们之前的教程就能看得懂，我们这里主要演示Vue Devtools调试工具。

我们访问这个页面，并打开开发者工具（F12）,浏览器会检测到我们的页面使用了Vue框架，就会出现Vue的pannel面板。

Components选项卡

打开Vue 面板，点击Components选项卡，我们会看到这个页面的组件和它们的所有状态，一览无余。

当我们的状态改变的时候，Vue Devtools也会及时更新，相当的方便。

（等等我，我是gif，加载有点慢）

Vuex选项卡

Vuex是Vue的核心插件之一，专门用来管理组件和应用的状态，在后期我们学习到Vuex的时候就用到这个调试功能，今天在这里先不展开讲解。

Events 选项卡

Events选项卡用来监视我们自定义的事件，（注意：不是原生的事件），它可以清晰地看到你触发的每一个事件的详细信息。

假设我们在上面的代码基础上，给reset方法加上了一个自定义事件：“reset”。

注：这句代码对于业务功能上来说没有任何意义，仅用于演示Events的作用。

1. reset(){
   
2.   this.$emit('reset');
   
3. }
   

复制代码

当我们点击按钮“清空数据”的时候，就会触发自定义的reset事件，这个时候我们再看看Events的选项卡。

（等等我，我是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

需要的同学自行拿走吧!~