最近在研究vue单页面应用，一步一步用上全家桶，开发避免不了的就是调试工具，因为vue是进行数据驱动的，单从chrome里面进行element查看，查不到什么鸟东西，必须要进行对数据动向进行关查，那我就行一步一步教大安装

1.github下载地址：https://github.com/vuejs/vue-devtools

有Git的同学直接 git clone https://github.com/vuejs/vue-devtools

2.下载安成之后打开cmd进入vue-devtools文件夹把依赖装好npm install 之后再进行npm run build

最好装一个cnpm

3.然后打开shells>chrome>src>manifest.json 把里面的"persistent": false改为true

一切都万事具备了，打开chrome

1.打开里面的设置 > 点击扩展程序 > 点击开发者模式

2.再点击加载已解压的扩展程序，然后把shells>chrome这个文件夹放入就ok了

你再打开一个用vue写的网页，你再打开chrom调试工具你就会发现

大功告成！祝你们开发愉快

vue-devtoools 调试工具安装的更多相关文章

  1. vue开发调试工具vue-devtools安装

    vue开发调试工具别人总结的非常好,所以直接把链接拿过来了,就当做个笔记了,也希望能帮到有需要的人,感谢“沉着前进”,来源(https://www.cnblogs.com/fighxp/p/78150 ...

  2. Vue.js的安装及简单使用

    一.Vue简介 二.Vue.js的安装 2.1.npm安装 2.1.1.node.js介绍及安装 简介: 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基 ...

  3. vue用npm安装删除模块element-ui mint-ui

    vue用npm安装删除模块element-ui mint-ui 在vue项目中先引入了element-ui,后来发现移动版的需要用mint-ui,所以需要先卸载了再安装.卸载element-ui:np ...

  4. vue之vue-cookies安装和使用说明

    vue之vue-cookies安装和使用说明npm官方链接:https://www.npmjs.com/package/vue-cookies 安装,在对应项目根目录下执行:npm install v ...

  5. Vue devtool插件安装后无法使用，提示“vue.js not detected”的解决方法

    vue devtool下载 极简插件  github vue devtool安装 点击谷歌浏览器箭头所指图标-更多工具-扩展程序   ①:直接将后缀为crx的安装包拖进下图区域即可自动安装     ② ...

  6. Vue. 之 npm安装 axios

    Vue. 之 npm安装 axios 使用指令: cnpm install axios 

  7. Vue. 之 npm安装Element

    Vue. 之 npm安装Element 前提: 相关运行环境以搭建完成,例如:Node.Npm等.    假如我的项目目录如下: D:\DISK WORKSPACE\VSCODE\CDS\cds-ap ...

  8. Chrome Vue Devtools插件安装和使用

    安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...

  9. vue卸载与安装+vue创建项目

    vue卸载 npm uninstall -g vue-cli npm install -g @vue/cli 和 npm install -g @vue/cli-init 命令安装新版本vue-cli ...

  10. webstorm安装vue插件及安装过程出现的问题

    想要编辑器识别vue文件需要安装vue插件 1. 安装方法: File--> setting  -->  plugin ,点击plugin,在内容部分的左侧输入框输入vue,会出现1个关于 ...

随机推荐

  1. 学习MVC和jQuery相关的书

    Insus.NET还是较喜欢看纸质书.学习ASP.NET MVC和jQuery编程,Insus.NET为了加强功力,决定再购买几本相关的书:   十月份时,还买了一本: 前两本快递刚送到手,后一本已经 ...

  2. 微信支付 统一下单 字段 body 为中文时 报【签名错误】解决方案（C# SDK）

    方案一 如果你是从微信支付官网下载的 .NET C#[微信支付]API对应的SDK 调用示例 查看源码,会发现这个SDK中的 WxPayData 的类的 CalcHMACSHA256Hash 签名方法 ...

  3. [原创]C#中的堆和栈理解

    引言:程序运行时,它的数据必须存在内存中,一个数据需要多大内存.存储在什么地方以及如何存储都依赖于该数据的数据类型. 1.什么是栈 栈是一个内存数组,是一个LIFO(Last-In-First-Out ...

  4. ASP.NET C# List分页

    List.Skip((pagecount-1)*pagesize).Take(pagesize) 假设你每页10条数据当前是第3页 跳到第4页则:List.Skip((4-1)*10).Take(10 ...

  5. JS 随机排序算法

    https://www.cnblogs.com/getdaydayup/p/6592154.html 使用JS编写一个方法 让数组中的元素每次刷新随机排列 法一: var arr =[1,2,3,4] ...

  6. 一.JDK版本切换批处理脚本

    我们平时在window上做开发的时候,可能需要同时开发两个甚至多个项目,有时不同的项目对JDK的版本要求有区别,这时候我们可能会在一台电脑上安装多个版本的JDK,如下图所示:

  7. String 字符串相加比较

    String 字符串相加 对比 public static void main(String[] args) { String a = "helloword"; final Str ...

  8. 【公众号转载】MyBatis拦截器原理探究

    MyBatis拦截器介绍 MyBatis提供了一种插件(plugin)的功能,虽然叫做插件,但其实这是拦截器功能.那么拦截器拦截MyBatis中的哪些内容呢? 我们进入官网看一看: MyBatis 允 ...

  9. 使用commons-pool2实现FTP连接池

    ​ GitHub : https://github.com/jayknoxqu/ftp-pool 一. 连接池概述 ​ 频繁的建立和关闭连接,会极大的降低系统的性能,而连接池会在初始化的时候会创建一定 ...

  10. 设计模式之工厂模式（Factory）（3）

    在面向对象编程中,最通常的方法是一个new操作符产生一个对象实例,new操作符就是用来构造对象实例的.但是在一些情况下,new操作符直接生成对象会带来一些问题.举例来说,许多类型对象的创造需要一系列的 ...