安装

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. linux下添加中文输入法

    一.安装环境 查看linux版本号 [ztteng@ztteng ~]$ lsb_release -aLSB Version:    :core-4.0-ia32:core-4.0-noarch:gr ...

  2. 文件系统 busybox and initramfs

    1.busybox制作根文件系统 http://wenku.baidu.com/link?url=h2m_xrj6OsLiHVVhMY2e0C7WKikw_H3dZY_b4mUiW1E7AEf_q34 ...

  3. 批量设置AssetBundleName

    using UnityEngine; using System.Collections; using UnityEditor; using System.IO; public class Change ...

  4. 男同胞爱小秘籍--作为爱他的女朋友了几天C规划

    各位男同胞,不知道你的女朋友没有在过去的一问天,你这个问题~~ 场景重现: 女友:"今天天气不错." 你们:"对" 女友:"今天是我们知道它的最初几天 ...

  5. H5移动端性能优化

    概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒完成或使用Loading 4. 基于联通3G网络平均338KB/s ...

  6. ASP.NET三层架构的分析

    BLL   是业务逻辑层   Business   Logic   Layer DAL   是数据访问层   Data   Access   Layer ASP.NET的三层架构(DAL,BLL,UI ...

  7. jquery文本框验证字符长度和只能输入数字

    <input type="text" class="chujia" onkeyup="this.value=this.value.replace ...

  8. C语言程序的结构分析

    一个C语言源程序可以由一个或多个源文件组成. 每个源文件可由一个或多个函数组成. 一个源程序不论由多少个文件组成,都有一个且只能有一个main函数,即主函数. 源程序中可以有预处理命令(include ...

  9. socket.setNoDelay([noDelay]) 用的是Nagle算法

    Nagle算法是以他的发明人John Nagle的名字命名的,它用于自动连接许多的小缓冲器消息:这一过程(称为nagling)通过减少必须发送包的个数来增加网络软件系统的效率.Nagle算法于1984 ...

  10. [TYVJ] P1010 笨小猴

    笨小猴 背景 Background NOIP2008复赛提高组第一题   描述 Description 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种 ...