第一步: 在谷歌应用商店中查找 vue Devtools 并安装。安装之后,即使我们打开了vue项目发现vue标识是灰色的,说明并没有成功启动vue。

第二步: 默认安装的情况下,找到C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\3.1.2_0下的manifest.json。

用sublime打开,然后将其中的第二行代码里的persistent选项修改为true。

 "background": {
"persistent": true,
"scripts": [ "build/background.js" ]
},

第三步: 在使用vue-cli脚手架构建的项目中,如果使用 npm run dev, 打开浏览器后就可以发现 标识 变绿,这时就可以使用了,如下所示:

这时,我们就可以很好地管理我们的项目了。

结合使用debugger来调试代码就好了。  这样可以检测代码在运行中的状态, 尤其是对于打包后的代码,如果不用debugger,那么代码就会被打包,很乱,看不到事情的真相,而使用debugger拿到的就是本来的代码。

使用vue Devtools的更多相关文章

  1. vue 在浏览器控制台怎么调试 谷歌插件vue Devtools

    vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...

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

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

  3. vuejs之Vue Devtools

    Vue Devtools大法好 这是一篇小白friendly教程 Vue Devtools是一款谷歌浏览器插件,专门为调试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. vue devtools无法使用

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

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

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

  9. Electron开发使用Vue Devtools

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

随机推荐

  1. 配置nginx支持Https

    配置nginx支持Https一定要先使用stop停止nginx然后重新代开不能使用reload 一:安装letsencrypt 1.从git上克隆下来git clone https://github. ...

  2. 单击GridView控件,高亮单击所在的记录行

    看过下面博文的网友,也许都会觉得有点遗憾,就是很难知道自己点击的是哪一记录行.http://www.cnblogs.com/insus/p/3211017.html 针对这个问题Insus.NET再对 ...

  3. 通知类型 重点: 环绕通知 (XML配置)

    前置通知:在切入点方法执行之前执行 <aop:before method="" pointcut-ref="" ></aop:before&g ...

  4. [SinGuLaRiTy] 2017-07-21 综合性测试

    [SinGuLaRiTy-1028] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有题目:Time Limit: 1s | Memo ...

  5. 洛谷P3784 [SDOI2017]遗忘的集合(生成函数)

    题面 传送门 题解 生成函数这厮到底还有什么是办不到的-- 首先对于一个数\(i\),如果存在的话可以取无限多次,那么它的生成函数为\[\sum_{j=0}^{\infty}x^{ij}={1\ove ...

  6. 10、OpenCV Python 图像二值化

    __author__ = "WSX" import cv2 as cv import numpy as np #-----------二值化(黑0和白 255)---------- ...

  7. 拓扑排序+数学+DP【洛谷P1685】 游览

    P1685 游览 题目描述 顺利通过了黄药师的考验,下面就可以尽情游览桃花岛了! 你要从桃花岛的西头开始一直玩到东头,然后在东头的码头离开.可是当你游玩了一次后,发现桃花岛的景色实在是非常的美丽!!! ...

  8. 关于如何使用代码触发 UIButton的Unwind Segue

    当我们在一个控制视图上,在UITextField输入文字信息之后,希望可以使用键盘的Done触发一个 Done的UIButton,但是刚开始我直接在 -(BOOL)textFieldShouldRet ...

  9. C语言使用指针表示数组的注意事项

    1)数组名是指针常量 如对指针变量可以进行++运算,但是对数组名却不允许,另外,对数组名的赋值运算也是错误的 2)注意指针变量的当前值 指针变量的值在程序运行过程中可能经常改变,要对此注意 3)数组越 ...

  10. CSS(十三).高度如何铺满全屏

    该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...