Vue.js devtools：调试vue.js应用的浏览器扩展 Chrome插件

Vue.js devtools插件功能简介

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展。做前端开发的IT工程师应该比较熟悉这款工具，可以边测边栏窗格中的页面，边检查代码。

Vue.js devtools插件下载安装

Vue.js devtools插件哪里下载？你可以从chrome应用商店里找到Vue.js devtools插件。

Vue.js devtools插件怎么安装？
1. 如果你能够打开chrome应用商店，并且可以找到alexa流量排名插件，那么直接点击“添加至chrome”，如下图所示：


2.如果你的chrome应用商店无法打开，你从本站或者其他途径获得了Vue.js devtools插件，那么就选择离线安装该插件。

Vue.js devtools插件使用说明

Vue.js devtools插件怎么使用？
1.Vue.js devtools插件在chrome浏览器安装成功后，在浏览器的右上角插件图标。
2.修改文件:扩展程序所在的路径/manifest.json（可以通过在chrome浏览器的地址栏中输入：chrome:version查看个人资料路径，找到其中的Extensions并找到相应的插件文件夹，即可找到manifest.json文件），如下图所示：

3.打开vue项目（普通网页该插件不可用）,在控制台（F12打开开发者工具）选择vue：

4.然后就可以操作组件查看信息变化(这里以分页组件为例，分别查看第一页和最后一页)，如下图所示：

 

需要对vue项目开启debug mode，可以通过在main.js中添加：

 

Vue.config.devtools = true 

开启调试模式。