vue-devtools工具的安装和使用

目录

介绍：

1、从github拉取开发工具源码

2、在vue-devtools目录下安装依赖包

3、执行npm run build

4、打开Chrome浏览器，选择更多工具->扩展程序

5、将刚才看到的chrome目录直接拖拽到上述页面中，就可以看到上成功加载了Vue开发工具

6、打开一个Vue应用的页面

介绍：

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

1、从github拉取开发工具源码

2、在vue-devtools目录下安装依赖包

cd vue-devtools

npm install

3、执行npm run build

看到如下界面，表示成功

此时在vue-devtools目录下会出现一个shells目录，其中有一个chrome目录

4、打开Chrome浏览器，选择更多工具->扩展程序

5、将刚才看到的chrome目录直接拖拽到上述页面中，就可以看到上成功加载了Vue开发工具

6、打开一个Vue应用的页面

然后开启对开发工具的支持，此时在原来Chrome的开发者工具中就会出现一个名字为Vue的tab，通过这个tab就可以看到当前Vue应用运行的一些信息，方便进行调试。