菜单

文章阅读类

资源下载类

文章阅读类

资源下载类

视频
文章
音乐
壁纸
图床
下载
专栏
留言

vue开发调试神器vue-devtools使用详解


前言:由于vue是数据驱动的,所以存在在开发调试中查看DOM结构并不能解析出什么,开发者借助vue-devtools插件就可以很容易的对数据结构进行解析和调试。一、下载chrome扩展插件通道一、本文末尾下载按钮点击立刻下载通道二、GitHub下载:https://github.com/vuejs/vue-devtools#vue-devtools建议使用npm淘宝镜像依赖包。

应用介绍

前言:

由于vue是数据驱动的,所以存在在开发调试中查看DOM结构并不能解析出什么,开发者借助vue-devtools插件就可以很容易的对数据结构进行解析和调试。


一、下载chrome扩展插件

通道一、本文末尾下载按钮点击立刻下载

通道二GitHub下载:

https://github.com/vuejs/vue-devtools#vue-devtools

建议使用npm淘宝镜像安装依赖包

地址:http://npm.taobao.org/

命令行安装npm淘宝镜像:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后我们就可以使用cnpm代替npm按照依赖包了。


二、cnpm install

下载完成后打开命令行cmd进入vue-devtools文件夹,执行cnpm install


三、npm run build

安装完成后,执行npm run build

四、打开shells>chrome>src>manifest.json并把json文件里的"persistent":false改成true


五、扩展chrome插件

1.打开chrome浏览器,打开设置>点击或者程序>点击开发者模式

2.再点击加载已解压的扩展程序,然后把shell>chrome文件夹放入

六、打开个vue写的项目,f12打开调试工具即可进行vue项目的调试。

点赞(5)

立即下载【加入vip用户组,可无限制下载本站资源


问题反馈

温馨提示:请先登录后再进行下载

Comment list 共有 0 条评论

暂无评论

发表评论(不少于3个字符) 取消回复

立即
投稿
亮度
调节

微信公众号

微信扫一扫加关注

APP下载

浏览器扫一扫

在线
客服
发表
评论
返回
顶部


首页 社区 资源 我的