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. UVAlive5713 Qin Shi Huang's National Road System【次小生成树】【DP】

    LINK1 LINK2 题目大意 给你平面上的n个点 每个点有一个权值 让你求出一个生成树 可以选择一条边不花费代价 要最大化这条边两边端点的权值/剩下n-2条边的长度之和 思路 发现发现其实端点权值 ...

  2. Dijkstra算法(C语言)

    Dijkstra算法 1.定义概览 Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Di ...

  3. 《DSP using MATLAB》Problem 3.1

    先写DTFT子函数: function [X] = dtft(x, n, w) %% --------------------------------------------------------- ...

  4. 转 How do GraphQL remote schemas work

    文章转自 prisma 官方博客,写的很不错 In this article, we want to understand how we can use any existing GraphQL AP ...

  5. 利用OCR文字识别+百度算法搜索,玩转冲顶大会、百万英雄、芝士超人等答题赢奖金游戏

    [先上一张效果图]: 一.原理: 其实原理很简单: 1.手机投屏到电脑: 2.截取投屏画面的题目部分,进行识别,得到题目和三个答案: 3.将答案按照一定的算法,进行搜索,得出推荐答案: 4.添加了一些 ...

  6. Erlang Web 监控工具

    转自http://www.cnblogs.com/me-sa/archive/2012/04/17/erlang-web-monitor.html  Erlang已经提供了一系列工具查看运行时状态查看 ...

  7. PHP实现IMAP

    //以腾讯企业邮箱做了测试 $mailServer="imap.exmail.qq.com"; //IMAP主机 $mailLink="{{$mailServer}:14 ...

  8. Django将.csv文件(excel文件)显示到网页上

    今天,我成功将项目要导入的测试数据导入并呈现了,虽然还不是很完美,但我之后仍会继续改进. 1.首先在主页面上加一个超链接按钮: 其它的不需要管,其它是我的另一个项目,没什么大用的 2.之后配置URL: ...

  9. [Java.web]简单计算器

    项目的  WebRoot 目录下的 calculator.jsp <%@ page language="java" import="java.util.*" ...

  10. android基于adb的性能测试

    应用CPU.内存.点亮.流量等数据,是应用测试的重要性能指标.本次以UC浏览器为例. 当前UC测试中,每个正式版本都会专门做一轮性能测试,测试数据包括: 1小时内存数据 1小时CPU数据 24小时电量 ...