凯小默
凯小默

Google浏览器怎么添加vue-devtools拓展工具

步骤

1、下载github上面的源码

git clone https://github.com/vuejs/vue-devtools

如果代码下载不下来，可以下载zip包（我安装的5.1.1的，5.3.3安装依赖会报错）

比如：Error: Cannot find module ‘@vue-devtools/build-tools’

点击下载：

Google浏览器怎么添加vue-devtools拓展工具_第1张图片

2、找到vue-devtools文件夹，在目录下安装依赖包

npm install或者cnpm install

Google浏览器怎么添加vue-devtools拓展工具_第2张图片

3、安装完依赖，找到chrome文件复制一份改名vue-devtools_5.1.1

Google浏览器怎么添加vue-devtools拓展工具_第3张图片

4、拖进去扩展程序

chrome://extensions/

Google浏览器怎么添加vue-devtools拓展工具_第4张图片

5、重启一下浏览器，按f12，打开调试工具

Google浏览器怎么添加vue-devtools拓展工具_第5张图片

下载crx

这一种简单暴力

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

Google浏览器怎么添加vue-devtools拓展工具_第6张图片

下载好以后，拖进拓展工具那边就行

Google浏览器怎么添加vue-devtools拓展工具_第7张图片

你可能感兴趣的:(07-Vue)

  • 11.前端：vue CJ-小门 学习笔记
    艾编程架构课程第十九---二十三节笔记未完待续艾编程前端第一课：实现电商购物车01-Vuejs介绍02-Vuejs-快速下载和安装03-Vuejs实操系列04-Vuejs实操系列-插值表达式05-Vue基础篇-生命周期钩子06-Vue内置指令-事件指令-v-on指令-点击事件07-Vue内置指令-事件指令-v-on指令-事件修饰符08-Vue内置指令-事件指令-v-on指令-按键修饰符09-Vue
  • 07-Vue基础之综合案例——小黑记事本 坠入暮云间x vue3vue.jsjavascript前端
    个人名片：作者简介：一名大二在校生个人主页：坠入暮云间x座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。**学习目标:坚持每一次的学习打卡文章目录实现功能小黑记事本代码模板1.添加功能和列表渲染2.删除功能3.统计任务和清空任务案例总结今天的学习任务是做一个小黑记事本，一个小案例进行练习。经过前几周的学习，相信大家对vue基础知识已经有了大概的了解，复习之前学的知识一起做一个综合案例进行
  • 【vue3】07-vue组件之间的通信-父子互传-事件总线 SevgiliD Vue3vue.js前端javascript
    文章目录Vue的组件嵌套Vue组件化-组件间通信父子组件之间通信非父子组件间的通信Vue的组件嵌套前面我们是将所有的逻辑放到一个App.vue中:在之前的案例中，我们只是创建了一个组件App;如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护;所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件;再将这些组件组合嵌套在一起，最终形成我们的应用程序;
  • 07-Vue技术栈之(组件之间的通信方式) 东方青云、 Vue.js笔记vue.jsjavascript前端前端框架
    目录1、组件的自定义事件1.1绑定自定义事件：1.1.1第一种方式1.1.2第二种方式1.1.3自定义事件只触发一次1.2解绑自定义事件1.3绑定原生DOM事件1.4总结2、全局事件总线（GlobalEventBus）2.1应用全局事件总线3、消息订阅与发布（pubsub）3.1应用消息订阅与发布前言：组件之间通信的方式有很多种，比如props、自定义事件、全局事件总线、消息订阅与发布、父链与子组
  • 第六阶段：大前端进阶||07-Vue详解||P7：Vue双向绑定【观看狂神随笔】 狂野小白兔 笔记vue.jshtml5
    Vue：表单双绑，组件1.什么是双向数据绑定全局性数据流使用单项（vuex），方便跟踪；局部性数据流使用双向(UI控件)，简单易操作。2.在表单中使用双向数据绑定v-model:它能轻松实现表单输入和应用状态之间的双向绑定单行文本：Title{{message}}vardemo=newVue({el:"#app",data:{message:"helloVue"}})多行文本：多行文本：多行文本是
  • 第六阶段：大前端进阶||07-Vue详解||P6：Vue绑定事件【观看狂神随笔】 狂野小白兔 笔记vue.js
    前序：1.v-on可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码参考：jQuery事件v-on监听事件：事件有Vue的事件、和前端页面本身的一些事件！我们这里的click是vue的事件，可以绑定到Vue中的methods中的方法事件！ClickMevarvm=newVue({el:"#app",data:{message:"助行"},methods:{//方法必须定义
  • 07-Vue路由vue-router 杨杰灬
    01-路由入门首页关于我们新闻中心//定义组件//首页constindex=Vue.component('index',{template:'我是首页'})//关于我们constabout=Vue.component('about',{template:'我是关于我们'})//新闻中心constnews=Vue.component('news',{template:'我是新闻中心'})//写路由配
  • 07-Vue分支结构 解启超 Vue从入门到精通
    分支结构v-if使用场景1-多个元素通过条件判断展示或者隐藏某个元素。或者多个元素2-进行两个视图之间的切换如果flag为true则显示,false不显示!varvm=newVue({el:"#app",data:{flag:true}})----------------------------------------------------------ABCNotA/B/CnewVue({el:
  • 学习教程汇总 huangjun2018 SpringBoot
    A-最新课程01-Java并发编程与高并发解决方案02-Tomcat+Memcached+Redis集群构建高可用解决方案03-SpringCloud微服务实战04-Docker+k8s微服务容器化实践05-基于Python玩转人工智能最火框架TensorFlow应用实践06-ElasticStack从入门到实践07-Vue核心技术Vue+Vue-Router+Vuex+SSR实战精讲08-jqu
  • 07-vue移动端项目(搜索结果searchResult页面：路由返回back(),动态传参中取参) Tangoneone
    搜索结果searchResult01-页面结构&样式顶部的导航给导航的左侧箭头添加一个点击事件(这个@click-left方法是vant组件中定义的)：在事件中应该回退到上一个页面新闻数据的渲染使用list组件来渲染数据将首页中的结构复制过来，稍作修改{{item.title}}{{item.aut_name}}{{item.comm_count}}评论{{item.pubdate}}注意点：在v
  • 07-Vue - trade model搭建 coderST
    fromdatetimeimportdatetimefromdjango.dbimportmodelsfromdjango.contrib.authimportget_user_modelfromgoods.modelsimportGoodsUser=get_user_model()classShoppingCart(models.Model):"""购物车"""user=models.Forei
  • 07-Vue 性能优化经验总结 我是来学习的2333
    1.慎用deepwatch：第一次遇到性能问题是文件夹数据量稍大时，操作素材会感觉到明显的延迟和卡顿，通过chrome的performance分析发现是使用watch时，配置了deep等于true，由于这个文件系统是个大的tree状对象，每个素材对象又相互引用，导致任何一份数据更新都会通知到这个watcher。复盘分析对比图如下：deep:true,明显延迟卡顿imageimagedeep:fal
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他