如果是vue写的项目，谷歌浏览器右上角的vue小图标会亮起！下面介绍如何安装

1、谷歌浏览器插件商店可以点击安装【需要梯子】

2、vue官网有对应的安装包，需要自己手动 npm run build 一下 更改一个参数！

下面介绍如何 使用第二种方法：

　　1、在github下载devtools源码，地址：https://github.com/vuejs/vue-devtools。

　　2、本地编辑器打开，本人使用 vscode

　　3、下载出来的devtool源码不带 node_modules  自己手动 npm install 下载即可

　　4、你会发现 左边 多出了 node_modules

　　5、运行 npm run build 如下图

　　

　　6、修改shells > chrome目录下的mainifest.json 中的persistent为true；

　　7、打开谷歌浏览器，地址输入 chrome://extensions/  到拓展程序安装页面

　　8、把chorme整个目录拖入到浏览器中，看GIF图：

　　

　

谷歌浏览器 安装 Vue.js devtools 工具的更多相关文章

  1. 谷歌浏览器安装Vue.js devtools

    第一步:访问谷歌商店 在之前的博客中已经谈到了这一点的实现方式 https://www.cnblogs.com/10134dz/p/13552777.html 第二步:下载Vue.js devtool ...

  2. 安装Vue.js devtools

    1.下载安装 https://github.com/vuejs/vue-devtools#vue-devtools 通过以上地址下载安装包,解压以后进入文件,按住shift,点击鼠标右键打开命令窗口 ...

  3. 解决游览器安装Vue.js devtools插件无效的问题

    一: 打开自己写的一个vue.js网页,发现这个图标并没有亮起来,还是灰色 解决方案:  1.我们先看看Vue.js devtools是否生效,打开Bilibili(https://www.bilib ...

  4. chrome调试vue.js的插件：vue.js devtools

    1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...

  5. 【原】无脑操作：Chrome浏览器安装Vue.js devtool

    学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...

  6. Vue调试神器之Vue.js devTools

    Vue项目中使用Vue.js devTools这款调试神器,可以极大程度的提高我们的开发效率. 安装 1.打开Chrome网上应用商店安装插件(自墙),直接搜索devTools安装即可.贵宾传送阵,请 ...

  7. 如何在Window下安装node\npm\cnpm，并安装vue.js，创建项目

    1.安装node.js node.js的官方地址为:https://nodejs.org/en/download/. 根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用 ...

  8. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

  9. 【转】安装Vue.js的方法

    安装vue.js的方法   一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量 ...

随机推荐

  1. Java的参数传递是值传递？

    引用传递和值传递的区别.(不先说定义的都是在耍流氓!) 按值调用(call by value) : 在参数传递过程中,形参和实参占用了两个完全不同的内存空间.形参所存储的内容是实参存储内容的一份拷贝. ...

  2. nginx 入门 安装

    .yum解决编译nginx所需的依赖包,之后你的nginx就不会报错了 yum install gcc patch libffi-devel python-devel zlib-devel bzip2 ...

  3. 查看磁盘和文件的使用情况df和du

    df, du: disk filesystem, disk usage. df : 查看一级目录的使用情况, df -h du: 则是可以查看目录或者某个文件的占用磁盘空间的情况, du -h: 使用 ...

  4. 【转】python---方法解析顺序MRO（Method Resolution Order）<以及解决类中super方法>

    [转]python---方法解析顺序MRO(Method Resolution Order)<以及解决类中super方法> MRO了解: 对于支持继承的编程语言来说,其方法(属性)可能定义 ...

  5. C# datatable 导出到Excel

    datatable导出到Excel /// <summary> /// 将DataTable导出为Excel文件(.xls) /// </summary> /// <pa ...

  6. == 和 equals的区别

    == 和 equals的区别   基本类型:== 比较的是两个变量的面值大小 对象对象: 比较的是内存地址  特例: String a = "abc" String b = &qu ...

  7. 详解微信小程序支付流程

    转发博主 https://blog.csdn.net/qq_38378384/article/details/80882980 花了几天把小程序的支付模块接口写了一下,可能有着公众号开发的一点经验,没 ...

  8. 红黑树的删除操作---以JDK源码为例

    删除操作需要处理的情况: 1.删除的是红色节点,则删除节点并不影响红黑树的树高,无需处理. 2.删除的是黑色节点,则删除后,删除节点所在子树的黑高BH将减少1,需要进行调整. 节点标记: 正在处理的节 ...

  9. DS-二叉排序树的插入、查找和删除

    2019-12-02(菜鸡开始学习了...) Data Structure 之 二叉排序树 二叉排序树是给定一个节点后,接下来插入的数如果比它大就会放到它的右孩子那边,比它小就会放到它的左孩子那边. ...

  10. [Python3] 007 列表的遍历，你是 for 联盟还是 while 部落

    目录 少废话,直接上例子 for 联盟 for 与 list 的简单合作 for 的老搭档 range() for 与嵌套列表(双层列表) for 从 if 那儿认识的 else 循环"三杰 ...