转载自: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. @Redis Desktop Manager无法连接虚拟机中启动的redis服务问题解决

    Redis Desktop Manager下载地址 https://redisdesktop.com/download 安装好以后连接linux服务器上的Redis服务器错误: 问题排查: 1.检查R ...

  2. 登入爱丽网后台(非JS绕过、非盲打、非IP欺骗)

    后台: http://wed.27.cn/marry/marryadmin/web/login.php 不难猜解到后台管理的相关页面名称(不存在的页面服务器返回404,而存在的页面会直接跳转到上面的登 ...

  3. springmvc跨域+token验证

      1)app后台跨域设置      2)拦截器中设置http报文header中token      3)token的生成实现 ==================================== ...

  4. binlog的几种复制形式

    binlog的几种复制形式 MySQL 5.5 中对于二进制日志 (binlog) 有 3 种不同的格式可选:Mixed,Statement,Row,默认格式是 Statement.总结一下这三种格式 ...

  5. Toast.makeText 方法出错 java.lang.RuntimeException

    接手以前同事留下的代码,今天突然出现了一个bug: java.lang.RuntimeException: Can't create handler inside thread that has no ...

  6. T-SQL 之 语法元素

    一.标识符 在T-SQL语言中,对SQLServer数据库及其数据对象(比如表.索引.视图.存储过程.触发器等)需要以名称来进行命名并加以区分,这些名称就称为标识符. 通常情况下,SQLServer数 ...

  7. HTTP 响应头消息

    HTTP 响应头信息 HTTP请求头提供了关于请求,响应或者其他的发送实体的信息. 在本章节中我们将具体来介绍HTTP响应头信息. 应答头 说明 Allow 服务器支持哪些请求方法(如GET.POST ...

  8. iOS-字符串拼接

    // // main.m // /* 将两个字符串 NSString * str1 = @"123"; NSString * str2 = @"abc"; 拼接 ...

  9. Call to a member function select() on string错误

    Call to a member function select() on string错误 Call to a member function select() on array错误 我也是 Get ...

  10. InnerHtml() 与html( )的区别

    InnerHtml() 与html( )的区别 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTM ...