工欲善其事，必先利其器，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简单的实现一个加法计算器，效果如下：

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

<div id="app">
    <input  @keyup="calculate"

type="text" 

v-model="augend">
    <span>+</span>
    <input  @keyup="calculate" 

type="text" 

v-model="addend">
    <span>=</span>
    <input  type="text" 

:value="sum">
    <br>
    <br>
    <button @click="reset">

    清空数据

</button>
 </div>

Javascript部分：

 <script>    const app = new Vue({     el:"#app",     data:{         augend:'',         addend:'',         sum:''     },     methods:{         calculate(){             this.sum = Number(this.augend)                       +                       Number(this.addend);         },         reset(){            this.sum = this.augend                      = this.addend = '';         }        }    }); </script>

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

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

Components选项卡

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

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

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

Vuex选项卡

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

Events选项卡

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

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

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

 reset(){  this.$emit('reset'); }

当我们点击按钮“清空数据”的时候，就会触发自定义的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

需要的同学自行拿走吧！

推荐

扩展阅读

1.《ECMAScript 6 系列》原创教程

2.《Vue2.0基础系列》原创教程

3.《ECMAScript 6 系列》的 2 套习题

4.《Vue2.0基础系列》的 1 套习题

关于职场

薪资：关于昨天的招聘薪资问题

郑州招聘：招聘前端3~5人

广州招聘：招聘前端2人

资源推荐

其实学好技术并不难，架构师免费分享全网全套最新web前端、JavaScript、HTML5、PHP、数据库……等视频资料！

[总价值超3万！]年薪35万以上的大牛几乎都看了！

加微信: abc15689892 免费领取，由于领取的朋友比较多，所以加微信时一定要备注：555，否则很难通过。