转载自:http://www.cnblogs.com/lolDragon/p/6268345.html

安装

1.github下载地址:https://github.com/vuejs/vue-devtools

2.下载好后进入vue-devtools-master工程  执行npm install ----->npm run build.

3.修改mainifest.json 中的persistant为true

4.打开谷歌浏览器设置--->扩展程序--》勾选开发者模式---》添加工程中的shells-->chrome的内容,至此恭喜已经安装成功!!!

5.打开自己的vue项目中,如果是有vue-cli构建的项目,执行npm run dev,打开http://localhost:8080/ 服务器调试地址;至此完成devtools的安装;

使用

打开vue项目,在控制台选择vue:
 
5. 可操作组件查看信息变化(例如分页组件)
 选择第一页:
 
 
 选择最后一页:
 

vue 的调试工具的更多相关文章

  1. vue开发调试工具vue-devtools安装

    vue开发调试工具别人总结的非常好,所以直接把链接拿过来了,就当做个笔记了,也希望能帮到有需要的人,感谢“沉着前进”,来源(https://www.cnblogs.com/fighxp/p/78150 ...

  2. vue-devtools是vue浏览器调试工具

    开vue官网在vue-生态系统-工具可以看到vue-devtools这个工具: vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我 ...

  3. vue-devtools : vue的调试工具及log显示工具 vconsole

    使用 devtools 有很多好处,比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化.另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验. 注意:请留意如果页面使用了一个生产环境 ...

  4. vue应用调试工具 vue-devtools安装

    方法一:chrome直接访问下面地址下载安装:(需要翻墙) https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejigli ...

  5. vue调试工具vue-devtools安装及使用

    本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装:  1.到github下载: ...

  6. chrome中安装Vue调试工具vue-devtools

    一.前言 vue-devtools是一款基于浏览器的插件,用来调试vue应用.本篇文章将要总结的是如何在chrome中安装Vue的调试工具vue-devtools. 首先能想到的第一种方法就是直接在c ...

  7. vue调试工具vue-devtools安装及使用方法

    vue调试工具vue-devtools安装及使用方法 https://www.jb51.net/article/150335.htm 本文主要介绍 vue的调试工具 vue-devtools 的安装和 ...

  8. 前端Vue准备工作

    环境准备: 1.安装Node&npm,只是为了要Node.js的环境https://nodejs.org/en/download/ 2.安装完成Node以及npm之后,就可以用npm conf ...

  9. 物联网架构成长之路(36)-Vue前端入门

    1. 前言 物联网平台,需要有一个类似大屏看板的功能. 找了一圈,发现阿里已经有对应的DataV产品,但是那个价格有点贵啊.所以找了这个[http://datav.jiaminghi.com/demo ...

随机推荐

  1. iOS开源项目:UIDevice-with-UniqueIdentifier-for-iOS-5

    用于替代系统UDID的方法. https://github.com/gekitz/UIDevice-with-UniqueIdentifier-for-iOS-5 1.使用方法: UILabel *l ...

  2. jenkins错误413 Request Entity Too Large<

    jenkins-nginx--sonar1/sonar2

  3. Page的ResolveClientUrl与ResolveUrl读取路径

    Page的ResolveClientUrl与ResolveUrl读取路径 . 一.Page对象的ResolveClientUrl与ResolveUrl Page.ResolveClientUrl(): ...

  4. HDU1411++几何+四面体体积

    公式题... 自己闲的用cos sin推出个公式 还不知道对不对,明天补上.. #include<stdio.h> #include<math.h> #include<i ...

  5. 运算符重载,浅拷贝(logical copy) ,vs, 深拷贝(physical copy),三大件(bigthree problem)

    一般的我们喜欢这样对对象赋值: Person p1;Person p2=p1; classT object(another_object), or    A a(b); classT object = ...

  6. Centos7 启动 python脚本

    假设文件夹\home\sks\python3_crawl下面有个test.py 文件 打开terminal终端:转到root模式 进入cd /hom/sks/python3_crawl 执行:pyth ...

  7. Android面试,View绘制流程以及invalidate()等相关方法分析

    整个View树的绘图流程是在ViewRoot.java类的performTraversals()函数展开的,该函数做的执行过程可简单概况为 根据之前设置的状态,判断是否需要重新计算视图大小(measu ...

  8. Android -- sqlite数据库随apk发布

    背景                                                                                            把在工程中测 ...

  9. SVM训练结果参数说明 训练参数说明 归一化加快速度和提升准确率 归一化还原

    原文:http://blog.sina.com.cn/s/blog_57a1cae80101bit5.html 举例说明 svmtrain -s 0 -?c 1000 -t 1 -g 1 -r 1 - ...

  10. discuz,ecshop的伪静态规则(apache+nginx)

    discuz(nginx): (备注:该规则也适用于二级目录) rewrite ^([^\.]*)/topic-(.+)\.html$ $/portal.php?mod=topic&topic ...