vue调试工具dev-tools安装
另外半日关注赞赏支持vue调试工具dev-tools安装
先导
vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。
第一步：
我们可以先从github上找到vue-devtools的项目，下载到本地。下载vue-devtools链接。
克隆方法：git clone github.com/vuejs/vue-d…
第二步：
解压下载好的文件，进入到vue-devtools目录，安装项目所需要的依赖包。
安装方法：npm install 或者 cnpm install （注：cnpm命令是国内的镜像，速度会快一些）
第三步：
编译项目文件。
编译方法：npm run build
第四步：
修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 persistent参数改为true，访问协议是否包含：1.http:///; 2.https:///; 3.file:///*;这三种情况
image.png
第五步：
添加至浏览器：
添加方法：在chrome浏览器输入地址：“chrome://extensions/”进入扩展程序页面，然后点击“加载已解压的扩展程序...”按钮；选择vue-devtools>shells目录下的Chrome文件夹；还需允许文件地址是否访问。如果看不到“加载已解压的扩展程序...”按钮，先勾选“开发者模式”。如下图:
image.png
第六步：
使用：
打开我们的vue应用，打开调试，点击vue扩展图标，就可以使用了。如下图：
image.png
注：如果点击vue扩展图标还是提示：
Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以检查下你是否使用的是压缩版本的vue.min.js，使用vue.min.js默认为生产环境的，需要改为vue.js.
推荐阅读更多精彩内容
- 2018-12-12 Vue的调试工具vue-devtools的安装 原文地址 ：https://blog.csdn.net/lzy_1112/article/details/7896... 土豆丝炒洋芋丝阅读 212评论 0 赞 1
- vue-devtoools 调试工具安装 近在研究vue单页面应用，一步一步用上全家桶，开发避免不了的就是调试工具，因为vue是进行数据驱动的，单从chro... 流泪手心_521阅读 613评论 0 赞 2
- 给Chrome安装vue-DevTool 最近在学习Vue.js，为了便于调试需要给Chrome浏览器安装vue-devtools开发工具 手动安装: 1.... 小人物的秘密花园阅读 1,123评论 0 赞 1
- 【转】chrome扩展开发入门 chrome扩展开发入门教程 最近在开发chrome插件，看到一篇非常适合入门的教程，特记录一下 注：转载 本文首... 谢大见阅读 3,739评论 3 赞 23
- 2018-09-18 金牛派阅读 14评论 0 赞 0
