vue调试工具vue-devtools安装及使用

vue调试工具vue-devtools安装及使用

安装方法一

这里以 chrome 浏览器为例：

1、打开 chrome 网上应用店（chrome://settings/?search=应用商店），搜索 vue.js

注：如果打不开页面需要 代理

2. 选择第一个，点击 添加至chrome

3.点击添加扩展程序，安装完成

安装方法二

1.到github下载：

git clone https://github.com/vuejs/devtools

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

cd vue-devtools
cnpm install

3.修改manifest.json文件

把"persistent":false改成true

4.编译代码

npm run build

5.扩展Chrome插件

Chrome浏览器 > 更多程序 > 拓展程序

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

6. vue-devtools使用

vue项目, 打开f12, 选择vue就可以使用了.

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试