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. flask第二十一篇——练习题

    自定义url转化器 实现一个自定义的URL转换器,这个转换器需要满足的是获取从多少到多少的url,例如,你输入的地址是http://127.0.0.1:8000/1-5/,那么页面返回[1,2,3,4 ...

  2. WPF 程序 处理未捕获异常,和程序莫名终止说拜拜

    http://www.cnblogs.com/liuyueyu/p/4476151.html 百密一疏的Bug很难避免,没有谁能保证,我的程序永远 0 BUG; 突然接手一个很庞大的项目,在项目运行期 ...

  3. 【转】Linux shell的&&和||

    原文网址:http://www.2cto.com/os/201302/189655.html Linux shell的&&和||   shell 在执行某个命令的时候,会返回一个返回值 ...

  4. 【转】嵌入式Linux文件系统启动脚本及分析

    原文网址:http://www.linuxidc.com/Linux/2011-03/33728.htm 在内核初始化完成后,嵌入式linux 文件系统的启动过程主要包含以下几个步骤: 1. 执行/s ...

  5. Python download a image (or a file)

    http://stackoverflow.com/questions/13137817/how-to-download-image-using-requests import shutil impor ...

  6. 关于 ImageLoader 说的够细了。。。

    简介ImageLoader(一) 分类: android 开源及第三方项目2014-05-30 12:14 14126人阅读 评论(0) 收藏 举报 ImageLoader 使用该开源项目的之前,先给 ...

  7. 蓝桥杯 生命之树【树状dp】

    生命之树 在X森林里,上帝创建了生命之树. 他给每棵树的每个节点(叶子也称为一个节点)上, 都标了一个整数,代表这个点的和谐值. 上帝要在这棵树内选出一个非空节点集S, 使得对于S中的任意两个点a,b ...

  8. Log4j(2)--日志等级

    Log4j根据日志信息的重要程度,分OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL 当然再细分的话 还有 FATAL(严重错误), 但是Log4j官方建议实际实用的话,Log4 ...

  9. django-控制mysql事物

    from django.db import transaction 两种方式控制事务:为了保持数据一致性 一个Book表,一个Author表.添加一本书,也要保证添加作者.By事物控制 book = ...

  10. GridView弹出对话框

    if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate) ...