转载自: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. ZooKeeper安装和配置(转)

    原文链接:http://coolxing.iteye.com/blog/1871009 Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成集群模式. 下面将分别进行介绍. ...

  2. 一次Dapper高并发测试报告记录. 结果....

    一直听说dapper的数据处理能力很强. 我也一直很喜欢. 不过最近的一次压力测试却出乎我的意料.... 好久没写东西,感觉自己都不知道怎么表达自己的意思了.   另外 这次的测试也是自己才开始的 . ...

  3. Power Desginer系列00【转载】

    绪论 Sybase PowerDesigner(简称PD)是最强大的数据库建模工具,市场占有率第一,功能也确实十分强大,现在最新版本是15.1,已经支持最新的SQL Server 2008等数据库,另 ...

  4. Windows之权限的继承性 累加性 优先性 交叉性及四项基本原则

    Windows NT以后的文件,及文件夹共享设置有以下特性:继承性.累加性.优先性.交叉性.     继承性是说下级的目录在没有经过重新设置之前,是拥有上一级目录权限设置的.这里还有一种情况要说明一下 ...

  5. make&&gcc/g++ 生成 map file

    map file 对于嵌入式开发是非常有用的,尤其是当你开发的module引起了 kernel panic 的时候. 仅写作Mark用 make: $vim makefile (add  " ...

  6. 转自http://bbs.linuxtone.org/thread-1062-1-1.html

    详细参考:http://wiki.codemongers.com/NginxChsHttpMainModule worker_processes指明了nginx要开启的进程数,据官方说法,一般开一个就 ...

  7. apache服务器多端口支持

    本示例支持80,82两端口 修改conf/httpd.conf文件: Listen 改为 Listen Listen # Virtual hosts #Include conf/extra/httpd ...

  8. [置顶] 安卓弹出ProgressDialog进度框之后触摸屏幕就消失了的解决方法

    安卓在4.0之前对话框都是模态的,之后就改成非模态了. 解决方法吗,使用progressdialog.setCancelable(false)也行,但是这样就不能响应返回键的事件了,最好的方法是调用p ...

  9. 如何使用飞秋FeiQ实现两电脑通信(或传输文件)

    如何使用飞秋FeiQ实现两电脑通信(或传输文件) 1. 在两天电脑上,分别按照飞秋FeiQ 我使用的绿色飞秋2013正式版 2. 使用一根网线,将两电脑的网口连接一起 3. 设置飞秋FeiQ的端口号不 ...

  10. Python——Shell编程关于Sha-Bang(#!)

    Q. #!的名字为什么叫Sha-Bang? A. Sha-Bang是Sharp和Bang的组合词.Sharp for #, Bang for ! 类似的情况是,C#通常被称为C Sharp Q. Sh ...