如果是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. principal components analysis 主成份分析

    w http://deeplearning.stanford.edu/wiki/index.php/主成份分析 主成分分析(PCA)及其在R里的实现 - jicf的日志 - 网易博客  http:// ...

  2. KindEditor上传图片一直提示undefined

    图片已经上传成功了,但是就是不在文本编辑器里显示图片,一直弹出undefined 返回的JSON都对呀!这是官网说的返回值: //成功时 { "error" : 0, " ...

  3. Delphi XE2 之 FireMonkey 入门(11) - 控件居中、旋转、透明

    RotationAngle.RotationCenter.Opacity 属性继承自 TControl(FMX.Types), 这些新属性成了控件的基本功能. 先在 HD 窗体上添加 TRectang ...

  4. 抓包工具之—charles碎言碎语

    一.Charles常见使用场景: 1.Charles是跨平台的抓包工具,支持Windows,mac或Linux平台: 2.获取请求信息.测试接口时,若接口文档中的参数不清楚或没有接口文档时,可以通过抓 ...

  5. Pycharm中使用virtualenv创建虚拟环境

    虚拟环境是Python解释器的一个私有副本,在这个环境中你可以安装私有包,而且不会影响系统中安装的全局Python解释器. 虚拟环境非常有用,可以在系统的Python解释器中避免包的混乱和版本的冲突. ...

  6. python基础-9.2 单例模式

    设计模式 一.单例模式 单例,顾名思义单个实例.创建一个实例 链接池案例 1.单例=>只有一个实例 2.静态方法+静态字段 3.所有的实例中封装的内容相同时用单例模式 class Connect ...

  7. 在使用spring中的ContextConfiguration、test注解时出现的错误

    错误: 在使用测试注解时出现ContextConfiguration注解和test注解无法正常导包使用的编译异常,如图: 解决办法: 将pom.xml文件中以下依赖管理 中的<scope> ...

  8. github廖雪峰git

    gitHub地址: https://github.com/DickyQie/Tool-use/tree/git-learning-document

  9. java 中断线程的几种方式 interrupt()

    中断 中断(Interrupt)一个线程意味着在该线程完成任务之前停止其正在进行的一切,有效地中止其当前的操作.线程是死亡.还是等待新的任务或是继续运行至下一步,就取决于这个程序.虽然初次看来它可能显 ...

  10. P1828 香甜的黄油 (spfa)

    [题目描述] 农夫John知道每只奶牛都在各自喜欢的牧场(一个牧场不一定只有一头牛).给出各头牛在的牧场和牧场间的路线,找出使所有牛到达的路程和最短的牧场(他将把糖放在那). [题目链接] https ...