本文主要介绍 vue的调试工具 vue-devtools 的安装和使用

工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧

安装: 

1.到github下载：

git clone https://github.com/vuejs/vue-devtools

2.在vue-devtools目录下安装依赖包

cd vue-devtools

cnpm install

3.修改manifest.json文件

把"persistent":false改成true

4.编译代码

npm run build

5.扩展Chrome插件

Chrome浏览器 >  更多程序 > 拓展程序

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

6. vue-devtools使用

vue项目, 打开f12, 选择vue就可以使用了.

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

怎么样, 是不是感觉工作效率提高了呢

温情提示:

1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的

2.安装后, 需要关闭浏览器, 再重新打开, 才能使用

vue调试工具vue-devtools安装及使用的更多相关文章

  1. vue.js的devtools安装

    安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工程  执行npm install - ...

  2. 谷歌chrome浏览器vue调试工具vue-devtools的安装

    先导 vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率.帮助我们快速的调试开发vue应用. 第一步: 我们可以先从git ...

  3. vue调试工具vue-devtools的安装

    一.可以在chrome商店中下载安装,当然需要FQ哈,你懂得~: 二.手动安装: 1.将github上项目文件克隆到本地,https://github.com/vuejs/vue-devtools: ...

  4. 2.Vue调试工具vue-devtools的安装步骤和使用

    1.安装步骤: 打开谷歌浏览器设置 -->扩展程序 -->勾选开发者模式 --->加载已解压的扩展程序 --->选择“chrome扩展”文件夹即可:

  5. Vue学习笔记【11】——Vue调试工具vue-devtools的安装步骤和使用

    1.fq安装 2.本地安装: Google浏览器 chrome://extensions/ ,打开扩展程序→打开开发者模式→加载已解压的扩展程序,选择解压后的扩展程序包即可.

  6. Vue中devtools安装使用

    vue.js的devtools安装 安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工 ...

  7. vue调试工具vue-devtools安装及使用方法

    vue调试工具vue-devtools安装及使用方法 https://www.jb51.net/article/150335.htm 本文主要介绍 vue的调试工具 vue-devtools 的安装和 ...

  8. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

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

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

随机推荐

  1. 快手 Android 工程师面经

    看着我把简历投完之后弹出的"完成"字样,我就十分的激动了,我是一名应届毕业生,老老实实的那种,学过的知识我都一步一个脚印的复习的完了,Lintcode上该刷的题,也妥妥的完成了,但 ...

  2. Android后门GhostCtrl，完美控制设备任意权限并窃取用户数据

    Android系统似乎已经成为世界各地病毒作者的首选目标,每天都有新的恶意软件在感染更多的设备. 这一次,安全公司趋势科技发布警告,他们发现了一个新的Android后门--GhostCtrl Ghos ...

  3. MVC MVC+EF快速搭建

    MVC+EF快速搭建 一.准备: vs2017(个人用的) 二.开始MVC+EF之旅吧: 1.创建mvc项目: Web-ASP.NET Web Application(.NET Framework)  ...

  4. 关于position:fixed;的居中问题

    通常情况下,我们通过操作margin来控制元素居中,代码如下: #name{ maigin:0px auto; } 但当我们把position设置为fixed时,例如: #id{ position:f ...

  5. bzoj2038: [2009国家集训队]小Z的袜子(hose) [莫队]

    Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命……具体来说,小Z把这N只袜 ...

  6. iptables规则进阶

    iptables规则进阶 1.实验环境搭建: 在进行试验之前,先要进行实验环境的搭建,要求如下: 1.对于三台主机,分别设置IP地址 2.设置10.0.1.22为内网主机 3.设置中间主机有两个网卡, ...

  7. ES6正则表达式扩展

    前面的话 正则表达式是javascript操作字符串的一个重要组成部分,但在以往的版本中并未有太多改变.然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新.本文将详细介绍ES ...

  8. Jmeter编写Base64加密函数

    方法一: 使用Beanshell Sampler.BSF Sampler等实现,现已Base64加密为例,脚本如下: import sun.misc.BASE64Decoder; String res ...

  9. Nginx安装部署与测试

    场景:项目需要部署在生产环境中,这些新的工具都需要在生产环境中去实践练习.有时间再部署一套ELK的日志分析系统,这样的系统才算具有一定的应用价值. 1 Nginx安装 用root用户安装,采用源代码编 ...

  10. block的各种定义

    1.作为变量 //block 的申明,定义,调用,block快捷方式inline //<#returnType#>(^<#blockName#>)(<#parameter ...