当前位置: 移动技术网 > IT编程>网页制作>CSS > vue的调试工具操作简介

vue的调试工具操作简介

2018年09月30日  | 移动技术网IT编程  | 我要评论
vue的调试工具 vue-devtools 的安装和使用(一) 我们想使用vue来开发项目,如果有调试工具,会更方便我们的开发。 下面就是我分享的两种安装方法: 第一种:直接将压缩包拖进的扩展程序(

vue的调试工具 vue-devtools 的安装和使用(一)

我们想使用vue来开发项目,如果有调试工具,会更方便我们的开发。
下面就是我分享的两种安装方法:
第一种:直接将压缩包拖进的扩展程序(以下是在chrome中安装)
将这个压缩包进行解压
第二步:
打开chrome浏览器=>点击更多工具=>点击拓展程序=>将文件拖进扩展程序(开发者模式下)
第三步:
如果你拖进扩展程序里的话会是下面的情形:
这个时候请点击详细信息:
将你的按钮改成和我的一样的,其他的不变
第四步:关闭浏览器重新打开
在你的浏览器右上角会看到一个如图显示的图片
在你的控制台会出现vue:
console会出现:
则为安装成功了

第二种方法:通过cmd
第一步:clone下来我们需要的安装包
通过cmd:执行指令如
git clone https://github.com/vuejs/vue-devtools
第二步:下载依赖
在vue-devtools目录下执行指令
cnpm install或者npm install
第三步:修改manifest.json文件
将persistent:false改为persistent:true
第四步:运行,执行指令
npm run build
第五步:在chrome中设置
更多工具 > 拓展程序
点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图
然后在控制台看到如方法一相同则为安装成功

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网