vue devtools如何使用调试_千牛提示opendevtools

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

关于Vue调试工具的最新说明【更新于2022年5月17日】：

由于时间久远，本文章中提到的 ~~谷歌访问助手网站~~ 已无法访问，强烈给大家推荐一个下载 vue-devtools 的插件商店，直接下载拖拽到扩展程序就可以了。简单方便：传送门 后续大家有新的方法可以在评论区留言，因为随着时间推移，链接很有可能会存在失效的问题。

前提

今天准备开始学vue.js了，不为别的，只是因为我女朋友毕设项目的前端是使用vue开发的，而我作为一个前端开发却无能为力，你说可不可笑。
她需要一个会vue的前端帮她做界面，而我虽然身为一个前端开发，但是并不会vue，所以作为男朋友的我本身就很自责。
现阶段的情况是：我只是知道有这些框架，再加上公司的项目只用jQuery，其他新的框架也用不上，所以也一直没机会去接触和学习。毕竟，自己也知道自己几斤几两，JavaScript学的就不怎么样，目前还停留在基础进阶的阶段，肯定就谈不上学其他框架了。
我深知自己能力弱，说实话，除了jQuery这个轻量级的js框架会用，其他js框架可以说是都不沾边。我真的是很无奈，可以说是一点忙也帮不上，只能眼睁睁看着困难摆在她的面前却束手无策，这种感觉很难受。
而且作为她来说，男朋友是一个做前端的，需要求助的时候我却帮不了她，我只能回一句：我不会，你找其他人帮你吧。而她呢，只能去求助他人。在她看来，她心里肯定对我充满了失望和不满。

所以说，不管出于什么理由，始终都不能停下学习的脚步，不会就去学嘛，对不对，我就不信还没有学不会的东西。而且，学了肯定没有坏处，就算现在用不上，说不定日后也会用上的。

话不多说了，那就开始吧！

vue学习之旅

第一步：从官方的`vue`教程开始学起

Vue.js【官网】—— 点击查看

建议有一定的基础再来学（如下图所示）

何为vue？【官方介绍 — Vue.js —— 点击查看】

首先，关于vue我要说的是，我听到最多的发音是V [vi:] U [ju:] E [i:]，即根据vue的字母组成，然后按照字母本身的发音来读，即vue。
官方的读法是：Vue (读音 /vjuː/，类似于 view) 。
它是一套用于构建用户界面的渐进式框架。在这里，提取到两个关键词，构建用户界面和渐进式框架。（目前来说，我也不懂，先继续往下看吧）
它与其它大型框架的区别：Vue 被设计为可以自底向上 逐层应用。（可能这就是所谓的渐进式吧，还是不懂）
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js框架是什么，为什么选择它？（我也是一知半解的，具体的看这里的介绍吧）

我的理解：

vue是响应式的，即JavaScript代码中变量值的改变会反映到HTML元素中，也就是说，实现了数据和视图（HTML元素）的绑定。
以前的做法：如果要改变DOM元素中的内容，我们通常都是使用JavaScript提供的DOM API，先获取到相应的DOM元素，然后进行动态的操作。因为首先要定位到你要修改的DOM元素，然后才能修改数据。如果要改动多个元素的话，我们就需要频繁的进行手动DOM操作。
现在的改变：我们无需关心DOM的更新了，只需要改变数据就可以了。因为数据和视图是绑定的，数据的改变会影响到视图，所以vue帮我们自动更新了视图。

尝试vue

尝试 Vue.js 最简单的方法就是，自己创建一个.html文件，然后引入vue.js文件，跟着官方的教程自己写一个Hello World的案例。这样做，可以加深自己对vue的理解。

引入方式（推荐新手使用）

代码语言：javascript复制

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

代码语言：javascript复制

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

安装教程——点击这里查看（新手不建议看）

以下是官方的说辞：

请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于Node.js的构建工具时。

所以，作为新手来说，不要着急学太多的东西，先来体验一下vue的魔力，然后再去学习其他的安装方法。

