vue 项目调试

调试工具vue-devtools 安装

vue-devtools 安装可从GitHub下载源程序编译,以插件的形式安装chrome 浏览器。
安装步骤:
新建文件夹,并运行下列语句;

git clone https://github.com/vuejs/vue-devtools
cd vue-devtools
git checkout master
npm install
npm run build

注意:从github 拉取代码后 需切换到分支 master ; 否则,会在 执行 npm run build 命令时 报错: Cannot find module '@vue-devtools/build-tools’

扩展Chrome 插件

vue-devtools 项目编译生成成功后,可通过 打开Chrome浏览器 >选择更多工具>扩展程序 >打开开发者模式,
在这里插入图片描述

点击加载已解压的扩展程序, 找到刚才生成的chrome文件夹,选择 vue-devtools > shells > chrome 放入,

在这里插入图片描述
安装成功:
在这里插入图片描述

vue源代码调试

启动vue项目,打开浏览器,点击sources,查看项目源文件;
在这里插入图片描述
其中标红的部分为vue源程序 ,可添加断点,调试代码;

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值