如何在chrome浏览器中安装vue的调试工具

听说前段框架vue挺火的,就想折腾学习下这个超火的前端框架。框架确实简单,但是和传统的js html还是有些区别的。所以调试上面还是有些问题的。网上搜索了怎么安装Vue的调试工具,但是发现都有些问题,所以这里跟大家介绍下如何在chrome浏览器中安装vue的调试工具?

如何在chrome浏览器中安装vue的调试工具

1.安装 vue的调试工具 vue-devtools
从https://github.com/vuejs/vue-devtools 下载vue-devtools
2.安装nodejs https://nodejs.org/en/download/
3.安装yarn https://yarnpkg.com/en/docs/install
4. 解压下载下来的vue-devtools-dev
在vue-devtools-dev 目录下执行
yarn install
yarn run build
5.扩展Chrome插件
打开Chrome浏览器 > 更多程序 > 拓展程序
点击加载已解压程序按钮, 选择 vue-devtools-dev > packages > shell-chrome 放入, 安装成功如下图

6. vue-devtools使用

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

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

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值