最近在研究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应用程序中，怎样删除上传的文件

    在ASP.NET MVC应用程序中,怎样删除上传的文件. 由于上传时,真正文件是存储在应用程序某一目录,在数据库表中,只是存储其基本信息.在删除时,需要注意一下,由于没有事务可操作.Insus.NET ...

  2. Java - “JUC”锁

    [Java并发编程实战]-----“J.U.C”:锁,lock   在java中有两种方法实现锁机制,一种是在前一篇博客中([java7并发编程实战]-----线程同步机制:synchronized) ...

  3. Asp.Net里关于Session过期跳转页面的一些小技巧

    这里算是自己的个人随笔吧,仅供参考使用,后续有更好的方法再做补充 之前在Aspx页面里面,在Session过期的时候我经常会使用 Server.Transfer("b.aspx") ...

  4. EF数据库优先模式（三）

    今天2018年4月1日,呼叫王伟,81192,收到请返航! 接上次说,本节将LINQ以及lambda表达式 LINQ是C#里面针对SQL Server特有的数据访问操作方法,通俗一点说就是类似于写SQ ...

  5. HDU3625(SummerTrainingDay05-N 第一类斯特林数)

    Examining the Rooms Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  6. Bash：字符串操作

    参考:http://blog.csdn.net/finewings/article/details/5718133 字符串提取 去掉指定前缀 1. ${varible#pattern}         ...

  7. js-学习笔记-Thunk函数

    Thunk 函数是自动执行 Generator 函数的一种方法. 编译器的“传名调用”实现,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体.这个临时函数就叫做 Thunk 函数. fun ...

  8. js-ES6学习笔记-Class（6）

    1.类相当于实例的原型,所有在类中定义的方法,都会被实例继承.如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”. 2.父类的静态方法,可 ...

  9. 【代码笔记】iOS-播放从网络上下载的语音

    代码: ViewController.m #import "ViewController.h" //录音 #import <AVFoundation/AVFoundation ...

  10. 商业智能BI和报表的区别？

    报表是数据展示工具,商业智能BI是数据分析工具. 报表工具是一类报表制作工具和数据展示工具,用于制作各类数据报表.图形报表.或者制作特定格式的电子发票联.流程单.收据等等. 商业智能的重点在于商业数据 ...