如果是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. 安装fedora23后的一些杂项设置

    Boxes是创建虚拟机的技术 tweak: 拧, 捏; 微调 he gave the boy's ear a painful tweak. it's a small tweak over the ra ...

  2. C++中的通用结构定义，及相应的序列化、反序列化接口

    一个通用的C++结构定义如下: typedef struct tagCommonStruct { long len; void* buff; }CommonStruct_st; 此接口对应的普通序列化 ...

  3. mybatis 如何关闭connection

    1.前言 最开始操作数据库是使用jdbc操作数据库,每次创建一个连接都需要关闭连接,避免占用资源.比如 Class.forName("com.jdbc.mysql.Driver") ...

  4. 【ABAP系列】SAP WEB GUI的实现，SAP在网页中使用

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP WEB GUI的实现,SAP ...

  5. js中ajax请求返回的数据处理成数组后，局部变量赋值给全局变量后，为空

    第二步是想把ss的值扔给res_r,两个数组直接相等即可,可谁想到,取出来的值是空. 如图取出来的值是空. 我一脸懵逼,调试了些许时间,最后把ss遍历一下,在重新push进res_r 再来看效果,已经 ...

  6. [开发技巧]·如何让离线安装Python包

    [开发技巧]·如何让离线安装Python包 1.问题描述 PyPI(Python Package Index)是python官方的第三方库的仓库,所有人都可以下载第三方库或上传自己开发的库到PyPI. ...

  7. yolov--7--解决报错:/bin/sh: 1: nvcc: not found make: *** [obj/convolutional_kernels.o] Error 127

    1.配置darknet配置darknet出现错误: qhy@qhy-desktop:~/darknet$ make cleanqhy@qhy-desktop:~/darknet$ make……gcc ...

  8. 应用安全_WTS-WAF绕过

    Access 检测: ?id=+AND+= ?id=+AND+=2 绕过: sqlmap.py -u http://www.xx.com/project.asp?id=29 --tables --ta ...

  9. "SQLServer复制需要有实际的服务器名称才能连接到服务器,请指定实际的服务器名"

    最近在学习SQL SERVER的高级复制技术的时候,遇到一个小问题,就是用本地SQL SERVER连接服务器的数据库时,在查看复制功能的发布服务器时,连接不上,弹出一个错误提示框架,如下:原来在自己本 ...

  10. Spring框架中AOP特性

    1.AOP介绍 即:面向切面编程,在不改变原有方法的定义与使用.也不改变原程序流程的情况下,可以改变原有方法的功能{增加一些附加的功能,在指定的地方添加其他函数方法:} 2.其他的方法:[需要的四个接 ...