Spring Boot Vue Element入门实战（三）Vue Devtools安装

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/u013254183/article/details/97617317

本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用浏览器扩展，可以在浏览器开发者工具下调试代码。

（一）devtools下载

首先在github下载devtools源码，地址：https://github.com/vuejs/vue-devtools

（二）安装devtools

下载后解压vue-devtools-dev.zip，然后cmd进入vue-devtools-dev目录
然后执行cnpm install, 下载依赖，然后执行npm run build，编译源程序

编译完成之后目录如下

（三）修改mainifest.json

进入shell -> chrome -> mainifest.json

修改persistant为true，如下图

（四）chrome 浏览器安装

打开chrome 浏览器，点击右上角设置，点击进入扩展程序，打开开发者模式

然后点击加载已解压的扩展程序，选择刚刚编译后的工程中的shells -> chrome的整个文件夹，并选择启用，即可将插件安装到浏览器。安装完成下图中就会出现vue devtools 插件的信息

（五）开发调试

然后访问一个vue的页面，地址栏右边就会出现VUE的图标了，

发现vue.js is not detected ，可以调整一下webpack.config.js的代码，


修改完成之后重启项目，如下图就可以进入开发模式，然后按F12就有VUE的信息了，然后就可以尽情的调试了。


到此我们就完成了Vue Devtools的安装了。

上一篇：Spring Boot Vue Element入门实战（二）前端框架搭建
下一篇：Spring Boot Vue Element入门实战（四）主页面开发
点击这里返回目录

扫描二维码关注公众号，回复： 7657009 查看本文章

程序人生，更多分享请关注公众号

源代码下载

关注上面公众号，回复源码即可获取gitbug/gitee下载地址