使用vue Devtools

本文介绍如何在谷歌浏览器中正确安装并启用Vue DevTools扩展程序,以便更好地管理和调试Vue项目。

第一步: 在谷歌应用商店中查找 vue Devtools 并安装。安装之后,即使我们打开了vue项目发现vue标识是灰色的,说明并没有成功启动vue。

第二步: 默认安装的情况下,找到C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\3.1.2_0下的manifest.json。

用sublime打开,然后将其中的第二行代码里的persistent选项修改为true。 

 "background": {
      "persistent": true,
      "scripts": [ "build/background.js" ]
   },

 

第三步: 在使用vue-cli脚手架构建的项目中,如果使用 npm run dev, 打开浏览器后就可以发现 标识 变绿,这时就可以使用了,如下所示:

这时,我们就可以很好地管理我们的项目了。

 

 

 

 

 

 

 

 

 

结合使用debugger来调试代码就好了。  这样可以检测代码在运行中的状态, 尤其是对于打包后的代码,如果不用debugger,那么代码就会被打包,很乱,看不到事情的真相,而使用debugger拿到的就是本来的代码。

转载于:https://www.cnblogs.com/zhuzhenwei918/p/6858700.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值