vue开发调试神器vue-devtools使用详解-成都快上网建站

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

前言:

创新互联建站于2013年开始,是专业互联网技术服务公司,拥有项目成都网站建设、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元卧龙做网站,已为上家服务,为卧龙各地企业和个人服务,联系电话:13518219792

由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。

但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。

一、下载chrome扩展插件

GitHub下载地址:

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

建议使用npm淘宝镜像按照依赖包

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

命令行安装npm淘宝镜像:

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

之后我们就可以使用cnpm代替npm按照依赖包了,npm安装依赖包确实太慢了.....

二、cnpm install

下载完成后打开命令行cmd进入vue-devtools文件夹,按照依赖包并npm run build

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

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

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

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

四、扩展chrome插件

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

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

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

最后

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

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

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


标题名称:vue开发调试神器vue-devtools使用详解
网页网址:http://kswjz.com/article/pgjhpd.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流