Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。

1)首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools。

2)下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖,然后执行npm run build,编译源程序。

3)编译完成后,目录结构如下:

修改shells、chrome目录下的mainifest.json 中的persistant为true:

4)打开谷歌浏览器的设置--->扩展程序,并勾选开发者模式

然后将刚刚编译后的工程中的shells目录下,chrome的整个文件夹直接拖拽到当前浏览器中,并选择启用,即可将插件安装到浏览器。

5)打开一个已有的vue项目,运行项目,然后在浏览器中--->设置--->更多工具--->开发者工具,进入调试模式:

发现vue.js is not detected  ,可以调整一下webpack.config.js的代码,



最后,重启一下你的vue项目应该就可以使用了。

Chrome 扩展 Vue Devtools的更多相关文章

  1. 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序

    第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...

  2. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  3. Chrome Vue Devtools插件安装和使用

    安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...

  4. Vue安装以及Vue项目创建以及Vue Devtools安装

    这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...

  5. 【22】Vue 之 Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  6. Vue安装及插件Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  7. 适合前端开发的 Chrome 扩展有哪些?(十款)

    适合前端开发的 Chrome 扩展有哪些?(十款) 一.总结 好的插件或者框架对程序员的意义重大. 二.适合前端开发的 Chrome 扩展有哪些?(十款) 掘金是一个高质量的技术社区,从 ECMASc ...

  8. vue devtools无法使用

    vue devtools无法使用 一.总结 一句话总结: 没显示vue devtools调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址 二.vue调试工具Dev ...

  9. Electron开发使用Vue Devtools

    转自 [https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/] 2.2 安装步骤 首先在Chrome中安 ...

随机推荐

  1. Tomcat启动 Unable to process Jar entry [javassist/XXXXXX.class]

    例如: 03-Mar-2017 17:01:45.864 SEVERE [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.startup.Co ...

  2. jenkins配置maven

    # 去官网下载maven # 安装 cd /opt wget http://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.5.3/binari ...

  3. 2018-2019-2 《网络对抗技术》Exp5 msf 20165222

    本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 总计:主动:ms17_010永恒之蓝(成功): 浏览器:office_word_hta(成功): 客户 ...

  4. java编程排序之自定义类型的集合,按业务需求排序

    自定义引用类型放入集合中,按实际业务需求进行排序的两种思路 第一种思路: (1)自定义实体类实现java.lang.Comparable接口,重写public int compareTo(Object ...

  5. opencrud graphql 数据操作指南

    opencrud 是社区团队提出,同时prisma框架就是按照这个标准设计的,里面包含了对于graphql 数据 操作的最佳实践,目前还在完善中,但是设计以及指南覆盖的功能还是比较全的,如果用过 pr ...

  6. oracle 脚本创建数据库的相关文章,教程,源码

    学步园推荐专题: 关于oracle 脚本创建数据库的相关文章 文章标题 文章链接 文章简介 oracle命令行创建数据库的示例脚本 http://www.xuebuyuan.com/964527.ht ...

  7. oracle 查版本号

    oracle是强大的数据库,我们怎样看它的版本呢? 工具/原料 oracle 数据库, sqlplus 方法/步骤 首先进入sqlplus,cmd---plsql,登陆我们的用户,如:user/pas ...

  8. PostgreSQL 9.6 keepalived主从部署

    ## 环境: PostgreSQL版:9.6 角色                     OS                    IPmaster                 CentOS7 ...

  9. 生成.eps文件方法

    生成.eps文件方法 背景: 要写论文了,图像的分辨率是一大痛点 方法一: 两步生成.eps文件 用visio 制作图形,保存为pdf格式: 直接用adobe acrobat 打开pdf,然后保存为. ...

  10. C++等语言中整型int等的取值范围计算方式

    举short为例说明 如果以最高位为符号位,二进制原码最大为0111111111111111=2的15次方减1=32767.最小为1111111111111111=-2的15次方减1=-32767此时 ...