安装

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 hash_map

    在linux下的hash_map hash_map本身以前本身不属于标准库,是后来引入的.有两种可能:一种可能它被放在了stdext名空间里,那么你就要使用using namespace stdext ...

  2. Android应用程序内部启动Activity过程(startActivity)的源代码分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6703247 上文介绍了Android应用程序的 ...

  3. win下 git gui 使用教程

    现在很多都有git来托管项目或者来查找资料,但是看起来操作不是很方便,现在由于win下可以直接使用git gui,让使用git变得方便,当然这只是针对日常简单的使用,如果想详细的使用,可以去参考廖学峰 ...

  4. SQLLoader3(数据文件没有分隔符时的导入)

    数据文件:D:\oracletest\ldr_tab_fiile.dat1.数据文件字段中间以制表符TAB隔开:7369 SMITH CLERK7499 ALLEN SALESMAN7521 WARD ...

  5. IoC容器Autofac之实例引入(一)

    先不必尝试理解IOC,先来看段代码. 一.一个没有使用IoC的例子 public class MPGMovieLister { public Movie[] GetMPG() { var finder ...

  6. PIL库 (Pillow)

    PIL基础 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important ...

  7. html链接

    1. <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接.</p><p><a hr ...

  8. C#操作Excel总结

    0. 导入命名空间:  1 2 3 4 using Microsoft.Office.Core; using Microsoft.Office.Interop.Excel; using System. ...

  9. jQ全选效果

    <ul id="list"> <li><label><input type="checkbox" value=&quo ...

  10. Unity-资源

    模型.材质.动画 Unity的默认系统单位为"米" 三维软件 三维软件内部米制尺寸/m 默认设置导入Unity中的尺寸/m 与Unity单位的比例关系 Maya 1 100 1:1 ...