Chrome安装Vue-devtools

在浏览器上安装 Vue Devtools工具

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

  • 1)首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools

  • 2)下载好后进入vue-devtools-master目录下 执行cnpm install, 下载依赖,然后执行npm run build,编译源程序。
    在这里插入图片描述

  • 3)编译完成后,目录结构
    修改shells/chrome目录下的mainifest.json 中的persistanttrue
    在这里插入图片描述

在这里插入图片描述

  • 4)打开谷歌浏览器的设置—>扩展程序,并勾选开发者模式

在这里插入图片描述

然后将刚刚编译后的工程中的shells目录下,chrome的整个文件夹直接拖拽到当前浏览器中,并选择启用,即可将插件安装到浏览器。

在这里插入图片描述

  • 5)打开一个已有的vue项目,运行项目,然后在浏览器中—>设置—>更多工具—>开发者工具,进入调试模式:

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

在这里插入图片描述

  • 最后,重启一下你的vue项目应该就可以使用了。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值