转载自: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. OpenMP 线程互斥锁

    OpenMP是跨平台的多核多线程编程的一套指导性的编译处理方案(Compiler Directive),指导编译器将代码编译为多线程程序. 多线程编程中肯定会涉及到线程之间的资源共享问题,就可以使用互 ...

  2. centos7 selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PATH

    1.查看安装的chrome浏览器版本 2.查看版本对应的驱动 https://sites.google.com/a/chromium.org/chromedriver/downloads 下载后拷贝到 ...

  3. Kotlin(2): 优雅地扩展类的方法和属性

    欢迎Follow我的GitHub, 关注我的CSDN. 个人博客: http://www.wangchenlong.org/, 最新内容. Kotlin由JetBrains公司推出, 是兼容Java的 ...

  4. JS-得到屏幕宽高、页面宽高

    window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width ...

  5. (LeetCode 53)Maximum Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  6. 使用 FOR XML PATH 產生 XML 格式時,遇到 NULL 該如何處理?

    當您嘗試利用 FOR XML PATH 產生 XML 格式時,若遇到 Result Set 為 Null 時,會導致整個查詢結果為 Null ,若您想要在查不到資料時,可以顯示自訂的內容,本文將提供可 ...

  7. taro 填坑之路(二)taro 通过事件监听 实现组件间传值

    1.组件传值的方式 2.事件监听原理 3.事件管理器 utils/event.js /** * 事件池(事件管理器) * 通过事件监听传值 */ class Event { constructor() ...

  8. HDU 5361 In Touch (2015 多校6 1009 最短路 + 区间更新)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5361 题意:最短路.求源点到全部点的最短距离.但与普通最短路不同的是,给出的边是某点到区间[l,r]内随意 ...

  9. 根据sys.database_mirroring查询镜像数据库同步状态

    SELECT * FROM sys.database_mirroring WHERE database_id =DB_ID('dbname') 主要查看mirroring_state字段和值和mirr ...

  10. Java之字节码(3) - 简单介绍

    转载来自 首先了解一下理论知识: 字节码: Class文件是8位字节流,按字节对齐.之所以称为字节码,是因为每条指令都只占据一个字节,所有的操作码和操作数都是按字节对齐的.如:0×03表示iconst ...