复制粘贴下面的代码就能直接运行

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第一个Vue应用</title>
	<!-- 开发环境版本，包含了用帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 声明式渲染 -->
	<!-- Vue.js的核心是一个系统，允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。 -->
	<div id="app">
		{
  
  {message}}
	</div>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				message:'Hello Vue!'
			}
		});
	</script>
</body>
</html>

至此，我们已经成功创建了第一个Vue应用！

效果图（不足为奇，已经见怪不怪了）

分析（其实好奇的是代码中的语法）

（1）首先，声明一下你要渲染的区域。也就是说，先创建一个HTML元素，声明一下哪个HTML元素需要使用vue的语法。其实就是声明vue语法的作用域，不声明是没办法使用vue的语法的。（2）给HTML元素设置一个class或者id，用于让vue语法找到该元素（指定的渲染区域）。（3）在script标签内使用了vue简洁的模板语法，即

代码语言：javascript复制

//创建了一个vue的实例
var app = new Vue({
     el:'id或class',
     data:{
         键名:值
     }
});

显而易见，其中做了两件事情：

声明vue语法要应用的范围，或者说要渲染的区域。
定义好需要绑定的数据。因为数据是和视图绑定起来的。视图就是指HTML元素。

（4）将数据绑定到视图当中。div中双花括号的语法{ {}}，其实这个整体就是动态绑定的数据。{ {}}中放的是变量名或者表达式。变量或者表达式的值可以在模板语法中的data进行改变。（5）如果要更新视图，那么只需要改变数据就可以了。数据的改变的同时，视图也会自动进行更新。

结论： 其实，Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

问：我们要怎么确认呢？ 答：打开你的浏览器的 JavaScript 控制台，并修改 app.message 的值，你将看到视图相应地更新。

上面的动态图演示的是，谷歌浏览器已经安装完 vue-devtools插件的情形。 （注：此情形特指控制台中的黑绿色标识，并非指代码的操作）

第二步： `Vue`调试神器 `vue-devtools` 的安装

极速安装Vue调试神器 vue.js devtools（5分钟搞定）—— 点击查看最近安装方法

最新提示：（写于2018/04/17 凌晨01:27）

下面的这种方式耗时耗力，后来又发现一种全新的极速安装的方法，直接点击上方文字查看最新方法。
如果想要坚持使用旧方法的请忽略上面这句话，继续往下走就行了。

问题：为什么要安装该插件： 答案：因为vue是进行数据驱动的，仅仅从chrome浏览器的控制台进行element查看，是看不到数据的动向的。

未安装的情形：

浏览器的控制台会提示你：

下载vue DevTools扩展以获得更好的开发体验；（插件的GitHub地址：https://github.com/vuejs/vue-devtools）
您正在以开发模式运行Vue。当为生产部署时，一定要打开生产模式。更多提示见 https://vuejs.org/Guide/ployment.html。

安装前的准备

因为安装依赖需要Node.js环境。所以，第一件事就是安装Node.js。
安装完成之后，从github的下载地址将该插件下载下来：https://github.com/vuejs/vue-devtools

win系统下nodejs安装及环境配置 – CSDN博客

安装步骤

下载之后，解压文件，然后复制粘贴解压的文件，放在某个盘的某个文件夹下面。
然后通过Windows R这个快捷键打开“运行”对话框，输入cmd，进入命令行。
在命令行内，进入到vue-devtools-master目录下。
先执行npm install命令；（执行过程比较长，请耐心等待...）
执行成功后，再执行npm run build命令；
这两个命令都执行成功，就可以关闭命令行了。
然后进入C:Softwarevue-devtools-mastershellschrome目录下，修改mainifest.json 文件中的persistent属性的值为true。（根据自己安装的目录去找mainifest.json 文件）
打开谷歌浏览器 —— 点击右上角纵向排列的三个点选项 —— 更多工具 —— 右上角勾选开发者模式（有的已默认勾选了）—— 加载已解压的扩展程序 —— 找到本地磁盘中vue-devtools-master目录下的chrome文件夹 —— 选择该文件夹并点击确定按钮。