安装

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.js的devtools安装的更多相关文章

  1. vue.js中用npm安装vue-router时报错处理办法

    当在使用npm安装东西的时候,最怕遇到的就是,电脑并不想和你说话,只向你抛出一大堆错误...比如在vue.js中用npm安装vue-router的时候,我就遇到 一脸蒙逼的我默默的念了一句:卧..槽. ...

  2. vue.js下载及安装配置

    环境 Deepin15.4 下载及配置 node下载地址:http://nodejs.cn/download/ 解压到文件夹 /home/maskerk/vue/ 下 设置软连接: $ ln -s / ...

  3. Vue.js devtool插件安装后无法使用的解决办法

    初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示v ...

  4. 【转】vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  5. vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  6. vue.js 2.0 --- 安装node环境,webpack和脚手架(入门篇)

    1.环境搭建 1.1.安装node.js 1.2 安装过程很简单,一路“下一步”就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号 ...

  7. Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】

    在开发vue相关的项目时,使用vue devtools工具是一件极其有趣的事,你所有的操作都马上给你实时反馈. 然而有时候安装好的工具,在chrome中不显示. 在网上找过多次,一直没有找到有效解决方 ...

  8. vue.js+web storm安装及第一个vue.js

    小白还是自己写一遍吧 1.下载node.js https://nodejs.org/en/download/ 2.安装淘宝镜像(类似于阿里云的maven中央仓库镜像) 安装时间有点长 安装命令:npm ...

  9. Vue中devtools安装使用

    vue.js的devtools安装 安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工 ...

随机推荐

  1. HHKB Professional 2

    今天买了一副号称程序员专用的静电容键盘 HHBK Pro2无刻版,简单上手了一下,确实名不虚传,打起字来酣畅淋漓,毫不拖泥带水,感觉自己的技术提高了不少呢!!!! 由于是无刻版,需要一些时间来适应,尤 ...

  2. 打造自己个性的notepad ++

    对coder来说,notepad ++ 是一个很不错的文本编辑器.平时用来看看代码.xml文件,都比系统自带的记事本舒服得多.不过,对于像我这种每天用notepad ++写代码的人,一个原装的note ...

  3. C# 使用枚举获取对应的数组值时

    using System; enum Move { walk, run } class Program { static float[] speedAry = { 50.0f, 200.0f }; p ...

  4. Java单元测试：@BeforeClass，@Before，@Test，@After，@AfterClass中的问题详解

    在Junit4中还有的测试注解有:  @BeforeClass ,@Before,@Test,@After,@AfterClass 1.其中:@BeforeClass,@AfterClass是Juni ...

  5. C++： int和string相互转换

    假设在一个C++的程序中常常会用到int和string之间的互换.个人建议能够写成一个函数,下次用的时候直接调用就可以. #include <iostream> #include < ...

  6. [Hapi.js] Logging with good and good-console

    hapi doesn't ship with logging support baked in. Luckily, hapi's rich plugin ecosystem includes ever ...

  7. C#中string.Empty和""、null的区别

    string.Empty是string类的一个静态常量,而""则表示一个空字符串. string是一种特殊的引用类型,它的null值则表示没有分配内存. 使用ILSpy反编译Str ...

  8. Codeforces Round #280 (Div. 2)E Vanya and Field(简单题)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud 本场题目都比较简单,故只写了E题. E. Vanya and Field Vany ...

  9. 给Array添加删除重复元素函数

    给Array本地对象增加一个原型方法,它用于删除数组中重复的元素(可能有多个重复), 返回值是一个包含被删除的重复条目的新数组. Array.prototype.distinct = function ...

  10. C#解析JSON数据

    本篇文章主要介绍C#对Json数据的读取. 主要操作过程是: 发送Http请求获取Json数据 把获取的Json数据转换成C#中的类 下面我们以12306火车票余票的数据为例进行切入. 首先来看一下h ...